CSS文档流技巧是什么

块级元素默认会充满整个屏幕，具有自适应性，而内联元素默认则是水平排列。

你可以想象为块级元素就想是水流一样充满容器，而内联元素就是漂浮在水里按照从左到右排列的物体。

在项目中会经常碰到 display：block 这个属性。但注意，它与块级元素不是同一个东西。display：table，也属于块级元素。

失去流动性

到这里你应该明确了流的特性，其实很多人都知道「文档流」这个概念，但却没有好好的去利用，从而给自己增加了一些不必要的麻烦。

比如以前我会写出这样的 CSS：

span {
    display: block;
    width: 100%;
}

如果明白流的特性的话，其实 width: 100%; 这个属性是多余的，因为块级元素在流布局中默认是自动充满容器的。

你是否也中枪写过这种 CSS ？欢迎在评论区说出你的问题。

但如果仅仅只是多了一条属性，其实也就是增加了一行代码显得不那么简洁而已，可事情总是没有那么简单。

一旦你给元素添加了宽度（width）属性，它就会失去流动性，即便是它的值为 100%，也是会失去。

对，你没有看错，只要有了宽度属性，它就会失去了它最牛逼的流动性。这样就变的毫无价值。

比如开头中导航案例，如果给导航加入一些边距。就会出现不好的效果。

.nav {
  display: block;
  padding: 10px; //添加的边距
  width: 100%;
  border-bottom: 1px solid #000;
  color: #fff;
}

而如果我们把宽度属性去掉，就会得到完美的展示效果。

.nav {
  display: block;
  padding: 10px;
  border-bottom: 1px solid #000;
  color: #fff;
}

可能你之前并没有意识到，加入宽度属性带来的危害。

但当你看到这篇文章之后，你应该警惕宽度给流动性带来的危害，尽量少用宽度，甚至是「无宽度」。

在此之前我相信很多伙伴在项目汇总遇到过超出宽度的情况，但很少有人去探究，所以很多人都会发挥他特有的计算能力，然后写出如下代码。

.nav {
  display: block;
  padding: 10px;
  width: 180px; // 200px - 10px*2
  border-bottom: 1px solid #000;
  color: #fff;
}

貌似也实现了该有的功能，不过这种缺点我们显而易见，就是太过固定，任何一点的改动都需要你重新计算。

可能有人会说，兄die，我的计算能力很惊人，你管的着吗，好吧这，波算我输。

那为什么加了宽度属性会超出，而不加宽度属性就可以了呢？

原来是因为，当元素不设置宽度属性时或者是 width：auto ，元素的margin、border、padding 可以自动分配空间。

一旦，我们设置了固定的宽度属性，就算是100%，它就会根据 CSS 的盒模型进行计算。从而失去了自动分配空间的流动性。

至于如何计算的细节，因为盒模型的不同，所以宽度的作用就不同，它包含的东西也就不一样。具体不在多说。

兄die，这时候知道「无宽度」有多牛逼了吧。

因为这里我提到了盒模型，你会想到把上面的案例，改变下盒模型不就行了吗？比如我们这么做：

.nav {
  display: block;
  padding: 10px;
  width: 100%;
  border-bottom: 1px solid #000;
  box-sizing: border-box; //改变盒模型
  color: #fff;
}

确实在这个案例中是可以这么用的，但是如果想实现案例一的水平有间距排列问题，就有点力不从心了。

由于 CSS 盒模型，是不计算 margin 的，水平排列可以很容易实现，但是想要有相同间距，就比较难以实现。

这个时候你就可以尝试利用流的特性，来很好的实现这个方案。

宽度分离

这时候我们可以利用流的特性，进行宽度分离。

    
        内容