CSS 文档流与显示类型

什么是文档流

浏览器渲染页面时，会把网页里的元素按一套默认规则排队摆放，这套规则就叫文档流，也叫普通流。可以把文档流想象成文字处理器里的打字，内容一个接一个排下去，一行满了就换行。在文档流里，元素大体按从上到下、从左到右的顺序排列，具体怎么排，看元素的显示类型。

显示类型由 display 属性决定，它是整个布局的起点。学会判断一个元素是块级还是行内，后面学浮动、定位和 Flexbox 才会顺。

块级元素

div、p、h1 这些标签默认都是块级。块级元素有两个明显的性格，一是独占一行，二是宽度默认撑满父容器。

块级元素的宽高设置都有效，上下 margin 也能正常推开间距。

<style>
  .box {
    width: 200px;
    height: 100px;
    margin: 20px 0;
    background: #3498db;
  }
</style>
<div class="box">第一个盒子</div>
<div class="box">第二个盒子</div>

两个盒子各占一行，中间 20px 的间隔就是 margin 撑开的。

行内元素

span、a、em 这些标签默认是行内元素。它们像文字一样在一行里排，宽度由内容决定，一行挤不下才换行。给行内元素设置 width 和 height 是无效的，水平方向的 padding 和 margin 有效，垂直方向的则不影响布局，比如给链接加了上下 padding，视觉上字被撑远，但旁边的文字不会跟着挪。

<style>
  a {
    width: 100px;      /* 无效，行内元素宽度由内容决定 */
    padding: 10px;     /* 上下 padding 不占布局空间 */
  }
</style>
<p>这是一段<a href="#">带链接</a>的文字。</p>

注意样式里写了 100px 宽度，链接并不会变宽，它的实际宽度就是内容加水平方向的 padding。

行内块元素 inline-block

如果既想在一行里排，又想设宽高，可以用 inline-block，它把两种类型的好处都占了。

inline-block 最典型的两个场景，一个是导航栏按钮，一个是图片和文字对齐。

<style>
  .nav a {
    display: inline-block;
    width: 80px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: #2ecc71;
    color: #fff;
    text-decoration: none;
  }
</style>
<nav class="nav">
  <a href="#">首页</a>
  <a href="#">教程</a>
  <a href="#">关于</a>
</nav>

<style>
  .thumb {
    display: inline-block;
    width: 60px;
    height: 60px;
    vertical-align: middle;
  }
</style>
<span class="thumb">头像</span> 一段说明文字

display 的核心作用

display 决定盒子以什么方式生成和参与布局，常见值如下。

display 是不继承的属性，想让子元素改显示类型，得在子元素上单独设置。属性值继承的规则之前讲过，可回看 CSS 属性关键字。

display: none 与 visibility: hidden

两者都能让元素看不见，差别很大。display: none 把元素从渲染里彻底移除，位置让出来，后面的内容补上来，visibility: hidden 只是把元素藏起来，它原来的位置还在，像个透明的占位符。另外做动画时 visibility 可以过渡变化，display 不行，这点后面讲动画再展开。

小结

文档流是所有布局的地基，块级、行内、行内块三种显示类型各有性格。记住一条，width 和 height 对行内元素无效，这是新手最常踩的坑。下一篇讲浮动，看看怎么让元素”插队”。