line-height这个样式相信大家一定不会陌生，我们经常用它来让文本上下居中，这样做一般不出出现什么问题，但是如果对这个属性不是很熟悉的话，可能会踩到一些坑，今天亲自去试验了一下，并总结了一下line-height的几个特性。
首先line-height有以下几种标准的写法:
写法1、line-height:normal; //等价于写法5，固定值为数字1.2,默认为normal
写法2、line-height:inherit; //父元素继承
写法3、line-height:24px; //通过像素px或者em等单位赋值
写法4、line-height:150%; //line-height=font-size*1.5
写法5、line-height:1.5; //line-height=font-size*1.5
line-height:2;行高是2倍的文字大小，均以相应的字体为基准。
line-htight:2em;行高是2倍的文字大小，文字大小是指父元素中设定的字体大小。
em是字体的默认高 1em=16px。line-height:2 这没什么区别。
这是一个继承的问题，默认单位em。这不过是写起来的不是那么的规范而已，但效果是一样
em 单位如何转换为像素值
当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小。
例如，如果一个 div 有 18px 字体大小，10em 将等同于 180px，即 10 × 18 = 180。
重点理解:
有一个比较普遍的误解，认为 em 单位是相对于父元素的字体大小。 事实上，根据W3标准 ，它们是相对于使用em单位的元素的字体大小。
父元素的字体大小可以影响 em 值，但这种情况的发生，纯粹是因为继承。 让我们看看为什么以及如何起作用。
em 单位的遗传效果
使用 em 单位存在继承的时候，情况会变得比较棘手，因为每个元素将自动继承其父元素的字体大小。 继承效果只能被明确的字体单位覆盖，比如px,vw
使用 em 单位的元素字体大小根据它们来定。 但该元素可能继承其父元素的字体大小，而父元素又继承其父元素的字体大小，等等。 因此，以 em 为单位的元素字体大小可能会受到其任何父元素的字体大小影响。
让我们看看一个例子。 在下面的 CodePen单步执行试试。 随着你的前进，使用 Chrome 开发工具或 Firebug 为火狐浏览器来检查我们的 em 单位计算到的像素值。
em 继承的例子
如果我们的根元素字体大小为 16px (通常是默认值) 一个子元素 div 里面padding值为 1.5em，该 div 将从根元素继承字体大小 16px。 因此padding会翻译成 24px，即 1.5 x 16 = 24。
如果我们加多一个div来包裹原先的div，然后设置其字体大小为 1.25em呢?
我们包裹的 div 继承根元素字体大小 16px ，并乘以它自己的 1.25em 的字体大小。 这将设置包裹 div 字体大小为 20px，即 1.25 x 16 = 20。
现在我们原始的 div 不再直接从根元素继承,而是从其新的父元素继承字体大小为 20px 1.5em 其padding值现在等于 30px，即 1.5 x 20 = 30。
这个继承效应可以更复杂，如果我们向我们原始的 div 添加 em 字体单位，比方说 1.2em。
Div 从其父级继承 20px 字体大小，然后，乘以它自己的 1.2em 设置，给它 24px，即 1.2 × 20 = 24 新字体大小。
div上的1.5em padding 现在将再次改变大小，用新的字体大小，36px，即 1.5 × 24 = 36 。
最后，为了进一步说明那个 em 单位是相对于他们最终获得(不是父元素)的字体大小，让我们来看看设置padding 1.5em 如果我们显式设置 div 使用 14px值，不继承字体大小会发生什么。
现在，我们的padding为 21px，即 1.5 x 14 = 21 已经变小了。 它不受父元素的字体大小。
由于存在着这些隐患，你可以看到为什么必须知道如何正确管理使用 em 单位。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>line-height:2和line-height:2em的区别，它们是有区别的</title>
<style type="text/css">
h2 { margin: 30px 0; }
body { font-size: 14px; padding:30px}
.first { line-height: 2; }
.second { line-height: 2em; }
span { font-size: 40px; }
</style>
</head>
<body>
<div style="width:300px;">
<h4>line-height:2</h4>
<div class="first">普通大小的文字，普通大小的文字，普通大小的文字，普通大小的文字，普通大小的文字，普通大小的文字，普通大小的文字，<span>我是大文字</span>普通大小的文字，普通大小的文字，普通大小的文字，普通大小的文字，普通大小的文字，普通大小的文字</div>
<h4>line-height:2em</h4>
<div class="second">普通大小的文字，普通大小的文字，普通大小的文字，普通大小的文字，普通大小的文字，普通大小的文字，普通大小的文字<span>我是大文字</span>普通大小的文字，普通大小的文字，普通大小的文字，普通大小的文字</div>
</div>
</body>
</html>
代码效果图片
本文最后编辑：2019-07-19 11:36:40
原文链接：https://www.qiquanji.com/post/7742.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知