文档流有俩个比较重要的概念元素：inline元素、block元素，与之相对应的标签就是span、div。（还有一个是 inline-block 是前面俩个的结合）。
俩个元素的区别？ inline元素默认是水平排列。 而block元素默认会充满整个屏幕。你可以理解为inline元素就像是装着水的袋子（这个袋子的宽度会随着水的多少而发生变化）。block元素则像是一个装着水的瓶子（这个瓶子的宽度默认是整个屏幕。不管你瓶子中的水有多少，都会占满整个屏幕）。
所以要记住的是这种代表文档流的元素默认宽度不是100%，而是width：auto，它们的margin、border、padding可以自动分配空间
因此建议不要写width：100%。为什么不建议呢？那是因为一旦你给元素添加了宽度属性，它就会失去文档流。即使是width:100% ，也是会失去的。一旦我们设置了固定的宽度，它就会根据CSS的盒模型进行计算，便失去了文档流的特点：自动分配空间的流动性。
根据上段的理解，你可以知道它们的宽度是这样规定的：
- inline元素的宽度为内部inline元素宽度和（不能有block元素），不能用width指定
- block默认自动计算宽度，可用width指定
- inline-block元素结合前两者的特点，可用width
而高度的话，水就比较深了，这里不做过多的介绍，你可以直接记住下面的规则：
- inline 高度是由 line-height 间接确定，跟height无关
- block 高度是由内部文档流元素决定（因为脱离文档流的元素不算），可以设置height
- inline-block 跟 block 类似，可以设置height
哪些元素可以脱离文档流呢（不占据空间）?
- 设置了 float
- 设置了 position:absolute/fixed
【异：relative相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 相对定位在元素脱离标准流后，其后元素不会补齐，仍占据原来的位置】
