Skip to main content

标准文档流

标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的 流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。

对于标准文档流，你只需要记住下面五点：

  • 微观现象
  • HTML 元素的等级分类，及其它们的表现行为
  • 使用 display 修改元素等级
  • 块元素垂直方向上的 margin 塌陷
  • 脱离标准文档流的条件

标准流的微观现象​

  • 空白折叠现象：不管你打几个空格和换行都会展示一个空格，排版会出现 5px 的空隙
  • 高矮不齐：行内元素统一以底边垂直对齐
  • 自动换行：排版若一行无法完成则换行接着排版

下面展示一下 空白折叠现象：

<div></div>
<div></div>
<div></div>
div {
  width: 100px;
  height: 100px;
  border: solid;
  display: inline-block;
}

凭直觉，这三个行内块盒子应该是水平紧挨着排列的，但实际上它们之间有一定的空隙：

pic.nm

这个空隙就是由换行造成的，消除换行就可以消除空袭：

<div></div><div></div><div></div>

pic.nm

标准流的元素等级分类​

块级元素​

块级元素又分为：

  1. 容器级块级元素，常见的有 div、ul、ol、li、form、table、header、footer、section、article、aside
  2. 文本级块级元素，常见的有 h1~h6、p

容器级块级元素 的特点如下：

  • 可以嵌套所有的 行内元素 和 块级元素
  • 可以设置宽高，如果不设置宽度，那么默认为 auto，可以理解为跟父容器宽度一致，如果不设置高度，默认也为 auto，由其内容撑开
  • 一定占据父容器一整行，就算 width 小于父容器宽度

文本级块级元素 唯一不同的就是，它们只能嵌套行内元素，无法嵌套块级元素，比如：

对于 div 来说，它可以嵌套一个 ul，ul 内部又可以嵌套一个 li

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  <ul/>
</div>

但是，对于 p 标签来说，如果在其内部嵌套一个 div：

<p>
  hello
  <div>123</div>
</p>

实际上在浏览器中会被解析为：

<p>hello</p>
<div>123</div>

这里请留意一下 p 和 div 内部文本，hello 两侧会有两个空格，这和我们之后谈到的微观现象有关。

行内元素​

行内元素又分为：

  • 普通行内元素，常见的有 span、a、strong、sub、sup、code
  • 行内替换元素，常见的有 input、textarea、select、button、img

普通行内元素 的特点如下：

  • 不能设置宽高，宽高由内容撑开
  • 不会占据父容器一整行
  • 垂直方向的 margin 和 padding 无效

行内替换元素，有的地方也称为行内块 (inline-block)，和 普通行内元素 不同的是，它们可以设置宽高，并且 margin 和 padding 完全有效。

dispaly 修改元素类型​

我们可以使用 dispaly 修改指定盒子的元素类型，其取值如下：

  • block，表示元素要以块级元素模式加载，具备块级特点
  • inline，表示元素要以行内元素模式加载，具备行内特点
  • inline-block，表示标签要以行内块模式加载，具备行内块(行内可替换元素)特点
  • none，表示标签及内部内容直接隐藏，让出原有标准流的位置

块元素垂直方向上的 margin 塌陷​

假如我们设置两个相邻的块元素，并且在垂直方向上设置了 margin：

div {
  width: 100px;
  height: 100px;
  border: solid;

  &:nth-child(1) {
    margin-bottom: 30px;
  }

  &:nth-child(2) {
    margin-top: 40px;
  }
}

根据之前学习的内容，这两个块元素之间的间距应该是 70px，但实际上只会取大的那个 margin，即 40px：

pic.ssm

注意

这个特性只适用于块元素(block)，就算是行内块(inline-block)也不行。

脱离标准文档流​

脱离标准文档流的方式只有下面两种：

  • 浮动
  • 定位

详情参考对应文章。

Reference​