CSS行高设置

行高（line-height）是指一行文字占据的垂直空间，包括文字高度、上下行间距。CSS中可以用line-height属性来设置行高。

一、行高的值

行高的值可以是以下几种：

/* 数字 */
line-height: 1.5;

/* 百分比 */
line-height: 150%;

/* 长度 */
line-height: 24px;

/* 具体的字体名 */
line-height: 1.5em;
    

数字指的是行高与字体大小的比值，例如1.5表示行高是字体大小的1.5倍。百分比同理，长度则是指定一个具体的数值，em则是相对于当前元素的字体大小来确定行高。

二、行高的继承

行高可以继承，同样也可以被重写。

body {
  line-height: 1.5;
}

h1 {
  /* 继承了body的行高 */
}

p {
  line-height: 1.2;
}
    

以上代码中h1继承了body的行高，而p标签则被重写了。

三、行高的居中

使用行高可以方便地实现文字内容的垂直居中。

<div class="container">
  <p class="text">垂直居中</p>
</div>
    

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background: #eee;
}

.text {
  line-height: 200px;
}
    

以上代码中，父元素设置了弹性布局，并将垂直和水平轴都居中对齐，然后子元素设置了与父元素高度相等的行高，从而达到了垂直居中的效果。

四、行高的注意事项

使用行高时，需要注意以下几点：

• 行高会影响元素的高度，如果同时设置了height和line-height，需要注意二者的关系；
• 对于内联元素，当设置行高等于或小于字体大小时，文字会上下居中对齐；
• 不同浏览器对于行高的计算方式不同，需要注意浏览器兼容性问题。

总结

行高是CSS中的一个常见概念，可以用来设置文字的垂直居中、行距等效果。行高的值可以是数字、百分比、长度、em等等，而且行高可以继承。在使用行高时需要注意一些细节，如高度的计算和浏览器兼容性问题。