CSS总结

表格

合并行属性 rowspan, 合并列属性 colspan

CSS选择符

CSS选择符包含5大类：

元素选择符

见的有类型选择符，例如: div{color:#f00;}

关系选择符

常见的有包含选择符，例如: div p{font-weight:bold;}

属性选择符

例如: img[alt]{width:100px;}

伪类选择符

例如: a:hover{color:#f60;}

伪对象选择符

例如: div:first-letter {font-size:20px;}

margin和padding

margin：用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。

   如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。

   如果只提供一个，将用于全部的四边。

   如果提供两个，第一个用于上－下，第二个用于左－右。

   如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

padding：用来设置元素内容到元素边界的距离。

   如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。

   如果只提供一个，将用于全部的四条边。

   如果提供两个，第一个用于上－下，第二个用于左－右。

   如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

   内联对象要使用该属性，必须先设定对象的height或width属性，或者设 定position属性为absolut

margin和padding是隔开元素中最常用的两个属性，margin就是指元素边界外的距离，padding刚好相反，定义元素边界内部的距离。

1、IE6浮动双倍margin bug

触发方式

元素被设置浮动（float取消就不会出现）（demo1）

元素在与浮动一致的方向上设置margin值（demo2）

（1）double margin只发生在float:left时？

当然不是，自己可以试试（将css修改为float:right和margin-right:10px）

（2）有左浮动又有右浮动的情况（demo3）

第一个左浮动元素和第一个右浮动元素都将会出现 double margin

（3）如果左浮动和右浮动交替出现呢？（demo4）

其实效果和上面差不多

（4）double margin也会发生在 writing-mode（css3）demo5

 writing-mode 会影响 double margin 的方向；并且当设置了 float:right 时， 只有 margin-bottom 会 double

针对第四个，把css中改为float:left 时， double margin 的将会是 top or bottom  　　demo6

解决方案

1、fix的case

#demo p{

    float:left;

    margin-left:10px;

    _margin-left:5px;

}

2、display:inline

#demo p{

    _display:inline;

    float:left;

    margin-left:10px;

}

2、IE6/7 clear引发的margin-top bug （demo7：margin-top为负值，设置成正值也是如此）

原因：设置了 clear 为非 none 值的元素其顶部 border 边界不允许出现在之前浮动元素的底部margin边界之上。也就是说必须在垂直方向上递次堆叠却不能重合。所以说高级浏览器是遵循w3c规范的，而IE6/7的实现明显有悖该规则。

也就是说，设置的clear为非none的margin-top不起作用（w3c），但是ie6/7起作用。

E6/7下由 clear 特性引发的 margin-top bug，并没有像 double margin 那样的万精油 display:inline 

解决方案。

1尽量避免为设置了 clear 为非 none 值的元素定义margin-top；

2如果必须，可以将拥有 clear 特性的元素作为容器，在其子元素上设置 margin-top；

3视情况换成padding-top；

在某个临界值，拥有clear特性的元素其margin紧邻之前的浮动元素依然有效。

临界值是包含块内浮动元素的实际高度，即浮动元素的 margin + border + padding + height

3、IE8按钮margin auto居中失效Bug

什么是置换元素（Replaced elements）？

一个元素拥有内在的二维属性，其宽高属性受外部资源影响，默认拥有CSS 格式，这样的元素被称为置换元素。

将 button 显式的转换为了 block，同时我们知道 button 作为置换元素，本 身具备内在宽高，也就是说这时，我只需要加上 margin:auto ，该按钮就应 该在其包含块里水平居中。（demo8）

解决方案：

1给其显示的定义宽度

2 其它水平居中方案，如：absolute + 负margin

float

 浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

一个浮动div去查看前面一个div是否浮动，如果浮动，则它将脱离标准流。

  假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

清除浮动

 clear : none | left | right | both

none  :  默认值。允许两边都可以有浮动对象

left   :  不允许左边有浮动对象

right  :  不允许右边有浮动对象

both  :  不允许有浮动对象

CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素

position

position: relative并没有改变行内元素的Display属性，这个概念非常重要。

在其节点树中所有父（祖）元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移。应用了position: absolute的元素会脱离页面中的普通流并改变Display属性

inlie-block

 inline-block 即内联块，可以水平排版 

盒子模型

标准盒模型

怪异盒模型（IE盒模型）

标准盒模型(Standards Mode)：

总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

怪异盒模型(Quirks Mode)：

总宽度 = margin-left + width + margin-right

不过由于margin始终是透明的，一般都不将margin计入总宽度里。

盒子模型分为两种：块状元素、行内元素，请注意这里的块状元素（Block）和行内元素（Inline）与Display属性中的inline、block两个属性值并不等同。盒子模型中的Inline、Block类似于是Display属性的父类，例如：Display属性中的list-item属性值是属于块状（Block）类型的。

块状（Block）类型的元素可以设置width、height属性，而行内（Inline）类型设置无效。

块状（Block）类型的元素会独占一行（直观的说就是会换行显示，无法与其他元素在同一行内显示，除非你主动修改元素的样式），而行内（Inline）类型的元素则都会在一行内显示。

块状（Block）类型的元素的width默认为100%，而行内（Inline）类型的元素则是根据自身的内容及子元素来决定宽度。