CSS Master读书笔记：框模型

来源：互联网发布：国信弘盛怎么样知乎编辑：程序博客网时间：2024/06/06 03:14

IE5.X和IE6在怪异模式中使用自己的非标准框模型。这些浏览器的width属性是内容、填充和边框的宽度总和。

目前最好的解决方案是回避这个问题，也就是，不给元素添加具有指定宽度的填充，而是尝试将填充或空白边添加到元素的父元素或子元素中。

空白边叠加

在实践中队网页进行布局时，当两个垂直空白边相遇时，他们将形成一个空白边。这个空白边的高度等于两个发生叠加的空白边的高度中较大者。

当一个元素包含在另一个元素中时（假设没有填充或边框将空白边分隔开），它们的顶和/或底空白边也发生叠加

空白边甚至可以与本身发生叠加。假设一个空元素，它有空白边，但是没有边框或填充。这种情况下，顶空白边与底空白边就碰到一起，会发生叠加。

如果这个空白边碰到另一个元素的空白边，它还会发生叠加。

只有普通文档流中块框的垂直空白边才会发生空白边叠加。行内框、浮动框或绝对定位框之间的空白边不会叠加。

定位概述

p、h1或div等元素常常成为块级元素。显示为一块内容，即块框。

strong和span等元素成为行内元素。内容显示在行内，即行内框。

可以使用display属性改变生成德框的类型。

通过将display属性设置为block，可以让行内元素（比如锚）表现得像块级元素一样。

将display属性设置为none，让生成德元素没有框，及其内容不再显示，不占用文档中的空间。

CSS中有三种基本的定位机制：普通流、浮动和绝对定位。除非专门制定，否则所有框都在普通流中定位。普通流中的元素框的位置由元素在html中的位置决定。

块级框从上到下一个接一个地排列；框之间的垂直距离由框的垂直空白边计算出来。

行内框在一行中水平布置。可以使用水平填充、边框和空白边调整它们的水平间距。但是，垂直填充、边框和空白边不影响行内框的高度。

由一行形成的水平框称为行框，行框的高度总是足以容纳它包含的所有行内框。但是，设置行高可以增加这个框的高度。

将一些文本添加到一个块级元素（如div）的开头时。即使没有把这些文本定义为段落，也会被当做段落对待。

<div>

Some text

</div>

这个框被称为无名块框，因为它不与专门定义的元素相关联。

假设有一个包含三行文本的段落。每行文本形成一个无名行框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方。

相对定位

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

相对定位实际上被看做普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。普通文档流中其他元素的布局就像绝对定位的元素不存在时一样。

绝对定位的元素的位置相对于最近的已定位祖先元素，那么它的位置相对于最初的包含块。根据用户代理的不同，最初的包含块可能是画布或HTML教程元素。

因为绝对定位的框与文档流无关，所以他们可以覆盖页面上的其他元素。可以通过z-index属性来控制这些框的堆放次序。z-index的值越高，位置就越高。

绝对定位的元素的位置相对于最近的已定位祖先元素，使我们可以做出一些效果。例如，假设希望让一个文本段落对准一个大框的右下角。只需对包含框进行相对定位，然后相对于这个框对段落进行绝对定位：

#branding {

width: 700px;

height: 100px;

position: relative;

}

#branding .tel {

position: absolute;

right: 500px;

bottom: 10px;

text-align: right;

}

</div>

在IE5.5和IE6中有一个bug，如果试图相对于相对定位的框的右边或底部设置绝对定位的框的位置，那么需要确保相对定位的框已经设置了尺寸。如果没有，那么IE会相对于画布定位这个框。

上例中如果不设置position： relative，IE8.0依然会相对于画布定位tel的框。

固定定位是绝对定位的一个子类别，差异在于固定元素的包含块是视口。能够创建总是出现在窗口中相同位置的浮动元素。

浮动

浮动框不在文档的普通流中，可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘。

浮动和flear

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。实际上，创建浮动框使文本可以围绕图像。

要想阻止行框围绕在浮动框的外边，需要对这个行框应用clear（值：left、right、both或none），表示框的哪些边不挨着浮动框。clear在被清理元素的顶空白边上面添加足够的空间，使元素的顶边缘垂直下降到浮动框下面。为前门的浮动元素留出垂直空间。

让周围的元素为浮动元素留出空间。解决了绝对定位的问题，即框的垂直高度改变不影响周围元素，会破坏设计的问题。

假设有一个图片，希望让它浮动到一个文本块的左边。希望将这个图片和文本包含在另一个具有背景颜色和边框的元素中：

#news {

background-color: gray;

border: solid 1px black;

}

#news img {

float: left;

}

#news p {

float: right;

}

</div>

但是，因为浮动文本脱离了文档流，所以包围图片和文本的div不占据空间。

我们需要添加clear元素使，容器包括他们。

.clear {

clear: both;

}

</div>

一些人适用CSS生成德内容或JavaScript对浮动元素进行清理。并不直接向标记中添加进行清理的元素，而是将它动态地添加到页面中。对于这两种方法要指定进行清理的元素该出现在哪里，常常要添加一个类名

</div>

在使用CSS方法时，结合适用：after伪类和内容声明在指定的现有内容的末尾添加新的内容。不希望新内容占据垂直空间或者在页面上显示，将height设置为0，将visibility设置为hidden。因为被清理的元素在它们的顶空白边上添加空间，所以生产的内容需要将它的display属性设置为block。

.clear :after {

content: ".";

height: 0;

visibility: hidden;

display: block;

clear: both;

}

这个方法在大多数现代浏览器中是有效的，但是在IE6和更低版本中不起作用。

最常用的解决方案涉及适用Holly招数，迫使IE5-6应用“布局”和不正确的清理浮动元素。

.clear {display: inline-block;}

/*Holly Hack Targets IE Win only*/

* html .clear {height:1%;}

.clear {display: block;}

/*End Holly Hack*/