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:规定 ...
随机推荐
- 关于HttpSession 和 Hibernate框架中 session异同点的简单解析
快速理解: HttpSession中的session是一个容器用来盛基于会话机制的信息. 比喻:我把钱放进银行的保险柜里. 解析:我的钱就是我的信息,ID等 银行的保险柜就是session容器. Hi ...
- 箭头函数里this理解
先来看代码: var obj1={ id:4, fn:function(){ var f=() => { console.log(this); //object,f()定义在obj1对象中,th ...
- lr-web services协议
1.web services协议简介 web services协议是建立可交互操作的分布式应用程序的新平台,它通过一系列标准和协议来保证程序之间的动态链接,其中最基本的协议包括soap,wsdl,ud ...
- java使用SimpleDateFormat实现字符串和日期的相互转换
public class TimeTwo { public static void main(String[] args) throws ParseException{ String s = &quo ...
- Python-接口自动化（六）
接口基础知识(六) (七)接口 1.接口:外部系统与本系统之间以及系统内部的各个子系统间,以约定标准提供的服务,包括对外提供的接口/对外提供的接口. 不同的请求协议:http webservice ...
- Data assimilation
REF: https://en.wikipedia.org/wiki/Data_assimilation Data assimilation is the process by which obser ...
- cocoaPods安装爬坑总结
1.移除现有Ruby默认源 $ gem sources --remove https://rubygems.org/ 2.使用新的源 $ gem sources -a https://ruby.t ...
- 201671010142 2017-2 《java第十二十三章学习感悟》
Swing编程第一步,需要导入Swing相关包,即javax.swing.*. 接下里需要设置界面外观风格,使用到UIManager类. 设置完外观之后一定要调用 SwingUtilities.upd ...
- C++之 类型定义语句--typedef
typedef的作用是给一个已经存在的数据类型起个别名. 使用的语法形式是:typedef 已有类型名 新类型名表;. 新类型名表中可以有多个标识符,它们之间用逗号分开,就是在一个typedef ...
- type-of-python作业-判断字符串是否属于回文需要忽略其中的标点、空格与大小写
type-of-python作业 作业练习:要想检查文本是否属于回文需要忽略其中的标点.空格与大小写.例如,"Rise to vote, sir."是一段回文文本,但是我们现有的程 ...