【精通CSS：高级web标准解决方案】#chap 03# 可视化盒模型概述

盒模型简述                    

1. 如果给元素添加background，那么背景会应用于由content和padding组成的区域。
2. 空元素的上边距和下边距会发生塌陷，一系列空元素的边距也会发生塌陷；
3. 只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框、或绝对定位框之间的外边距不会叠加。

定位概述                    

• 可视化格式模型：

1. CSS中有三种基本的定位机制：基本流、浮动、绝对定位。
2.  因此，修改行内框尺寸的唯一方法是修改行高或者水平边框、内边距或外边距。
3. 匿名块框：将一些文字添加到框元素的头部，会被当做块元素对待;
4.  无法直接对匿名块或行框 应用样式 。

• 相对定位：

            1. 在使用相对定位时，无论是否移动，元素仍然占据原来的空间。因此，移动元素会导致它的覆盖其他框；

• 绝对定位：

1. 绝对定位使元素位置与文档流无关，因此不占据空间。
2. 普通文档流中其他元素的布局就像绝对定位的元素不存在时一样；
3. 绝对定位的元素的位置是相对于距离它的最近的那个已定位的祖先元素确定的；
4. 如果没有已定位的祖先元素，那么它的的位置是相对于初始包含块的。

bug 潜在的坑：

• 固定定位：

1.  固定定位的包含块是视口（viewport）; 
2.  IE6不支持固定定位；

• 浮动：

1. 浮动的框可以左右移动，直到它的的外边缘碰到包含框或另一个浮动框的边缘。
2. 浮动框不在文档普通流中，普通流视浮动框不存在 ；
3. 创建浮动框使文本可以围绕图像；
4. 要想阻止选框围绕在浮动框的外边，需要对包含这些选框的元素应用clear属性；
5. 清理元素时，浏览器 在元素顶上添加足够的外边框，使元素的顶边缘垂直下降到浮动框正面；
6. 浮动元素脱离了文档流，不影响周围的元素。但是，对元素进行清理实际上为前面的浮动元素留出了垂直空间。

• 清除浮动：

1. 添加一个清理浮动的元素; 
2. 选择浮动容器div; 
3. 使用pseudo-class,;  www.positioniseverything.net/easyclearing.html中