标签
当有尖括号时叫标签，不加时称元素，如
表格
合并行属性 rowspan, 合并列属性 colspan
CSS选择符
CSS选择符包含5大类：
元素选择符
见的有类型选择符，例如: div{color:#f00;}
关系选择符
常见的有包含选择符，例如: div p{font-weight:bold;}
属性选择符
例如: img[alt]{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）类型的元素则是根据自身的内容及子元素来决定宽度。