文中标有@todo样式是我现在还不能理解的，还需要线下查阅的
第三章 可视化格式模型
1.盒模型概述
- 盒模型是CSS的基石之一,它指定元素如何显示以及(在某种程度上)如何相互交互。
- 比起通用选择器覆盖margin和padding样式，使用全局reset把内边距和外边距显示的设置为0可能更安全
- IE的早期版本（包括IE6）在混杂模式中使用自己的非标准盒模型:浏览器的width属性不是内容的宽度，而是内容、内边距和边框的宽度总和。解决这个问题现在最好的方法是回避这个问题，也就是不要给元素添加具有指定宽度的内边距，但是尝试将内边距或外边距添加到元素的父元素或子元素。（@todo box-sizing？？）
- 外边距叠加：最终的外边距等于两个发生叠加的外边距的高度中的较大者。只有普通文档流中块框的垂直外边距才会叠加。行内框，浮动框，绝对定位框不会叠加。
2.定位概述
（1）可视化格式模型
- 3种基本的定位机制：普通流、浮动、绝对定位
- 块级框：垂直距离由垂直外边距计算出来
- 行内框：
- 调整水平间距：padding-left/right、border、margin
- 垂直：宽高对行内无影响，修改行高（line-hight）
- display
（2）相对定位
（3）绝对定位：不占据空间 z-index（叠放次序） ‘子绝父相’
（4）固定定位：IE6以及更低版本不支持，有很多bug，可用JS重现这个效果（@todo 如何重现）
3.浮动
脱离文档流，不占据空间
（1）行框和清理
- clear清除浮动 : clear：left/right/both/none:对元素的清理实际上为前面的浮动元素留出了垂直空间；
因为浮动元素不占据空间，所以容器元素不包围他们。添加一个进行清理的空元素可以迫使容器元素包围浮动元素；（缺点：添加额外的代码） - 给浮动元素父级设置高度:只适合高度固定额布局；
- 父级同时浮动（需要给父级同级元素添加浮动）（缺点：浮动变得复杂）
- 给父级添加overflow:hidden/auto清除浮动方法（缺点：某些情况下会产生滚动条或者截断内容）
- after伪类 清除浮动（现在主流方法，推荐使用）
.clear:after{
content:".";
height:0;
visbility:hidden;
display:block;
clear:both;
}
第四章 背景图像效果
1.背景图像基础
2.圆角框
- border-radius
- border-image:允许指定一个图像作为元素的边框 “九公分缩放”
3.投影
- 创建投影图像-使用负的外边距偏移这个图像。在IE6中需要添加position:relative
- 使用相对定位来偏移图像：
position:relative;
left:-5px;
top:-5px;
- Box-shadow:CSS3新增，方便
3.不透明度
- RGBa
- PNG透明度
- 在IE6中支持PNG透明度的方法：使用专有的AlphaImageLoader过滤器。把下列这行代码放在IE6专用的样式表中(使用起来有点麻烦)
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src="'/image/shadow2.png',sizingMethod='crop")
- IE PNG fix:img,div{behavior:url(iepngfix.htc)}
