爱站程序员基地x
- 字母x的下边缘为基线（baseline）。
- 字母x的高度为x-height、ex（相对于字体和字号的单位）。
- 字母x的交叉点的位置为middle。
line-height
- em-box：1em等于当前的font-size，只和字号有关。
- 内容区域：内容区域的高度受字体和字号影响，当字体为宋体时内容区域和em-box时相等的。
- 行距：line-height – em-box，css中行距上下等分，所以行高可以使文字垂直居中；但中文里文字的x交叉点会下沉，所以是近似垂直居中。
- 容器垂直中点：该容器垂直方向的正中点位置。
- 文字垂直中点：x的交叉点（和容器垂直中点比会下沉一些）。
- 纯内联元素（inline）高度由行高决定。
- line-height默认值为normal（和字体有关，字体不同值不同，大概为1.多）。
- line-height单位：数值1.5（相对于字号font-size）、百分比150%（相对于font-size）、长度值20px，2em（相对于font-size）。子元素继承的都是最终的计算后值。
- line-height作用于每个行框盒子上。
- line-height的大值特性：父级元素的高度由子元素line-height的最大值决定。
- 继承的权重最低。
- font-size单位：150%（相对于父元素的font-size），其他的如line-height、width等%都是相对于自己（当前元素）的font-size。
- 使用display：inline-block生成除了幽灵空白节点之外的独立的行框盒子，用于重置行高。
- 多行文字居中：inline元素就有一行，形状不规则，可以折行，可以和其他元素在一行，行高由大的那一个元素决定；背景色跟着content走。但inline-block元素可以有多行，就有多个幽灵空白节点；形状为规则的方形，当一行放不下时，会整体下移，当由于空白节点宽度为0不占位置，所以文字有上移了。
多行文字居中示例：
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>*{margin: 0;}.div1 {border: 1px solid;background: #ff0;margin: 20px;text-align: center;width: 100px;height: 100px;font-family: \'simsun\';line-height: 100px;}.div1>.inner{background: #fff;line-height: 20px;/* display: inline-block; *//* vertical-align: middle; */}.div1>.inner::first-line{background: chartreuse;}</style></head><body><div class=\"div1\"><span class=\"inner\">测试文字1测试文字1</span></div></body></html>
1. 高度由行高决定示例：
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>*{margin: 0;}.div1 {border: 1px solid;line-height: 50px;font-size: 0;background: #ff0;}.div2{border: 1px solid;font-size: 20px;line-height: 0;margin-top: 30px;}</style></head><body><div class=\"div1\">测试文字1</div><div class=\"div2\">测试文字2</div></body></html>
2. line-height对内联元素的影响：
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>*{margin: 0;}.div1 {border: 1px solid;background: #ff0;text-align: center;}.div1>span{background: #fff;font-family: \'simsun\';line-height: 50px;}</style></head><body><div class=\"div1\"><span>测试文字1</span></div></body></html>
宋体时：行距 = line-height – font-size，文字上下的黄色不分大小
其他字体时：
3. 内联元素 – 设计图和实际距离，文字间距对比示例：
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>*{margin: 0;}.div1 {border: 1px solid;background: #ff0;margin-top: 20px;text-align: center;}.div1>span{background: #fff;font-family: \'simsun\';line-height: 2;}</style></head><body><div class=\"div1\"><span>测试文字1</span></div><div class=\"div1\"><span>测试文字2</span></div></body></html>
- 设计图标注：两个文字上下边缘的距离
- 实际间距：两个黄色框之间的距离，即设计图标注距离 – 行距（当上下两个文字字体大小相等时，否则就要分开设置上面文字的margin-bottom和下面文字的margin-top）
当line-height：1时，标注距离等于实际距离
- line-height对替换元素的影响
- line-height不能影响替换元素的高度。
- 内联盒子的每一行都有一个行框盒子，每个行框盒子前面都有一个“幽灵空白节点”（宽度为0，具有该元素的字体和行高属性，可以想象成一个x，该元素没有则继承父元素的）。
- line-height实际是改变了替换元素前面的幽灵空白节点的高度。
- line-height在其中决定了该行的最小高度。
- 替换元素：内容可以被替换的元素，替换元素是内联元素。
5.line-height对块级元素的影响
- line-height通过改变块级元素中内联元素的高度来改变块级元素高度。
- 所以不管是内联、内联替换、还是块级元素，line-height都是通过改变内联元素高度来改变其高度的。
这里有两个行框盒子。
6. line-height为不同值的显示：
行距 = line-height – font-size，line-height变小，行距会变小，上下的文字就会重叠 ；单行文字中宽度不够时文字会覆盖。
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>*{margin: 0;}.test{width: 100px;margin: 50px;background: aquamarine;}span{border: 1px solid;}.test1{line-height: 2;}.test2{line-height: 1;}.test3{line-height: 0.5;}.test4{line-height: 0;}</style></head><body><div class=\"test test1\"><span>lorem lorem</span><span>lorem lorem</span></div><div class=\"test test2\"><span>lorem lorem</span><span>lorem lorem</span></div><div class=\"test test3\"><span>lorem lorem</span><span>lorem lorem</span></div><div class=\"test test4\"><span>lorem lorem</span><span>lorem lorem</span></div></body></html>
- inline元素宽度不够时且line-height:0，后面的会覆盖前面的，由于是一行，border跟着内容走。
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>*{margin: 0;}.div1 {border: 1px solid;background: #ff0;width: 100px;height: 100px;font-family: \'simsun\';display: inline-block;}span{border: 1px solid;}.test{line-height: 0;margin: 50px;width: 100px;}</style></head><body><!-- <div class=\"div1\"><span class=\"inner\">测试文字1测试文字1</span></div><div class=\"div1\"><img src=\"http://via.placeholder.com/100.png\" alt=\"\"></div> --><div class=\"test\"><span>lorem lorem lorem</span></div></body></html>
vertical-align
- 文字等内联元素基线为x下边缘；图片等内联替换元素基线为元素即图片下边缘;inline-block元素，里面有内联元素或者overflow：visible时，基线为元素里面最后一行内联元素的基线，否则基线为margin底边缘。
- vertical-align只能作用于内联元素和display：tabel-cell的元素。
- vertical-align的%是相对于line-height的。line-height的%是相对于font-size的。
- line-height和vertical-align一般是一起起作用的。
- font-size、line-height、vertical-align、幽灵空白节点、内联元素要一起考虑。
- vertical-align的值：baseline、middle、top、bottom、text-top、text-bottom、sup、super、%、em、px
- vertical-align：top：元素顶部和当前行框盒子定图对齐。
- vertical-align：text-top：父级内容区域和盒子顶部对齐。
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>*{margin: 0;}div{font-size: 30px;}span{background: #ff0;}</style></head><body><div><img src=\"http://via.placeholder.com/100.png\" alt=\"\"><span>x测试</span></div></body></html>
inline-block元素对齐方式示例：
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>*{margin: 0;}.div1 {border: 1px solid;background: #ff0;width: 100px;height: 100px;font-family: \'simsun\';display: inline-block;}</style></head><body><div class=\"div1\"><span class=\"inner\">测试文字1测试文字1</span></div><div class=\"div1\"></div></body></html>
