CSS深入理解之line-height
以下文字整理自慕课网——张鑫旭的《CSS深入理解之line-height》。
line-height，又称行高，指的是两行文字基线之间的距离，又可以称为这行文字所占的高度。
定义三问：
- 什么是基线？
- 为何是基线？
- 需要两行？
如图红色线即为基线
基线（baseline），指的是一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下端沿。基线乃*线定义之根本！
基线的扩展知识，稍作了解。如图：
第3个问题，一行文字难道就没有行高吗？非也，一行文字也是有行高的，两行的定义已经决定了一行的表现！
所以，行高表现为，如下图：（如果试想行高为0，那么两行文字将重合）
问题：为何line-height可以让单行文本垂直居中？
分析：真的垂直居中了吗？实际上并没有，只是我们肉眼看上去垂直居中而已！见下图：
line-height与行内框盒子模型
所有内联元素的样式表现都与行内框盒子模型有关！例如浮动的图文环绕效果......
<p>这是一行普通的文字，这里有个<em>em</em>标签。</p>
这普通的一行包含了4种盒子，下面详解。
1、内容区域(content area)，是一种围绕文字看不见的盒子。内容区域的大小与font-size大小相关。图示如下：
2、内联盒子(inline boxes)，内联盒子不会让内容成块显示，而是排成一行。如果(文字)外部包含inline水平的标签(span、a、em、strong等)，则属于内联盒子。如果是个光秃秃的文字，则属于匿名内联盒子。图示会更清楚：
3、行框盒子(line boxes)，每一行就是一个行框盒子，每个行框盒子又是由一个一个内联盒子组成。
4、<p>标签所在的包含盒子(containing box)，此盒子有一行一行的行框盒子组成。
line-height的高度机理——深入理解内联元素的高度表现
我们来考虑文本占据的高度，见下例：
<p>标签的高度从何而来，是由里面的文字撑开的吗？答案：不是的，实际上这个高度是由line-height决定的！再看下例：
通过此例说明，内联元素的高度是由行高决定的！
line-height明明是两条基线之间的距离，单行文字哪来行高，还控制了高度?
我们需要知道：
1、行高由于其继承性，影响无处不在，即使单行文本也不例外。
2、行高只是幕后黑手，高度的表现不是行高，而是内容区域和行间距。
只不过，内容区域高度(content area)+行间距(vertical spacing)=行高(line-height)
注意：1、内容区域(content area)高度只与字号(font-size)以及字体(font-size)有关，与line-height没有任何关系。
2、在simsun字体(即宋体)下，内容区域高度等于文字大小值。所以，在simsun字体下，font-size+行间距=line-height。
行间距上下拆分，就有了半行间距。
测试：font-size=240px，line-height=360px，分别计算行半间距。如图：
在simsun字体下，行半间距就是60px了。
总结：
行高决定内联盒子的高度；行间距墙头草，可大可小(甚至负值)，保证高度正好等于行高。行间距为负值时，举例说明，在simsun字体下，如果line-height小于font-size，inline box会优先于行高，以保证inline box的高度正好等于行高。例：font-size: 16px; line-height: 12px; inline box高度为12px。content area会溢出，inline box的顶部和底部半行高会折叠起来，以保证inline box的高度。图示如下：
问题：如果行框盒子里面有多个不同行高的内联盒子?这个时候高度怎么表现?由行高最高的那个盒子决定?
答案：错。看下例：
虽然以上特例说明了正好是由行高最高的那个盒子决定，但是还要看下例：
到此就已经说明问题了。vertical-align是内联元素里面非常深的一个知识，在此不赘述了。
含多个行框盒子的包含容器，多行文本的高度就是单行文本高度的累加。
line-height各类属性值——深入理解line-height不同类别值的不同表现
line-height支持的属性值：
- normal
- <number>
- <length>
- <percent>
- inherit(继承)
1、line-height:normal是默认属性值，对应的具体的行高值是跟着用户的浏览器走的，且与元素字体关联。如下例(在chrome浏览器下，在火狐浏览器下可能有偏差)：
改变为宋体：
可见，正是由于normal非常不确定，所以我们在实际网页开发的时候在<body>全局元素里对行高reset，保证兼容性。
2、line-height:<number>，如下例：
3、line-height:<length>
使用具体长度值作为行高值。例如：
- line-height:1.5em(相对单位)
- line-height:1.5rem(相对单位，不知道rem是？)
- line-height:20px(固定单位)
- line-height:20pt(固定单位，也不知道pt是？)
4、line-height:<percent>，如下例：
5、line-height:inherit，如下例：(比较高级，在此不做深入详解了)
问题：line-height:1.5、line-height:150%、line-height:1.5em有什么区别？
答案：从计算上来讲，是没有任何差别的。但应用元素有差别：
- line-height:1.5：所有可继承元素根据font-size重计算行高。
- line-height:150%/1.5em：当前元素根据font-size计算行高，继承给下面的元素。
以下例来说明：
例，line-height:1.5时。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
line-height: 1.5;
font-size: 24px;
}
p {
font-size: 60px;
}
</style>
</head>
<body>
<div>
<p>我的font-size<br/>为60px~</p>
</div>
</body>
</html>
可继承元素(<p>)是重新根据自己的font-size(60px)计算行高的(line-hight=60x1.5=90px)，所以两行行框盒子高度为180px。
例，line-height:150%时。
当前元素(<div>)根据font-size(24px)计算行高(line-height=24x150%=36px)，继承给下面的元素(<p>)，所以两行行框盒子高度为72px。
body全局数值行高使用经验
body { font-size: 14px; line-height: ?; }
假如是一种专门以阅读为主的博客，行高至少要1.5或1.6。如果是平时的面向用户的网页开发，匹配20px的使用经验——方便心算。
line-height=20px/14px≈1.42857(1.4...)，那么我们是不是该使用1.42857呢？
body { font-size: 14px; line-height: 1.42857 ?; }
虽然，IE、火狐都是ok的，但chrome的高度是19px，不是20px。所以，我们使用1.4286。
body { font-size: 14px; line-height: 1.4286; }
line-height与图片的表现——深入探讨行高和图片的样式表现
行高会不会影响图片实际占据的高度？
CSS深入理解之line-height的更多相关文章
- 深入了解css的行高Line Height属性
什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...
- 真正的能理解CSS中的line-height，height与line-height
https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...
- CSS深入理解学习笔记之absolute
1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...
- CSS深入理解之absolute（HTML/CSS）
absolute和float是同父异母的兄弟,因为它们具有相同点:包裹性与破坏性 absolute的特点 1.独立的,并且可以摆脱overflow的限制,无论是滚动还是隐藏: 2.无依赖,不受rela ...
- CSS深入理解之overflow
CSS深入理解之overflow 前言 这是跟着张鑫旭重学CSS的overflow篇 基本属性 overflow有以下五个基本属性: 1.visible : 默认值,具体表现为,应用此属性后,子元素超 ...
- 转 - CSS深入理解vertical-align和line-height的基友关系
一.想死你们了 几个星期没有写文章了,好忙好痒:个把月没有写长篇了,好忙好想:半个季度没在文章中唠嗑了,好痒好想. 后面一栋楼有对夫妻在吵架,声音雄浑有力,交锋酣畅淋漓,还以为只有小乡镇才有这架势,哦 ...
- 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局
这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...
- css深入理解padding
padding 中规中矩,性格温婉平和! 第一节:CSS padding与容器的尺寸——了解padding与元素尺寸之间关系 CSS padding与容器的尺寸关系复杂 对于block水平元素 没有p ...
- 【前端Talkking】CSS系列——CSS深入理解之line-height
1.写在前面 两个多周的时间没有写文章了,手好痒好痒,趁着公司在装修,从上周末到本周都在家办公,同时公司的项目并不紧急,于是抽着时间梳理了一下CSS中关于行高line-height的理解,今天发布出来 ...
随机推荐
- 快速的搭建JFinal的ORM框架示例
JFinal默认用的是Freemarker作为视图. 所以,打架还是准备好俩个jar包吧! freemarker-2.3.16.jar JFinal-bin-1.5.jar 新建web工程和添加lib ...
- CDN技术原理
要了解CDN的实现原理,首先让我们来回顾一下网站传统的访问过程,以便理解其与CDN访问方式之间的差别: 由上图可见,传统的网站访问过程为: 1. 用户在浏览器中输入要访问的域名: 2. 浏览器向域名解 ...
- Oracle用户，权限，角色以及登录管理 scoot 授权
Oracle用户,权限,角色以及登录管理 1. sys和system用户的区别 system用户只能用normal身份登陆em.除非你对它授予了sysdba的系统权限或者syspoer系统权限. sy ...
- Swift基础小结_2
import Foundation // MARK: - ?和!的区别// ?代表可选类型,实质上是枚举类型,里面有None和Some两种类型,其实nil相当于OPtional.None,如果非nil ...
- 制作越狱版本的ipa文件
1.新建项目,证书选择开发者自己创建的证书 2.编译项目,在工程左侧树形菜单中,找到Product,找到编译后的项目,邮件,找到.app文件路径. 3.将这个app文件拖入到iTunes,邮件点击图标 ...
- JAVA事务
一.什么是事务 我们通常会认为事务与数据库有关. 事务是访问数据库的一个操作序列,数据库应用系统通过事务集来完成对数据库的操作.事务的正确执行使得数据库从一种状态转换成另外一种状态. 事务必须服从IS ...
- vimium
安装在chrome上的一个插件,可以实现chrome无鼠标无键盘操作. 事实上vimium就是提供了一系列的快捷键列表,所以只要熟悉了这些快捷键就可以方便使用了. 要查看快捷键列表,打开chrome, ...
- vs2013中把解决方案上传到SVN服务器
在VS2013中直接上传代码到SVN服务器,在这之前,必须是你的电脑已经安装了TortoiseSVN. 其次,VS2013必须安装AnkhSVN插件.然后才可以向我下面所述一样使用TortoiseSV ...
- java rest框架jersey数组单记录问题解决
JAVA数据接口采用jersey技术,可以返回xml,json等格式,可以根据客户端请求accept,如:Application/json,Application/xml 来得到不同的接口数据,非常好 ...
- xml基础学习笔记04
今天继续xml学习,主要是:SimpleXML快速解析文档.xml与数组相互转换 .博客中只是简单的做一个学习记录.积累.更加详细的使用方法,可以查看php手册 1.SimpleXML快速解析文档 前 ...