CSS 1.css介绍 css指的是层叠样式表（cascading style sheets） 官方文档：https://www.w3school.com.cn/css/index.asp为什么需要c
HTML和CSS高级(1):深入的行高
顺晟科技
2022-09-13 13:49:41
50
在CSS中，我们可以使用line-height属性来控制文本的行高。很多书称line-height为行间距，其实这是非常不严谨的叫法。行高，顾名思义就是“一行的高度”，而行间距指的是“两行文本之间的距离”，两者是完全不一样的概念。这一节，我们来深入学习一下line-height属性。
一、 line-height的定义
在CSS中，line-height还有一个更加准确的定义：两行文字基线之间的距离。
此外vertical-align属性中的top、middle、baseline、bottom这4个属性值分别对应的就是：顶线、中线、基线、底线。小伙伴们肯定情不自禁地惊叹一声：噢！原来是这样一回事！
注意一下，基线并不是行盒子中最下面的线，而是倒数第2条线。由此我们很清楚地知道line-height究竟指的是什么。
（1）行高
行高（即line-height），指的是“两行基线之间的垂直距离”，请看上图。
有些小伙伴就会问了：为什么W3C要这样去定义line-height呢？直接定义line-height为2条底线之间的距离岂不是更好理解么？规则这东西嘛，都是官方定义的，我们只需要去遵循就行了。这就跟我们过马路一样，没必要纠结为什么是“绿灯走红灯停”，而不是“红灯走绿灯停”。
（2）行距
行距，指的是：上一行的底线到下一行的顶线的垂直距离。也就是两行文字之间的空隙。
（3）半行距
半行距，很好理解，指的是行距的一半。
为什么要搞一个半行距出来呢？其实这就是为了引出在下面所提到的“行框（inline box）”。
3、内容区与行框
（1）内容区
内容区，指的是行盒子顶线到底线之间的垂直距离。
（2）行框
行框，指的是两行文字“行半距分割线”之间的垂直距离。
二、深入line-height
1、height和line-height
line-height有默认值，当没有定义line-height属性时，浏览器就会采用默认的line-height值。
一行文字的高度是由line-height决定，而不是由height决定的。例如在p标签中，一个p标签的文字可以有很多行，其中line-height定义的是一行文字的高度，而height定义的是整个段落的高度（p标签的高度）。
在CSS中，我们可以定义height和line-height这2个属性值相等，从而来实现单行文字的垂直居中。这是经常使用到的一个技巧，希望大家记住。
举例：
为什么定义height和line-height这2个属性值相等，就可以实现单行文字的垂直居中呢？从上面这个例子，我们可以很直观而感性地认知。
2、line-height取值为百分比值、em值
当line-height值为百分比值或者em值时，当前元素的行高是相对于“父元素”的font-size值来计算的。计算公式如下：line-height = （父元素font-size）×（百分比）
line-height = （父元素font-size）×（em值）
在上面这段代码中，#outer-box的行高等于30px×1.5=45px。由于line-height具有继承性，当line-height取值为百分比时，会直接继承父元素的line-height（除非自己指定line-height）。
一、 line-height的定义
在CSS中，line-height还有一个更加准确的定义：两行文字基线之间的距离。
1、顶线、中线、基线、底线
基线？这是什么东西？听都没听过！我们都用过英文簿，英文簿每一行都有4条线，这4条线分别是：（1）顶线；（2）中线；（3）基线；（4）底线。
在CSS中，每一行文字可以看成一个“行盒子”，而每一个行盒子都有4条线：（1）顶线；（2）中线；（3）基线；（4）底线。没错，这4条线跟英文簿中的4条线是一样的道理。此外vertical-align属性中的top、middle、baseline、bottom这4个属性值分别对应的就是：顶线、中线、基线、底线。小伙伴们肯定情不自禁地惊叹一声：噢！原来是这样一回事！
注意一下，基线并不是行盒子中最下面的线，而是倒数第2条线。由此我们很清楚地知道line-height究竟指的是什么。
2、行高、行距与半行距
（1）行高
行高（即line-height），指的是“两行基线之间的垂直距离”，请看上图。
有些小伙伴就会问了：为什么W3C要这样去定义line-height呢？直接定义line-height为2条底线之间的距离岂不是更好理解么？规则这东西嘛，都是官方定义的，我们只需要去遵循就行了。这就跟我们过马路一样，没必要纠结为什么是“绿灯走红灯停”，而不是“红灯走绿灯停”。
（2）行距
行距，指的是：上一行的底线到下一行的顶线的垂直距离。也就是两行文字之间的空隙。
（3）半行距
半行距，很好理解，指的是行距的一半。
为什么要搞一个半行距出来呢？其实这就是为了引出在下面所提到的“行框（inline box）”。
3、内容区与行框
（1）内容区
内容区，指的是行盒子顶线到底线之间的垂直距离。
（2）行框
行框，指的是两行文字“行半距分割线”之间的垂直距离。
二、深入line-height
1、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>
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> 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个属性值相等，就可以实现单行文字的垂直居中呢？从上面这个例子，我们可以很直观而感性地认知。
2、line-height取值为百分比值、em值
当line-height值为百分比值或者em值时，当前元素的行高是相对于“父元素”的font-size值来计算的。计算公式如下：line-height = （父元素font-size）×（百分比）
line-height = （父元素font-size）×（em值）
举例：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> 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）。
相关文章
-
09
2022-11
-
09
2022-11
-
09
2022-11
-
09
2022-11
-
19
2022-10
-
19
2022-10
推荐阅读
随机推荐
- CSS 3D翻转卡片动画
- 应用操作系统模块
- 日常CSS_仿苹果平滑开关按钮
- 实现jq CSS赛马等效果的轮盘抽奖
- 优化web前端性能3360HTML、CSS、JS和服务器端优化
- css样式-透明度 div位置
- 水平滚动的flex布局最右边的margin-right失败
- CSS相似元素3360before和:after使用详细信息
- CSS如何给文本添加下划线样式？
- html+css使图片在页面中循环滚动
- 如何实现纯CSS背景图片半透明内容不透明-opacity属性已正确使用
- CSS字体图标技术
- 12款精美的免费 CSS 网页模板下载
- 【网络前端【HTML5CSS3】01-前端简介
- 常规html CSS导航栏
- CSS格式和排版
- Textillate.js – 实现动感的 CSS3 文本动画的简单插件
- CSS多行文本垂直居中
- CSS 下拉菜单：如何制作下拉菜单
- HTML+CSS简单实现导航栏二级下拉菜单