7.2 文档流

浏览器的默认行为

HTML文档是一个动态的文档

即使没有应用任何的CSS,一个HTML文档依然遵循一些固有的规则:

  • 流动性(fluidity):内容如何适应浏览器大小
  • 有序性(ordering):元素呈现的顺序
  • 层叠性(stacking):如何处理元素之间位置重叠的情况

这种固有规则是顺理成章的。

流动性

所有的 block 块元素都是流动的,它们将自动调整布局来适应元素内容:

  • width: 100%
    元素块将占据整个可用宽度
  • word wrap
    如果元素块的内容超过一行的宽度,将自动转换成多行显示
  • height: auto
    元素块的高度将自动适应其内容
块元素会自动填满可用宽度,而其高度会自动根据内容做相应的调整。这个元素演示了当可用宽度发生变化时,块元素是如何做出调整的。
这个元素按照有序性排在前一个元素的下面,当前一个元素高度发生改变时,它会被挤下来。
  • block 元素的缺省宽度是 100%
  • 而它的高度就是内容的高度。

有序性(Ordering)

很自然的,HTML元素按照代码中的顺序来显示。先来先得。从上到下。

<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Fourth</p>
<p>Fifth</p>

First

Second

Third

Fourth

Fifth

层叠性(Stacking)

浏览器有3个维度

每个HTML元素都归属于一个假想中的层(layer)

层叠顺序依赖于元素是如何嵌套的:子元素呈现在父元素上面。

嵌套级别越深的子元素,越是位于堆栈的上面。

<div>
  这个父元素在后面
  <p>
    这个嵌套的子元素呈现在它的父元素的<strong>上面</strong></p>
</div>
这个父元素在后面

这个嵌套的子元素呈现在它的父元素的上面

改变文档流

HTML默认文档流是有效的,但远不能满足设计需求。

我们可以使用一些CSS属性来改变默认行为:

  • heightwidth 可以改变元素的流动性(fluidity),使其具有固定尺寸(或形状:流体无形,固体有形)。
  • float 将破坏一个元素及其周边元素的行为。
  • position absolutefixed 将把元素从文档流中移除
  • z-index 可以改变元素的 层叠性