块内布局规则
1.块内 height 为 auto 时,高度为块内行框累加高和其内普通流块高之和
2.块内 height 为非 auto 时,块高为 height 指定高度
行内布局(块内行框布局)规则
- 每一个行内元素会产生一个行内框
- 行内框会在行框内横向排列
- line-height 特性值指定了每个行内非替换元素生成的行内框的确切高度;行内替换元素的高度由 ‘height’ 特性值决定;
- 文字在行内框中垂直排列,上下空隙用半差异填补;如果字号大于行内框则文字从上下方向上溢出行内框,并可能渗入到其他行框内(行框是永远不会重叠的);
- ‘vertical-align’ 特性值指定了每个行内框的垂直对齐方式;
- 行框的顶边界是这一系列垂直对齐的行内框最高的顶边框,底边界是最低的底边框。
- 行框的高度是顶边界到底边界的距离。
line-height 是决定行框高度的因素之一,而height只决定包含块高度。
https://www.zhihu.com/question/20222907
https://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/