基线、底线、顶线与行高
line-height撑开了块元素的高度
<p>这是一段文字，这里有个<em>em</em> 标签。</p>
如上面一段普普通通的代码，却包含了4种盒子：
-
“内容区域”（content area），是一种围绕文字看不见的盒子,可理解为选中文字蓝色背景区域，如下图。“内容区域”的大小与 font-size 大小相关；
-
“内联盒子”（inline-boxes），“内联盒子”不会让内容成块显示，而是排成一行。如果文字外部含 inline 水平的标签（如span，a，em等），则属于“内联盒子”，如下图紫框处。如果是光秃秃的文字，则属于“匿名内联盒子”，如下图红框处；
-
“行框盒子”（line boxes），每一行就是一个“行框盒子”，每个“行框盒子”又是由一个一个“内联盒子”组成，“行框盒子”如下图红框处；
-
标签所在的“包含盒子”（containing box），如下图红框处。此盒子由一行一行的“行框盒子”组成
<!DOCTYPE html>
<head>
<style>
em{
line-height:50px;
}
</style>
<title></title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<p>这是一段文字，这里有个<em>em</em> 标签。</p>
</html>
当给em标签设置一个line-height时，外围的p元素会的高度也会变成50px；所以元素的高度并不是由文字撑开的，实际上是由 line-height 决定的。这时可能会提出疑问：line-height明明是两基线距离，单行文字哪来的行高呢？关于这个问题，我们需要了解的是：
- 行高由于其继承性，影响无处不在，即使单行文本也不例外。
- 行高只是幕后黑手，高度的表现不是行高，而是内容区域和行间距。
而内容区域 + 行间距 = 行高，正好高度表现等于行高，给人感觉上是行高起了作用。
- 内容区域高度只与字号以及字体有关，与 line-height 没有任何关系。
- 在simsun（宋体）字体下，内容区域高度等于文字大小值。
因此，在 simsun（宋体）字体下：
font-size + 行间距 = line-height
那行间距的就可以这样计算了：
font-size: 240px;
line-height: 360px;
则行间距 = 360px - 240px = 120px;
行间距上下拆分，就有了“半行间距”
半行间距 = (行高 - 内容区域高度)/2
行高决定内联盒子高度，但高度表现是由行间距和内容区域表现的；行间距墙头草，可大可小（甚至负值），它的作用就是保证内联盒子高度正好等于行高。
line-height的水平垂直特性
<!DOCTYPE html>
<head>
<style>
p{
border:1px solid red;
}
em{
line-height:50px;
}
</style>
<title></title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<p>这是一段文字，这里有个<em>em</em> 标签。</p>
</html>
line-height与图片
<!DOCTYPE html>
<head>
<style>
p{
border:1px solid red;
background-color:yellowgreen;
}
</style>
<title></title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<p><img src="1.png"></p>
</html>
不难看出图片有一个间隙，对于一个block元素，后面就像有一个文本节点在里面一样，看不到，获取不到,称之为隐匿文本节点。内联块级元素img默认对齐方式是基线baseline，要与文本对齐，文本存在line-height，所以存在间隙。那么应该怎么去掉这个间隙呢？
- 图片块状化 ——无基线对齐
img{
display: block;
}
- 图片底线对齐
p{
vertical-align: bottom;
}
- 行高足够小——基线上移
p{
line-height: 0px;
}
- 消除隐匿文本字体大小
p{
font-size: 0px;
}
扫一扫
2286
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
