CSS 文档流技巧

文档流

• 文档流：是引导网页中的元素排列和布局的，它默认的方向是从左向右，从上而下。
• 而「流」具有最大的一个特点就是自适应性。
• 文档流中有两个比较重要的概念：块级元素（block）、内联元素（inline），对应到最具代表性的元素就是<div>、<span>。
• 块级元素默认会充满整个屏幕，具有自适应性，而内联元素默认则是水平排列。
  你可以想象为块级元素就想是水流一样充满容器，而内联元素就是漂浮在水里按照从左到右排列的物体。

失去流动性

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

• 如果明白流的特性的话，其实 width: 100%; 这个属性是多余的，因为块级元素在流布局中默认是自动充满容器的。
• 一旦你给元素添加了宽度（width）属性，它就会失去流动性，即便是它的值为 100%，也是会失去。
• 尽量少用宽度，甚至是「无宽度」。

参考自：https://zhuanlan.zhihu.com/p/64190768