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:规定 ...
随机推荐
- AIX详细查看用户/进程使用内存
本文来自:https://blog.csdn.net/mydriverc2/article/details/41956063 问题描述:通过topas发现%comp内存已使用98% 问题分析: 1,从 ...
- mysql:mysql is neither service nor target!?(suse12 sp2 )
今天想在自己的虚拟机上安装mysql,安装好了并且初始化之后,一直无法启动mysql. 1.service mysql start; 报错:mysql is neither service nor t ...
- Linux系统启动过程(通俗易懂)
前言: Linux是一种自由和开放源代码的类UNIX操作系统.该操作系统的内核由林纳斯·托瓦兹在1991年10月5日首次发布.在加上用户空间的应用程序之后,成为Linux操作系统.Linux是自由软件 ...
- GDAL——命令使用专题——ogrinfo命令
GDAL——命令使用专题——ogrinfo命令 前言 GDAL(Geospatial Data Abstraction Library)是一个在X/MIT许可协议下的开源栅格空间数据转换库.它利用抽象 ...
- PROJ.4学习——初识PROJ
PROJ.4介绍——初始认识 前言 PROJ是一个通用的坐标转换软件,它将地理空间坐标从一个坐标系转换为另一个坐标系.这包括地图投影和大地坐标变换. PROJ包含命令行应用程序,可以方便地从文本文件或 ...
- 本地搭建Apache Tomcat服务器
首先说下Apache和Tomcat的区别: 相同点:1.两者都是apache组织开发的 2.两者都有HTTP服务的功能 3.两者都是免费的 不同点:Apache是web服务器,专门提供HTTP服务的, ...
- 跟随我在oracle学习php（17）
通用设定形式 定义一个字段的时候的类型的写法. 比如: create table tab1 (f1 数据类型 ); 数据类型: 类型名[(长度n)] [unsigned] [zerofil ...
- 7ci
- [数]昨天欠下的一道立体几何题HDU-4741
并没有做到这道题,后来听学长说了题意,总之就是立体几何嗯 看了好几份题解,是的我知道是异面线段的距离了,可是看码完全不明orz. 这时候出现了一份清晰易懂甚至给出了公式来源的blog╰(*°▽°*)╯ ...
- idea的破解及相关安装
---- idea的破解 -javaagent:../bin/JetbrainsCrack-2.7-release-str.jar 复制到相关的idea配置文件 并将该Jar包复制到idea的bin目 ...