万恶的bug之源

• height：100px 固定高度
• width: 100% 宽度百分之百

1高度是由什么决定的
- 内联元素
- 块级元素

div高度由其内部文档流元素的高度总和决定

什么是文档流：文档内元素流动方向
内联元素从左往右流动，流动遇到阻碍就换行流动
如果是块级元素，每个块级元素独占一行，从上往下流

span 高度

baseline
line-hight

image.png

给span里面的字体设置font-size为100px，这里的fontsize是指字母最高的高度到最低的高度之间有100px, 但是span的高度并不是100px,span的高度将会是浏览器提供的推荐行高line-height,比如说，此时line-height为fontsize的1.4倍，那么span行高就为140px，所以说，line-height是根据fontsize决定的。

多个span元素排列在一起的时候，是按照基线baseline排列的

脱离文档流

1.position：fixed
（有bug会导致原本占一行块级元素收缩）
2.position：absolute

2.line-box 是啥
inline box是我们平时所说的具有inline属性的标签（span、b、a、i等等）

3.box 是啥（盒模型）
box-sizing:content-box 和 box-sizing:border-box

4.宽度是有什么决定的
content+margin+padding+border

5.position 的 5 个取值
static fixed relative absolute sticky

image.png
image.png

6.z-index
层级 通过z-index来确定高低