高度与文档流（1-2）

（1）div高度

文档流指的是文档内元素的流动方向，div高度由其内部文档流元素的高度总和决定，主要是从span标签和div标签方面回答什么是文档流。
1、<span>内联元素从左往右流，如果遇到宽度不够就另起一行继续流
2、<div>块集元素，每一个块都占一行，然后从上往下流

下面代码和效果很好体现了上面那两句话

代码图
效果图

（2）span高度
在了解span由什么决定之前，先认识一下字体在四线谱上写法和结构。通过下图我们知道无论是汉字还是英文，都是按照在基线位置对齐的。而字体建议行高line-height是自带的（虚线包括部分），每种字体的建议行高都会不一样。

字体结构解析

例子：

4.png
效果图

由图可知字体高度是100px，和我们设置一样大小，但是span高度不是100px而是140px,这是因为字体都自带建议行高，所以span高度是字体的建议行高，每种字体建议行高也是不一样的。一般情况下，字体大小比较低的情况下，我们自己写行高是多少就是多少，如果字体比较大的时候，那就导致行高不可控了。

注意点：
在css中div的高度由文档流决定，不要随意给他一个高度，一个确定的高度，有时候会导致出现bug。解决方案是可以通过padding来增加距离来解决。