css笔记 - 张鑫旭css课程笔记之 line-height 篇

line-height

line-height: 指两行文字基线之间的距离。

行高200px表示两行文字基线之间的距离是200px；

基线：baseline

字母x下边缘的位置

基线是任意线定义的根本（底线，中线，顶线，文本上边缘线，文本下边缘线等）

不同语言体系，基线位置不一样。

相同语言的不同字体，基线位置也不一样

行高让单行文本垂直居中

真的垂直居中了吗？

只有字体大小为0的时候，才能真正的垂直居中。

行内框盒子模型

内容区域(content area)

围绕文字看不见的盒子，其大小跟字体大小有关。范围大概就是选中单行文本后，你选中的区域了。

内联盒子(inline boxes)

• 内联盒子

就像span、a、em、图片按钮等这些inline水平的标签一样，内联盒子会排成一样显示。区域大小是文字内容的范围。

• 匿名内联盒子

内联盒子的一种，当纯文本没有内联标签环绕的时候，就是匿名内联盒子。

行框盒子(line boxes)

文字每一行就是一个行框盒子。 每个行框盒子又是由一个一个的内联盒子组成。

包含盒子(containint box)

每个包含盒子由一行一行的包含盒子组成。 就像一个block水平的元素

总结：

包含盒子
    行框盒子
        内联盒子+内容区域