这是我参与更文挑战的第 5 天，活动详情查看： 更文挑战

2021-06-05 总结 HTML5 CSS3 内联元素与流

重学CSS系列，细说内联元素与流

1. 关于内联元素line-height

1.1 内联元素的高度之本——line-height

内联元素的高度其实是由line-height控制的,其实内联盒子的高度也是它控制的，通常来说line-height是通过行距来实现的。

了解这个很重要的一点是，设计稿的设计师不是专业的开发人员，即便是开发人员也不知道这一点，那就是，如果不设置全局line-height为1的话，标注非常清晰的设计稿是没有考虑到行间距的，这导致的问题就是，这些标注的距离和我们使用的margin间距都是不一致的

如何解决当line-height不为一，margin的问题呢。这里就有一个"半行距"的概念~

例如：line-height是1.5,font-size为14px,那么半行间距的计算就是(14px*1.5 -14px)/2 = 3.5px,因此如果是标注在文字的上边距，则向下取整，如果是标注在文字的下边距，则向上取整。所以如果设计师的标注是在文字子形上边缘到图片下边缘间距为20px，那么实际的距离的margin-top应该是20-3=17px

1.2 line-height的垂直居中

做了这么久的开发，都知道只要设置height === line-height就能实现垂直居中，其实是有一定局限性的

如下面代码：

.test{
	height: 24px;
	line-height:24px;
	padding-bottom:10px;
}

此时内部元素就没法垂直居中

多行文本或者替换元素的垂直居中 要实现多行文本或者替换元素的垂直居中，就需要依赖vertical-align:middle;

.box{
    width: 200px;
    background-color: pink;
    line-height: 120px;
}
.box .content{
    display: inline-block;
    line-height: 20px;
    margin: 0 20px;
    vertical-align: middle;
}

<div class="box">
    <div class="content">万丈平地起高楼，楼价太高都很佛</div>
</div>

1.3 深入了解line-height的高度计算

1. 数值,例如line-height：1.5，其计算的值是当前的font-size大小和自己相乘，若font-size为14px，则line-height为1.5*24 = 21px，子元素line-height继承数值1.5
2. 百分比，例如line-height:150%，其规则和上面的数值相同，但是子元素line-height继承计算后的值，当font-size为14px，子元素line-height是21px
3. 长度值，直接计算，子元素line-height直接继承长度值

2. 细说vertical-align

2.1 基本属性值分类

1. 线类：baseline、top、middle、bottom(基线)
2. 文本类： text-top、text-bottom等
3. 上下标类：sup、super等
4. 数值百分比类：20px、20rem、20%等[如果自己实验会发现一个东西，vertical-align:baseline和vertical-align:0是一样的，负值偏下，正值偏上,如果数值是百分比，那么其计算是根据line-height计算的]

2.2 vertical-align作用范围

开发的时候，实现垂直居中，经常遇到为什么设置了vertical-align:middle但是不起作用，这是因为它是有作用范围的，范围如下：

1. 应用在内联元素
2. display为table-cell
3. 注意浮动和绝对定位，这两可以使得元素失去内联性，让元素块状化

2.3 解决img标签的间隙： 幽灵空白节点(第二节提过，在提一次)

1. 只有元素是行内元素或行内块元素，vertical-align这个属性才生效。所以我们想让vertical-align失效，那么就让img变成块级元素—设置display属性值为block
2. 设置vertical-align的值不使用baseline，使用其他的比如 bottom top middle等等都可以
3. 这个缝隙是文字的大小改变的，所有我们可以对文字设置font-size为0 前提是这个行框不能出现文字
4. 改变文字的高度也是可以解决间隙的问题，将高度设置为0即可，但是文字的高度也可以由line-height决定,所以设置line-height为0也可以解决

3. 总结

关于这节就这么多，其他很多点开发都用不到，而且有更好的解决方式，所以没必要把时间花太多在这个上面，将了一些开发中常常遇到的就好