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:规定 ...
随机推荐
- sap快捷登录
利用程序SAPSHCUT.EXE 示例:sapshcut -type=Transaction -system=IDS -client=800 -user=barry -pw=123456 -l ...
- 什么是ORM？
什么是ORM? MVC框架中重要的一部分就是ORM,实现了数据模型与数据库的解耦,即数据模型不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库. ORM是对象关系映射的简称,主要任务是: 根 ...
- 封装一个redis操作类来操作hash格式
最近项目要用redis,依然是基于tp3.2. 发现thinkphp3.2自带的缓存类并不好使用,就自己封装了一个 目前只支持hash格式,其他数据类型的操作后面用到的时候再补充 <?php / ...
- [Codeforces543D]Road Improvement
Problem 刚开始每条边都是坏的,现在要选取一个点使得其他点到这个点的路径上最多只有一条坏路,问至少要修好多少条边 Solution 如果以1为根,那么是个简单的树形DP 设根从u转移到v,那么u ...
- lnamp环境搭建博客、论坛
实验环境:Centos6.5 源码安装Nginx yum安装Apache.php.Mysql Mysql: yum -y install mysql-server 安装Mysql数据库 /etc/i ...
- winfrom程序文本框第一次选中问题
想实现这样的功能: 就是在panel中的文本框,当第一次点击文本框时,全选文本框的内容:再次选择时,可以全选,也可以部分选中, 可是文本框总是从左全部选中,还不能从右边选择,在Enter或Down事件 ...
- MSSQL转Mysql常用函数，语法等
MSSQL转Mysql常用 一.字段类型 MSSQL Mysql 备注 "nchar" "char()" 最大长度为255 "nvarchar&quo ...
- java -jar启动java项目时，引用不同配置文件命令
java -jar eureka-server.jar --spring.profiles.active=peer1
- 关于HTMl CSS
HTML 结构 CSS 表现 JS 行为 首先说一个SEO,搜索引擎优化 标准文档流:(1)前提:在没有css的干预下 (2)块级元素:独占一行,可定义宽和 ...
- [ffmpeg]安装
下载源码: 我们选择去官网http://ffmpeg.org下载.版本和打包方式譬如:ffmpeg-3.1.11.tar.bz2 安装过程: tar -jxvf ./ffmpeg-3.1.11.t ...