基线：实在英文字母中用到的一个概念，我们刚学英语的时使用的那个英语本子每行有四条线，其中底部第二条线就是基线，是a,c,z,x等字母的底边线。下图的红色线即为基线。
行高：也就是line-height，指文本行基线间的垂直距离。
行距：是指一行底线到下一行顶线的垂直距离。
半行距：行距的一半。半行距 = (行高 - 字号) / 2。CSS 中的margin-top不是从文字的顶线算起，而是从顶线半行距的上方开始算起。同理，margin-bottom是从底线半行距的下方开始算起。
x-height:x字高，字母的基本高度，基线baseline和主线mean line之间的距离。
font-size：设置文字大小。顶线和底线的距离。
四种“box”：
1.行内框：(inline boxes):不会成块显示，并排显示的boxes，如：span、a、em等标签以及匿名inline boxes(包含没标签的裸露文字)。
2.行框：（line-boxes）：块内的内容渲染的每一行。在不限制高度的情况下，line boxes的行数，由 block 的宽度及内容决定。一行内有多个行内框，一个一个的inline boxes组成了line boxes，行框是包含一行内行内框最高点和最低点。它的高度，由行内最大line-height决定。
3.包含框（containing box）：每一个块（block），它包含line boxes，line boxes的高度垂直堆叠形成了containing box的高度。
4.行内容区：一种围绕文字看不见的box。大小与font-size大小相关。一般选择文本后，有背景颜色的就是内容区了。
line-height：不会直接影响块元素，只是应用到块级元素的内联内容时才会由影响。在块级元素上声明line-height会为该块级元素的内容设置一个最小行框高度。
值：
- normal：默认值。
- number： number为当前font-size的倍数。推荐方法，不会在继承时产生不确定的结果。
- length：固定的行间距，与
font-size无关，不会随着font-size做相应比例的缩放,会被后代元素继承 。 - %：当前字体尺寸的百分比行间距。
- inherit：从父元素继承 line-height 属性的值。
继承：line-height是可以继承的，父元素不同的行高单位影响子元素的继承。
- line-height:15px;子元素：font-size:30px;——如果默认字体为16px；父元素行高15px；子元素继承15px行高
- line-height:1.5em;子元素：font-size：30px；——如果默认字体为16px；父元素行高1.5em；子元素继承16px*1.5=24px行高
- line-height：150%；子元素：font-size：30px；——如果默认字体为16px；父元素行高150%；子元素行高：16px*150%=24px；
- line-height：1.5；子元素：font-size：30px；——如果默认字体为16px；父元素行高1.5；子元素行高为：30px*1.5=45px；
一个空的div高度 不是 被文字撑开的，而是line-height！在 inline box模型中，有个line boxes的工作就是包裹每行文字。当一个没有设置 height属性的div的高度 就是由 一个一个line boxes的高度堆积而成 的。
---------------------------------------------------------------------------------------------------------------------------------
vertical-align:内联级元素 垂直方向上 的布局 。使用于display值 为 inline、inline-block、table-cell的元素。
值：
- baseline：父元素基线 。
- middle：元素 中线与父元素的基线加上父元素x-height的一半对齐(近似垂直居中)。
- top:最高元素顶端对齐。
- bottom：最低元素的顶端对齐。
- text-top：元素顶端与父元素字体顶端对齐。（字体很重要）
- text-bottom：元素顶端与父元素字体的底端对齐(字体很重要)
- sub：垂直对齐文本的下标
- super：垂直对齐文本的上标
- length：元素基线对齐到父元素的基线之上给定的长度。
- %：与length类似，给定的值是百分比，该百分比是line-height属性的百分比，可以是负数。
- inherit：继承父元素的vertical-align属性。
常见问题与解决方法：
1、图片下方的空隙
方法：
①让vertical-align失效。让display为block；
②vertical-align设置top、bottom、middle。
③line-height设置足够小或为0；
④font-size设为0。font-size间接控制了line-height，本质上是改变了line-height的值
⑤img设置浮动或者绝对定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.block{
background-color: #57570c;
/*方法一*/
line-height: 0;
/*方法 二*/
/*font-size: 0;*/
}
img{
/*方法三*/
/*display: block;*/
/*方法四*/
/*vertical-align: middle;*/
}
</style>
</head>
<body>
<div class="block">
<img width="200" src="./下载.jpg">
</div>
</body>
</html>
2.vertical-align:middle没有绝对居中。
绝对居中：父元素的垂直中线、图标的垂直中线与字母X的中心点应该完全重合。
.block {
font-size: 100px;
line-height: 250px;
display: flex;
align-items: center;
}
.img{
vertical-align: middle;
} 
解决：
1.采用Flex布局中的align-items属性，使子元素和父元素 在垂直轴上居中。
2.设置font-size：0；此时content area高度是0，各种上面提到的线（基线、顶线、主线、底线等）都在高度为0的这条线上，绝对中心线和中线重合。
1025
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
