css布局定位系列：（1）基本知识及正常流（Normal Flow）定位

 

英文原文地址：http://brainjar.com/css/positioning/default.asp

翻译：零度，转载请注明本文英文原文出处以及本文地址。由于我英文水平有限，有不懂的地方还请阅读原文，欢迎交流！

查看W3C CSS 标准 推荐.

CSS 定位

理解怎么布局页面内容有助于我们更好的利用css布局。这篇文章给了CSS2 规范里的一些方法和规则。它同时指出了一些我们需要留神的东西。

尽管规范适用于任何网页展示设备，这篇文章只集中考虑它是怎么在浏览器里工作的。为了简单，我们忽略了许多细节。想要更精确的参考，请阅读标准文档。

记住一个特定的浏览器不支持某些特性或者不会正确执行这个特性是很重要的。同时，某些浏览器除了支持标准，它们还有会有少许的偏离，这些差异是需要我们注意的。

盒子模型

为了理解CSS定位，你必须首先理解盒子模型。为了显示，文档里的每一个元素被认为是一个矩形盒子，这个盒子有一个内容域，内容域被padding、border和margin包围.下面的插图展示了各个不同的部分。

content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content

    margin     border     padding     content

Margin总是透明的。Border可以有不同的风格。为一个元素设置背景样式将被应用到border里的padding和内容域。为了能让你看得更清晰，上面的padding域有一个很浅的灰暗背景。

当这篇文章涉及到盒子的时候，术语"margin edge"、"border edge"(margin边、bodder边)等指的是和上面盒子相似的外边缘！

marging、border和padding都是可选的（可有可无的），为了计算位置和大小，如果没有特别说明，它们有一个默认值零。如果需要，每一条可见边都可以有不同的宽度（这里指border的四条边，因为只有border可见，译者注）。Margin甚至可以有负值！

每一个盒子的宽度和高度等于margin外沿的宽度和高度。请注意盒子的大小并不总是内容域的大小（可以是）。

一个盒子可以包含任何数目的其他盒子，新增一个具有层次的盒子和插入一个页面元素等价。浏览器窗口是所有层次的根元素。

盒子类型

盒子有两种基本类型：block（块级）和inline（行内，国内有时也译为内联元素，意思一样）。块级盒子由P、DIV或者TABLE等元素生成。行内盒子由B、I或者SPAN等标记以及内容文本和图片组成。

盒子的类型可以通过diplay属性改变。比如给一个行内元素设定一个block值就可以使这个元素具有块级元素的特征。注意，如果你把display的属性设为none,这个盒子是不会产生的，它不会被浏览器显示，同样的，这个盒子里的任何元素都会被浏览器忽略，不管它们是否被声明为其他的属性！

一些特殊的元素比如list和table还有其他的盒类型。然而，如果是为了定位，这些元素的其他盒类型也会当作block或者inline看待，这里就不考虑了。

包含块

对一个块级盒里的所有元素来说，这个块级盒可以看成它们的包含块。例如以下代码：

<div>
This is the first sentence.
<p>This is the second sentence.</p>
</div>

这个div元素就为第一行文本和下面的P元素建立了一个包含块。P元素又为它里头的文本建立了另外一个包含块。

注意到上面例子中的第一行文本产生了一个行类盒是很有意思的，在这里认为下面的块级盒围绕在它的周围。像这样的匿名块级盒被用来简化定位处理。结果就是这样的一个块级盒将只能包含行内盒，或者只能包含块级盒，甚至有些这样的块级盒只能围绕在行内盒的周围。

包含块用来计算它里头元素盒的位置以及范围。比如，如果一个元素的样式是{width:50%}，它的宽度将被设置为包含块的一半。

对于任何一个没有绝对定位的元素，它的包含块被认为是父级块中内容边沿与它最接近的块级盒。如果不存在这样的一个父级盒，那么它的块级盒就是浏览器窗口。我们分开考虑绝对定位元素。

定位模式

CSS2里有3种定位模式：normal,float和absolute。每一种类型都有自己独立的规则。每一个盒子只能使用这三种类型中的一种，不同盒子根据它们自己的定位和浮动样式设置选择不同的模型。

正常流（Normal Flow）

正常流是默认的定位方式。任何没有具体指定{position:absolute}或者{position:fixed}属性以及没有被浮动的元素都将默认获得此属性。

在这种方式里，块级盒在它们的包含块里一个一个垂直延伸，行内盒在它们的包含块里从左至右的水平排布。

你应该注意到在正常流里垂直边距（vertical margin）是重叠的。也就是说，上下两个块级盒之间的边距由它们之中边距较大的元素决定，而不是他们的和！下面图示说明了这一点。

content content content content content content content content content

content content content content content content content content content content content content content content content content content content

当然，在水平方向上，块级元素的边距从来不会重叠。

如果需要，行内块是可以被折断的，当宽度受到限制的时候，它会自动移动到下一行。这可能会产生一些难看的效果如果行内块有边框的话。看下面的效果：

content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content

按照标准，上面两条边线的相交只应该显示三条边。没有人说标准是完美的。

(未完待续~~~~·)