HTML和CSS进阶（1）：深刻line-height

时间 2019-11-18

标签 html css 进阶深刻 line height 栏目 HTML 繁體版

原文原文链接

在CSS中，咱们可使用line-height属性来控制文本的行高。不少书称line-height为行间距，其实这是很是不严谨的叫法。行高，顾名思义就是“一行的高度”，而行间距指的是“两行文本之间的距离”，二者是彻底不同的概念。这一节，咱们来深刻学习一下line-height属性。
1、 line-height的定义
在CSS中，line-height还有一个更加准确的定义：两行文字基线之间的距离。

一、顶线、中线、基线、底线css

基线？这是什么东西？听都没听过！咱们都用过英文簿，英文簿每一行都有4条线，这4条线分别是：（1）顶线；（2）中线；（3）基线；（4）底线。html

   在CSS中，每一行文字能够当作一个“行盒子”，而每个行盒子都有4条线：（1）顶线；（2）中线；（3）基线；（4）底线。没错，这4条线跟英文簿中的4条线是同样的道理。
   此外vertical-align属性中的top、middle、baseline、bottom这4个属性值分别对应的就是：顶线、中线、基线、底线。小伙伴们确定不由自主地惊叹一声：噢！原来是这样一回事！
   注意一下，基线并非行盒子中最下面的线，而是倒数第2条线。由此咱们很清楚地知道line-height究竟指的是什么。

二、行高、行距与半行距浏览器

（1）行高
   行高（即line-height），指的是“两行基线之间的垂直距离”，请看上图。
   有些小伙伴就会问了：为何W3C要这样去定义line-height呢？直接定义line-height为2条底线之间的距离岂不是更好理解么？规则这东西嘛，都是官方定义的，咱们只须要去遵循就好了。这就跟咱们过马路同样，不必纠结为何是“绿灯走红灯停”，而不是“红灯走绿灯停”。
（2）行距
   行距，指的是：上一行的底线到下一行的顶线的垂直距离。也就是两行文字之间的空隙。
（3）半行距
   半行距，很好理解，指的是行距的一半。
   为何要搞一个半行距出来呢？其实这就是为了引出在下面所提到的“行框（inline box）”。
  三、内容区与行框
（1）内容区
   内容区，指的是行盒子顶线到底线之间的垂直距离。
（2）行框
   行框，指的是两行文字“行半距分割线”之间的垂直距离。
2、深刻line-height
  一、height和line-height
   line-height有默认值，当没有定义line-height属性时，浏览器就会采用默认的line-height值。
一行文字的高度是由line-height决定，而不是由height决定的。例如在p标签中，一个p标签的文字能够有不少行，其中line-height定义的是一行文字的高度，而height定义的是整个段落的高度（p标签的高度）。
   在CSS中，咱们能够定义height和line-height这2个属性值相等，从而来实现单行文字的垂直居中。这是常常使用到的一个技巧，但愿你们记住。
   举例：

<!DOCTYPE html>

<head>

div

{

width:240px;

height:60px;

border:1px solid gray;

font-size:12px;

text-align:center;

}

#div1{line-height:20px;}

#div2{line-height:40px;}

#div3{line-height:60px;}

</style>

</head>

<body>

<div id="div1">height为50px，line-height为20px</div>

<div id="div2">height为50px，line-height为40px</div>

<div id="div3">height为50px，line-height为60px</div>

</body>

</html>

分析：
   为何定义height和line-height这2个属性值相等，就能够实现单行文字的垂直居中呢？从上面这个例子，咱们能够很直观而感性地认知。
  二、line-height取值为百分比值、em值
   当line-height值为百分比值或者em值时，当前元素的行高是相对于“父元素”的font-size值来计算的。计算公式以下：

line-height = （父元素font-size）×（百分比）

line-height = （父元素font-size）×（em值）

举例：学习

<!DOCTYPE html>

<head>

body{font-size:30px;}

#outer-box

{

/*父元素行高：30px×150%=45px*/

line-height:150%;

background-color:Red;

color:White;

}

#inner-box

{

/*子元素行高：30px×150%=45px（继承父元素的line-height）*/

font-size:20px;

background-color:Purple;

color:White;

}

</style>

</head>

<body>

<div id="outer-box">这是父元素

<div id="inner-box">这是子元素</div>

</div>

</body>

</html>

分析：
在上面这段代码中，#outer-box的行高等于30px×1.5=45px。因为line-height具备继承性，当line-height取值为百分比时，会直接继承父元素的line-height（除非本身指定line-height）。