以下文字整理自慕课网——张鑫旭的《CSS深入理解之line-height》。

line-height，又称行高，指的是两行文字基线之间的距离，又可以称为这行文字所占的高度。

定义三问：

  1. 什么是基线？
  2. 为何是基线？
  3. 需要两行？

如图红色线即为基线

基线（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支持的属性值：

  1. normal
  2. <number>
  3. <length>
  4. <percent>
  5. inherit(继承)

1、line-height:normal是默认属性值，对应的具体的行高值是跟着用户的浏览器走的，且与元素字体关联。如下例(在chrome浏览器下，在火狐浏览器下可能有偏差)：

改变为宋体：

可见，正是由于normal非常不确定，所以我们在实际网页开发的时候在<body>全局元素里对行高reset，保证兼容性。

2、line-height:<number>，如下例：

3、line-height:<length>

使用具体长度值作为行高值。例如：

  1. line-height:1.5em(相对单位)
  2. line-height:1.5rem(相对单位，不知道rem是？)
  3. line-height:20px(固定单位)
  4. line-height:20pt(固定单位，也不知道pt是？)

4、line-height:<percent>，如下例：

5、line-height:inherit，如下例：(比较高级，在此不做深入详解了)

问题：line-height:1.5、line-height:150%、line-height:1.5em有什么区别？

答案：从计算上来讲，是没有任何差别的。但应用元素有差别：

  1. line-height:1.5：所有可继承元素根据font-size重计算行高。
  2. 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的更多相关文章

  1. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  2. 真正的能理解CSS中的line-height，height与line-height

    https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...

  3. CSS深入理解学习笔记之absolute

    1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...

  4. CSS深入理解之absolute（HTML/CSS）

    absolute和float是同父异母的兄弟,因为它们具有相同点:包裹性与破坏性 absolute的特点 1.独立的,并且可以摆脱overflow的限制,无论是滚动还是隐藏: 2.无依赖,不受rela ...

  5. CSS深入理解之overflow

    CSS深入理解之overflow 前言 这是跟着张鑫旭重学CSS的overflow篇 基本属性 overflow有以下五个基本属性: 1.visible : 默认值,具体表现为,应用此属性后,子元素超 ...

  6. 转 - CSS深入理解vertical-align和line-height的基友关系

    一.想死你们了 几个星期没有写文章了,好忙好痒:个把月没有写长篇了,好忙好想:半个季度没在文章中唠嗑了,好痒好想. 后面一栋楼有对夫妻在吵架,声音雄浑有力,交锋酣畅淋漓,还以为只有小乡镇才有这架势,哦 ...

  7. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

  8. css深入理解padding

    padding 中规中矩,性格温婉平和! 第一节:CSS padding与容器的尺寸——了解padding与元素尺寸之间关系 CSS padding与容器的尺寸关系复杂 对于block水平元素 没有p ...

  9. 【前端Talkking】CSS系列——CSS深入理解之line-height

    1.写在前面 两个多周的时间没有写文章了,手好痒好痒,趁着公司在装修,从上周末到本周都在家办公,同时公司的项目并不紧急,于是抽着时间梳理了一下CSS中关于行高line-height的理解,今天发布出来 ...

随机推荐

  1. Go support for Android

    Go support for Android David Crawshaw June 2014 Abstract We propose to introduce Go support for the ...

  2. 基于HTML5的可预览多图片Ajax上传

    一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...

  3. iOS高级编程之XML，JSON数据解析

    解析的基本概念 所谓“解析”:从事先规定好的格式串中提取数据 解析的前提:提前约定好格式.数据提供方按照格式提供数据.数据获取方按照格式获取数据 iOS开发常见的解析:XML解析.JSON解析 一.X ...

  4. MVC4.0 如何设置默认静态首页index.shtml

    1.不启用二级域名情况下(www.xxx.com)下设置默认静态首页index.shtml 通过配置IIS的默认文档,设置默认首页地址 然后在MVC的路由中写入忽略默认路由代码 routes.Igno ...

  5. [转]Cygwin的包管理器：apt-cyg

    [转]Cygwin的包管理器:apt-cyg http://zengrong.net/post/1792.htm Cygwin的包管理工具setup.exe实在是难用的让人蛋碎.于是就有了这样一个ap ...

  6. [读行者][学习LinqExpression和Reflection(Emit)]阅读TypeBuilderSample之ExampleFromTheArticle

    前言 关于”读行者“ 俗语有云:"读万卷书,行万里路“.多读一些优秀代码,不仅可以锻炼我们读代码的能力(便于维护或相互交流),还可以吸取很多我们成长所需的知识点.多读,才能开阔我们的眼界,才 ...

  7. arm-elf-gcc汇编代码个人理解

    arm-elf-gcc汇编代码个人理解 有关arm-elf-gcc的安装使用问题请参照本人博客的另一篇文章http://www.cnblogs.com/wsine/p/4664503.html 由于各 ...

  8. windows多线程编程（一）（转）

    源出处:http://www.cnblogs.com/TenosDoIt/archive/2013/04/15/3022036.html CreateThread:Windows的API函数(SDK函 ...

  9. Excel下用SQL语句实现AVEDEV函数功能

    Excel下AVEDEV函数返回一组数据点到其算术平均值的绝对偏差的平均值. AVEDEV 是对一组数据中变化性的度量.最常见的应用就是统计平均分差. 但是如果在Excel中写SQL进行一些复杂的统计 ...

  10. perl随记(1)

    chmod 755 test,改变文件权限,rwx 421 chomp,如果字符串结尾有换行符,chomp 可以去掉它 正则表达式量词:*表示有或无,+表示1或多,?表示0或1 my,局部变量,只在定 ...