CSS中line-height继承问题
在CSS中，line-height属性用于设置多行元素的空间量，比如文本。对于块级元素，它指定元素行盒的最小高度。对于非替代的inline元素，它用于计算行盒的高度。
语法
/* Keyword value */
line-height: normal;
/* Unitless values: use this number multiplied
by the element's font size */
line-height: 3.5;
/* <length> values */
line-height: 3em;
/* <percentage> values */
line-height: 34%;
/* Global values */
line-height: inherit;
line-height: initial;
line-height: unset;
取值
normal取决于用户端。桌面浏览器（包括Firefox）使用默认值，约为1.2，这取决于元素的font-family。
<数字>该属性的应用值是这个无单位数字<数字>乘以该元素的字体大小。计算值与指定值相同。大多数情况下，这是设置line-height的推荐方法，不会在继承时产生不确定的结果。
<长度>指定<长度>用于计算line box的高度。查看<长度> 获取可能的单位。以em为单位的值可能会产生不确定的结果。
<百分比>与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。百分比值可能会带来不确定的结果。
经过测试，上述的几种形式中，带单位的取值会被子元素继承，只有不带单位（如1.2）或者normal不会被继承。
测试代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {
font-size: 14px;
}
.p1 {
line-height: 21px;
}
.p2 {
line-height: 1.5;
}
.p3 {
line-height: 150%;
}
.p4 {
line-height: 1.5em;
}
.p5 {
line-height: normal;
}
h1 {
width: 8em;
overflow-wrap: break-word;
font-size: 28px;
}
</style>
</head>
<body>
<div class="p1">
<h1>pxpxpxpxpxppxpxpxpxpxpxpxpxpxpxpxpxpxpxpxpxpxpxpxpxpxpxpx</h1>
</div>
<div class="p2">
<h1>UnitlessUnitlessUnitlessUnitlessUnitlessUnitlessUnitless</h1>
</div>
<div class="p3">
<h1>percentagepercentagepercentagepercentagepercentagepercentage</h1>
</div>
<div class="p4">
<h1>ememememememememememememememememememememememememememememememem</h1>
</div>
<div class="p5">
<h1>normalnormalnormalnormalnormalnormalnormalnormalnormalnormal</h1>
</div>
</body>
</html>
测试结果:
参考文献：
line-height
CSS中line-height继承问题的更多相关文章
- CSS中inherit指定继承的使用方法和auto的区别
CSS中的每个属性都有一个特定值"inherit",其含义是指定继承父元素的相应属性,使用inherit一方面在代码上能地表明要继承于父元素的样式属性,另一方面也使子元素继承了那些 ...
- CSS中层叠和继承的概念。
继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码: 1 2 3 4 5 6 7 8 9 <ht ...
- css中属性值继承小解
继承:html元素可以从父元素那里继承一部分css属性,即使当前元素没有定义该属性. 1.css可以和不可以继承的属性 不可继承的:display.margin.border.padding.back ...
- CSS中设置height:100%无效的解决方案
在网页设计中有时会设置某个DIV或者TABLE的高度自适应,即元素的高度充满父元素的高度.一般使用设置CSS height:100%来实现.但是当元素层级嵌套比较深的时候,设置该属性并不能得到应有的 ...
- CSS中的height与line-height的区别
<p class='text'>高与行高的区别</p> 那么我要想让这些字上下居中那么可以用宽度和行高控制 .text{ height:25px; line-height:25 ...
- css中 出现height为100%失效的原因及解决方案
我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用.这是由于:%是一个相对父元素计算得来 ...
- css中权重与继承
出处:http://blog.csdn.net/xf616510229/article/details/53613212
- CSS中文本继承情况
无继承性的属性 http://www.cnblogs.com/thislbq/p/5882105.html vertical-align: 垂直文本对齐 CSS中文本可以继承父级样式 体 ...
- css中的继承、层叠、样式优先级机制
一.继承与层叠:
- 盘点CSS中可以和不可以继承的属性
CSS中可以和不可以继承的属性 一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定 ...
随机推荐
- 运用Python计算Π的多少（大致计算）
计算Π 一.写代码的准备工作:用pip下载第三方库tqdm 1.打开cmd 2.输入pip install 你要安装的库(如 pip install tqdm) #pip一般是在安装pytho ...
- Oracle根据时间恢复已删除提交的数据
Oracle 根据数据库的时间戳恢复已删除提交的数据 1.选择一个时间点查看表中数据是否是自己想要的数据 Select * from 表名 as of timestamp to_timestamp(‘ ...
- mysql中用limit 进行分页有两种方式
代码示例:语句1: select * from student limit 9,4 语句2: slect * from student limit 4 offset 9 // 语句1和2均返回表stu ...
- Ubuntu配置MYSQL远程连接
一.修改mysql权限 1.mysql -u root -p 回车输入密码 2.use mysql: 打开数据库 3.将host设置为%表示任何ip都能连接mysql,当然您也可以将hos ...
- Win10系列：C#应用控件进阶5
多线形 多线形和多边形类似,不同点在于多线形中最后一个点和第一个点不会默认被连接.在多线形的点集中,可以存在同一个开始点和终结点因而会定义成闭合图形.下面将演示如何使用Polyline控件绘制一个多线 ...
- MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践：Example1.5 Adding a raster layer
MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.5 Adding a raster layer 一.前言 MapServer不仅支持 ...
- Oracle查询语句导致CPU使用率过高问题处理
解决此问题的关键在于如何找到造成CPU使用率过高的SQL语句.步骤如下: 1.使用Process Explorer工具查看到Oracle进程,双击Oracle进程,在弹出的属性窗口的Threads选项 ...
- css制作倒三角
布局div,并命名为id="dropdown",在style使用border属性对div进行控制 #dropdown{ width:0px; height:0px; border- ...
- 通读SCRUM实战指南教材，提出5个问题。
问题一:为什么要制定优先级的排定和调整? 创建一个排好优先级的项目组合并讲重点放在转移团队上,如果做得对,可以消除在项目数量超过团队能力 的情况下过于常见的多任务处理. 问题二:为什么我们要做文档? ...
- 破解某PDF转换器产品
本文章纯属出于作者自己对技术的探索,绝不用于商业用途(虽然网上已经能够下载到注册机了) 软件功能就不多说了,PDF转换成WORD格式,对于学生党来说也算是神器了吧,那么我们今天就用自己的办法来获得这款 ...