我在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,实际上是为前面的浮动框留出了垂直空间