css超过两⾏显⽰为..._css：line-height的定义和经典使⽤
在开发中，会经常给展⽰为⼀⾏的⽂字垂直居中，处理的⽅法也很简单：就给⽂字的font-size和height等同就可以了（下图）。那么这么做合理吗，原理是什么。⽽知道了原理，我们可以有哪些优秀实践，下⾯将⼀⼀回答。
⼀，基本特性
1，line-height作⽤于内联元素
内联元素的⾼度由固定⾼度和不固定⾼度组成。不固定的⾼度就是“⾏距”，line-height之所以起作⽤，就是通过⾏距来实现的。
⾏距：业界的共识是：
⾏距
⾏距 = line-height - em-box。CSS语⾔就是 ⾏距 = line-height - font-size. 半⾏距就是⾏距的⼀半。margin属性怎么用
line-height如何通过改变⾏距实现⽂字排版？
1. line-height==2 ，半⾏距==font-size/2，两⾏⽂字中间的间隙差不多⼀个⽂字尺⼨⼤⼩；
2. line-height ==1, 半⾏距==0，也就是两⾏⽂字会紧密依偎在⼀起；
3. line-height == 0.5，⾏距<0，虽然line-height 不⽀持负值，但是⾏距可以为负值，此时，两⾏⽂字就是重叠在⼀起
line-height作⽤于⾏内元素岁⽉静好，⼀⽚安逸
2 . line-height作⽤于替换元素和块级元素
line-height可以影响替换元素（如图⽚的⾼度）吗？答案是，不可以！
对于块级元素，line-height 对其本⾝是没有任何作⽤的，我们平时改变line-height，块级元素的⾼度跟着变化实际上是通过改变块级元素⾥⾯内联级别元素占据的⾼度实现的。
图⽂混排，多⾏⽂本垂直居中，内联元素看上⾯两⾏描述，觉得也没什么，但实际操作起来却完全不
是这样。下⾯讨论⼏个经典应⽤： 图⽂混排，多⾏⽂本垂直居中，内联元素的line-height的⼤值特性。
⼆，经典应⽤
1。内联元素的line-height的⼤值特性解析：
⼀个⼦元素⾏⾼是20px，⽗元素96px，另⼀个⽗元素⾏⾼20px，⼦元素20px假设⽂字只有⼀⾏，那么.box⾼度都是96px。（见下图和相关代码）
<div class="box box1">
<span>span: line-height:20px</span>
</div>
<div class="box box2">
<span>span: line-height:20px</span>
</div>
.box {
width: 280px;
margin: 1em auto;
outline: 1px solid #beceeb;
background: #f0f3f9;
}
.box1 {
line-height: 96px;
}
.box1 span {
line-height: 20px;
background: pink;
}
.box2 {
line-height: 20px;
}
.
box2 span {
line-height: 96px;
background: yellow;
}
⼤数原则的原因解析：
这⾥的span是⼀个内联元素，因此⾃⾝是⼀个内联盒⼦。⽽因为有“内联盒⼦”在，就⼀定会有“⾏框盒⼦”。然后，重点来了，在每个“⾏框盒⼦”前⾯有⼀个宽度为0 的具有该元素的字体和⾏⾼属性的看不见的“幽灵空⽩节点strut”。所以上⾯的两种情况等价为：
<div class="box">
字符<span>内容...</span>
</div>
这下就好理解了，
当设置.box : line-height:96px 时，“字符”⾼度96px；
当设置span ： line-height:20px 时，span line-height为96px，
⽽⾏框盒⼦的⾼度是由⾼度最⾼的那个“内联盒⼦”决定的，这就是.box 元素⾼度永远都是最⼤的那个line-height的原因。
⽽知道了这个原因，也就知道了怎么去避免幽灵空⽩点：，例如，设置<span>元素display:inline-block，这时给span设置line-height：20px 就可以⽣效了。
2。多⾏⽂字垂直居中
想让多⾏⽂字垂直居中怎么做？内外两个盒⼦，⽤margin，绝对定位等等，⼀般都这么做。这⾥可以通过实践line-height来做。看下⾯代码
<div class="box3">
<span>linedd dddd ee dddd  ffff ffee dde dddx</span>
</div>
.
box3 {
width: 280px;
line-height: 120px;
background-color: #f0f3f9;
margin: auto;
}
.box3 span {
display: inline-block;
line-height: 20px;
text-align: left;
vertical-align: middle;
}
效果如下：
这⾥主要是⽤了通过设置display:inline-block来避免“strut”⽣效的特性。在⽂本换⾏时，下⼀⾏的没有strut因此可以按照⾏⾼排列。如果置之不理，效果就是下⾯这样。
// 挖坑后⾯垂直对齐完了再填

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。