7.1 文档流

优质

小牛编辑

126浏览

2023-12-01

HTML文档是一个动态的文档

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

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

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

流动性

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

width: 100%
元素块将占据整个可用宽度
word wrap
如果元素块的内容超过一行的宽度，将自动转换成多行显示
height: auto
元素块的高度将自动适应其内容

块元素会自动填满可用宽度，而其高度会自动根据内容做相应的调整。这个元素演示了当可用宽度发生变化时，块元素是如何做出调整的。这个元素按照有序性排在前一个元素的下面，当前一个元素高度发生改变时，它会被挤下来。 #result-fluidity{max-width: 800px;} #result-fluidity div{ background: coral; padding: 20px;} #result-fluidity div:first-child{ background: mediumaquamarine; animation: expand 3s alternate infinite both;} @keyframes expand{ 0% { width: 100%;} 100%{ min-width: 100px; width: 50%;} }

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属性来改变默认行为：

height 和 width 可以改变元素的流动性（fluidity），使其具有固定尺寸（或形状：流体无形，固体有形）。
float 将破坏一个元素及其周边元素的行为。
position absolute 和 fixed 将把元素从文档流中移除。
z-index 可以改变元素的 层叠性。