CSS⾏⾼
⾏⾼的构成及⾏⾼的作⽤：⾏⾼是由line box的⾼度组成的，line box的⾼度是inline box的⾼度决定的。
⾏⾼不决定元素的⾼度，但是它决定元素所占的空间⼤⼩，所以，经常会看到设置了line-height的元素有留
⽩的情况。
inline元素组成了inline box。⼀⾏的元素组成了line box。line box的⾼度是由inline box的⾼度决定的。注意：inline box的⾼度不是元素的⾼度，inline box的⾼度由元素的line-
height属性决定，⽽元素的⾼度是由⼀些⾃⾝的属性决定的。所以在例⼦中我们可以看到，span的height是17px，是由字体⼤⼩决定的，⽽它的inline box的⾼度是30px，所以
span元素占的空间是30px，但是它只渲染了17px，其他的px会等分地在span元素的上下部分，这就是使⽤line-height做垂直居中布局的原理。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>inline</title>
<style>
span {
background: red;
}
/* ⾏⾼不决定元素本⾝的⾼度 */
/
* 这⾥的span元素的⾼度是由字体的⼤⼩决定的，所以这⾥的span元素的height是17px */
/* 但是⾏⾼决定了包含元素的⽗级元素的⾼度，所以看到包含span元素的div的⾼度是30px，是由最⼤的c3的line-height决定的。 */
/* 另外，如果界⾯⽐较⼩，可以看到div的⾼度会变化，如果包含了2⾏，那么是由每⼀⾏的line-height最⼤的相加决定的 */
/* 如果⽗级加了height，那么⽗级的height就不由内部元素的line-height决定了 */
.c1 {
line-height: 20px;
}
.c2 {
line-height: 8px;
}
.c3 {
line-height: 30px;
}
.c5 {
line-height: 28px;
}
</style>
</head>
<body>
<div>
<!-- 有4个span和⼀个⽂本，都是inline元素，inline元素组成的box叫作line box -->
<span class="c1">inline box xfg中⽂</span>
<span class="c2">inline box</span>
<span class="c3">inline box</span> inline box
<span class="c5">inline box</span>
</div>
</body>
</html>
View Code
这⾥的⼏张图⽚说明当⽗级容器有了height之后，⼦元素的line-height就对⽗级的元素的height没有影响了。
⽗级容器设定了height之后，⼦元素的位置是在上部。虽然⼦元素的height只有18px，但是，⼦元素所占的空间是由line-height决定的，所以它还是占了30px的地⽅，这也就是
为什么上⾯有空⽩的原因。
CSS⾏⾼的相关现象及解决⽅案：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>line-height</title>
<style>
html span 居中/* 这⾥的span元素没有设置line-height，所以span元素的⾼度决定了inline box的⾼度（span元素的⾼
度不是inline box的⾼度，它是稍微加了⼀点，所以才会有base line与bottom line的区别），span元素的⾼度是由字体决定的。
/* 所以这个line box的⾼度是由cc3的字体24px决定的。 */
.c1 {
background-color: grey;
}
/* inline元素在⼀⾏中，默认是按照base line（元素⾃⾝的⾼度）对齐的。如果想要居中对齐，可以设置vertical-align为middle，就可以改变单独元素的对齐⽅式。 */
/* vertical-align可以设置px，默认是以baseline做调整的 */
/* base line是元素⾃⾝的⾼度的下⾯，bottom是inline-box的⾼度的下⾯，所以都会有空⽩的情况，只不过很⼩。 */
.cc1 {
font-size: 12px;
vertical-align: baseline; /* 默认是base line */
vertical-align: middle; /* 设置为middle可以实现居中对齐 */
}
.cc2 {
font-size: 18px;
vertical-align: baseline; /* 默认是base line */
vertical-align: middle; /* 设置为middle可以实现居中对齐 */
}
.cc3 {
font-size: 24px;
vertical-align: baseline; /* 默认是base line */
vertical-align: middle; /* 设置为middle可以实现居中对齐 */
}
</style>
</head>
<body>
<div >
<!-- 背景的bule是根据span元素⾃⾝的⾼度渲染的，span元素是个inline元素，它的⾼度由字体⼤⼩决定，所以blue渲染了20px -->
<!-- 另外，line-height是60px，⽐span元素本⾝的⾼度要⾼，所以多于的40px会等分在span元素的上下。 -->
<!-- 如果这时候包含span元素的div没有设置height，那么div的height就由span的inline-box的⾼度决定，
也就是60px，也就形成了垂直居中的样⼦ -->
<!-- 要想使⽤line-height的⽅式实现垂直居中，⽗级元素不能设置height -->
<span >
居中xfg                     
</span></div>
<div class="c1">
<span class="cc1">第⼀段</span>
<span class="cc2">第⼆段</span>
<span class="cc3">第三段</span>
</div>
<div >
<span>⽂字</span>
<!-- 这⾥的img（inline block元素，默认是按照inline排布的，inline排布是默认基于baseline对齐的）在下⾯有⼀个空⽩，这是因为img元素⾃⾝的⾼度是由图⽚决定的，inline box的⾼度会在⾃⾝⾼度上加⼀点 --> <!-- 默认情况下，元素是按照base line也就是⾃⾝⾼度的底线对齐的，所以就看起来有空⽩了。 -->
<!-- 如果想去掉这个空⽩，可以把img图⽚的对齐⽅式改为vertical-align 为 bottom -->
<img src="./demo3-4-2.png"/>
<!-- 还有另外⼀种去掉空⽩的⽅式，默认img是按照inline排布，只有inline排布才有vertical-align，才有inline-box决定line-box的说法，如果我们把img的display改为block也就不会有空隙的问题了。 -->
</div>
</body>
</html>
View Code

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