对于line-height的认识

在写我对line-height的认识之前，我想每一个人都应该搞清楚下面这个情况。
当给一个空div里面添加文字时，这个div的高度是怎么来的？
也许有很多朋友认为是由font-size决定的，但事实上这个元素的高度是由line-height决定的。下面我们可以通过例子来证明一下这个结论。
情况一：

在这里，我们将元素的font-size设置为30px,同时将line-height设置为0。这个时候通过检查元素看到该div的高度其实是并没有被撑开的，而是0；
情况二：

与上一个相反，我们将元素的line-height设置为30px,同时将font-size设置为0。但是这个时候虽然我们看不到文字，但是div的高度是被撑开了。

经过上面的两个例子，我们就可以得到最开始的结论：空div的高度是由line-height决定的。

接下来我们需要了解的是line-height对于内联元素和块级元素的影响。首先大家都知道内联元素分为替换元素和非替换元素。关于什么是替换元素和非替换元素的问题这里我就不讲解了。

现在我们先来了解line-height对于非替换元素的作用和影响。用一句话总结就是：非替换元素的高度完全由line-height决定。证明的话这里也就不列举了，大家可以自己试试。

下面轮到了替换元素和块级元素。
关于替换元素的高度与line-height的关系首先需要弄明白这个问题：line-height可以影响替换元素吗？答案是：不可以！
可能有些朋友会质疑，那我们来看一下面这个例子：

可以看到，select元素的高度并没有因为设置line-height为200px而改变。
对于块级元素，line-height对其本身是没有任何作用的，我们平时改变line-hieght，块级元素的高度跟着变化实际上是通过改变块级元素里面内联级别元素占据的高度实现的。比如开始的例子，实际上块级元素里面内联级别元素就是文字。

接下来，我想在这里给大家讲解一下line-height的继承问题。在讨论中这个问题之前，首先我们需要搞清楚line-height都有哪些属性以及这些属性对应的属性值。

数值：如line-heigth：1.5，其最终的计算值和当前的font-size相乘后的值。例如：假设我们此时的font-size大小是14px，则此时line-height就是1.5*14px = 21px；
百分比值：如line-height：150%，其最终的计算值和当前的font-size相乘后的值。例如：假设我们此时的font-size大小是14px，则此时line-height就是150%*14px = 21px；
长度值：也就是带单位的值，line-heigth：21px或者line-height：1.5em，此处em是一个相对于font-size的相对单位，因此其最终的计算值和当前的font-size相乘后的值。例如：假设我们此时的font-size大小是14px，则此时line-height就是1.5*14px = 21px；
乍一看，似乎line-height：1.5，line-height：150%以及line-height：1.5em的最终效果都是一样的，但是实际上，line-height：1.5和其他两个市有区别的，那就体现在继承方面上。
如果使用数值作为line-hieght的属性值，那么所有的子元素继承的都是这个值，比如：
line-height：1.5，那么子元素继承的就是1.5；
如果使用百分比值或者长度值作为属性值，那么所有的子元素都继承的是最终的计算值。比如：line-height：1.5em或者line-height：150%，font-size：14px，那么子元素继承的是1.5*14px = 21px；

最后，在这里我再继续问大家一个问题，具体如下：

此时.box和.box1的高度分别是多少？
正确的答案是：全都是96px！不相信的朋友可以自己亲自试试验证一下。
关于这个问题，也就是说：无论内联元素line-height怎么设置，最终父元素的高度都是由数值大的line-height决定的，我们可以将它称为“内联元素line-height的大值特性”。

对于line-height的认识相关推荐

html中高与行高的区别,深入了解css的行高Line Height属性
什么是行间距? 古时候我们是用印刷机来处理文字,印出来的每个字都位于独立的一个块里. 行间距,即传说中控制两行文字之间垂直距离的东东. 在CSS,line-height被用来控制行与行之间的垂直距离. ...
真正的能理解CSS中的line-height，height与line-height
在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉.在此做一下总结,一是更深层次的了解什么是line-height,二是比较heigh ...
CSS中的line-height，height与line-height
在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉.在此做一下总结,一是更深层次的了解什么是line-height,二是比较heigh ...
DW中CSS属性详解
作者:未知来源:5D多媒体在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性,Dreamweaver把这些属性分为Type(类型).Background(背 ...
微信小程序加载中动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 效果图: 代码: <view class="line"><image s ...
VVeboTableView 源码解析
原文链接:http://www.jianshu.com/p/78027a3a2c41 最近在看一些 iOS 性能优化的文章,我找到了 VVeboTableView 这个框架.严格来说这个不属于框架,而 ...
第十次课：前台首页设计及显示商品信息
一.前台首页设计 0.css样式 @charset "utf-8"; /*全局设置*/ *{ padding:0; margin:0; } body { font-size: ...
Java的新项目学成在线笔记-day7（二）
1.3 前端页面说明我的课程列表使用element 的card组件,如下: 页面布局代码如下: <template> <section> <el‐row >< ...
超全超实用的Javascript类库和jQuery插件大全之一：图片，地图和图形
为什么80%的码农都做不了架构师?>>> 日期:2012-10-10 来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javasc ...
CSS 行内格式化上下文中的各种高度计算
前言碎碎语:标题问题在昨天困扰了笔者很久很久,早上把问题提到了各网络也暂时没有回复.因为明天要早起飞异地参加一场校招面试,笔者还是很紧张的,但奈何问题不解决寝食难安--所以还是卯起劲重新思考这个问题, ...

对于line-height的认识

对于line-height的认识相关推荐

最新文章

热门文章