基本概念
顶线、中线、基线、底线
基线(baseline),指的是一行字横排时下沿的基础线,基线并不是汉字的下端沿,而是英文字母x的下端沿
行高、行距
- 行高(line-height)
行高是指上下文本行的基线间的垂直距离,即图中两条红线间垂直距离。 - 行距(行高-字体size)
行距是指一行底线到下一行顶线的垂直距离
行内框盒子模型包含的四种盒子
- 内容区域(content area)是一种围绕文字看不见的盒子,内容区域的大小与font-size有关
底线和顶线包裹的区域,即下图深灰色背景区域
- 内联盒子(inline boxes) 每个行内元素会生成一个行内框,如果外部含inline水平的标签(span、a、em等),则属于“内联盒子”如果是光秃秃的文字,则属于“匿名内联盒子”
设定line-height时,行内框的高度不变,改变的是行距 - 行框盒子(line boxes) 每一行就是一个“行框盒子”,每个行框盒子“又是由一个个”内联盒子“组成
行框高度等于本行内所有元素中行内框最大的值
- 包含盒子(containing box)是包裹着上述三种box的box
- 包含盒子(containing box)是包裹着上述三种box的box