《精通CSS高级WEB标准解决方案》第二章：可视化格式模型

我在www.c09.com 发表了这个笔记并上传了原著的PDF，今天有空，转到BLOG上来。

第二章、可视化格式模型
2.1 框模型概述

• 页面上的每个模型都被看成矩形框，由元素的内容、填充padding、边框border和空白边margin组成;
• 背景覆盖内容和填充padding区域;
• 空白边margin是透明的;
• 默认状态下padding、border和margin值都是0;
• width和height指的是内容区域的宽度和高度，整个元素框的总宽度是内容+填充+边框+空白边；
• 空白边margin可以是负值，并且在很多技巧中都会用到margin的负值；
• 在IE5和IE6中，width是内容+填充+边框的总宽度，所以，不要给定义了宽度的元素设置填充padding,而是把padding和margin添加到它的子元素或父元素中；
• 两个垂直的margin相遇时，叠加成的margin高度为较大的那个，比如：

[code]
margin-bottom:30px;//上方元素的下边
margin-top:20px;//下方元素的上边
[/code]得到的margin高度会是30px。

• 当一个元素包含另一个元素时，他们的顶部和底部空白边也会叠加；
• 普通文档流中块框的垂直空白边才会叠加，行内框、浮动框和绝对定位框之间的空白边不会被叠加;

2.2 定位概述

• 
  
• p、h1、div等称为块级元素(block)；
• strong、span等称为行内元素(inline),即行内框;
• display可以改变框的类型；
• CSS中有三种定位机制：普通流、浮动和绝对定位，默认为普通流；
• 行内框(inline)可以用水平填充padding、边框和空白边margin来调整它们的水平间距，但垂直填充、边框和空白边不影响行内框的高度；
• 行内框的总高度总是刚好包容它所包含的所有行内框，但设置行高可以增加这个框的高度；
• 没有进行显示定义的框称为无名框，无法直接对无名框应用格式;
• 相对定位就是相对目前所在位置根据left和top值进行移动；
• 绝对定位与文档流无关，绝对定位的元素位置相对于最近的已定位的祖先元素，如果没有已经定位的祖先元素，那么它将相对于最初的包含块定位，比如BODY或HTML元素；
• 绝对定位可以覆盖页面上的其它元素，通过设置z-index属性来决定这些框的堆放次序；
• 固定定位是绝对定位的一个子类别，它使一个元素始终出现在窗口相同位置，IE6不支持固定定位；
• 浮动定位使框脱离文档流，向左边或右边移动直到碰到包含框，如果包含框宽度不够，则余下的浮动框会向下浮动；
• 浮动框旁边的行内框会缩短，从而形成环绕效果，如果不想产生这种效果，可以使用clear来决定哪个边不挨着浮动框；
• 对元素进行清理clear,实际上是为前面的浮动框留出了垂直空间