[CSS]CSS Mastery 可视化格式模型
一． 可视化格式模型
1.1 框模型
框模型是CSS基石之一，它指定元素如何显示以及如何相互交互。页面上的每个元素都被看成一个矩形框，这个框由元素的内容、填充、边框和空白边组成。
填充出现在内容区域的周围。如果在元素上添加背景，则背景会应用于由内容和填充组成的区域。添加边框会在填充的区域外边加一条线。边框外边是空白边，空白边是透明的，一般用来控制元素之间的间隔。
填充、边框、空白边都是可选的，默认值为零。许多样式将由用户代理样式表设置空白边和填充。
*{
margin: 0;
Pardding: 0;
}
覆盖浏览器样式
CSS中，height和width指的是内容区域的高度和宽度，增加填充、边框和空白边不会影响内容区域的尺寸，但会增加元素框的总尺寸。
IE5.x和IE6中，width属性不是内容的宽度，而是内容、填充和边框的宽度总和。
1.2 空白边叠加
当两个垂直空白边相遇时，它们将形成一个空白边，这个空白边的高度等于发生叠加的两个空白边中高度较大者。
当一个元素出现在另一个元素的上面时，第一个元素的底空白边与第二个元素的顶空白边发生叠加。
当一个元素包含在另一个元素中时（假设没有填充和边框将空白边隔开），它们的顶和/或底空白边也发生叠加。
假设有一个空元素，它有空白边，但是没有填充和边框，这种情况下，它的顶空白边和底空白边就碰到了一起，就会发生叠加。如果这个空白边碰到了另外的空白边，它还会发生叠加。
只有普通文件流中的块状的垂直空白边才会发生叠加。行内框、浮动框和绝对定位框之间的空白边不会发生叠加。
1.3 视觉格式化模型
p、h1、 div常成为块级元素，这些元素显示一块内容，即“块框”。与之相反，strong和span等元素称为行内元素，它们内容显示在行中，即“行内框”。
可以使用display属性改变生成的框的类型。通过将display属性设置为block，可以让行内元素（锚等）表现的像块级元素一样。通过将display属性设置为none，让生成的元素根本没有框，这样，这个框及内容就不再显示，不占用文档的空间。
CSS中有三种基本的定位机制：普通流、浮动和绝对定位。除非特别指定，否则所有框都在普通流中定位。
块级框从上到下一个接一个的排列，框之间的垂直距离由框的垂直空白边计算出来。
行内框在一行中水平布置，可以使用水平填充、边框和空白边调整它们的水平间距，但是，垂直填充、边框和空白边不影响行内框的高度。由一行形成的水平框称为行框，行框的高度总是足以容纳它包含的所有行内框。设置行高可以增加这个框的高度。
大多数的框由显示定义的元素形成。但，将有些文本添加到一个块级元素（div等）的开头时，即使没有把这些文本定义成段落，它也会被当作段落对待，这个框称为无名块框。
Some text.
1.4 相对定位
通过设置垂直和水平位置，可以使元素“相对于”它的起点进行移动。使用相对定位时，无论是否移动，元素仍然占据原来的空间，移动元素会导致它覆盖其他框。
相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
1.5 绝对定位
绝对定位与相对定位相反，它使元素的位置与文档流无关，因此不占据空间。普通文档流中其他元素的布局就像绝对定位的元素不存在一样。
绝对定位的元素的位置相对于最近的已定位祖先元素，如元素没有已定位祖先元素，那么它的位置相对于最初的包含块。
因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。可以通过设置z-index来控制这些框的堆放次序。Z-index越高，框在堆中的位置越高。
因为绝对定位的框与文档流无关，所以它们不影响普通流中的框。如果增大绝对定位的框，周围的框不会重新定位，因此，尺寸的任何改变都会导致绝对定位的框产生重叠。
固定定位是绝对定位的一个子类别，差异在于固定元素的包含块是视口。这使我们能创建总是出现在窗口中相同位置的浮动元素。
1.6 浮动
浮动的框可以左右移动，知道它的外边缘碰到包含矿或者另一个浮动框的边缘。因为浮动框不在文档的普通流中，所以文档的普通流中的块框表现的就像浮动框不存在一样。
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。要想阻止行框围绕在浮动框的外边，需要对这个框应用clear: left/right/both/none 它表示框的那边不应该挨着浮动框。
- Mar
- 29
- 2007
- 糖伴西红柿
- Z-Blog
- Comments (2)
- Tags: CSS —
