一、行高的定义
line-height(行高)：两行文字基线之间的距离
1、什么是基线？
2、为何是基线？
3、需要两行吗？
1、什么是基线？

我们上学的时候都用过，抄写英文字母的时候。其中有一条红线，这个红线就是基线，是为了写英文的时候对齐用的。
 

2、为何是基线？
为什么不是底线，不是中线呢？因为基线乃＊线定义之根本！
3、需要两行吗？
两行的定义已经决定了一行的表现！

如图，首先基线与基线之间的距离就是行高
 
接下来我们看看line-height:200px跟这个基线到底怎么纠葛，起作用的呢？

然后我们脑补一下，如果行高为0会怎么样子呢，他会重合。
4、为何line-height可以让单行文本垂直居中？
首先真的垂直举重了吗？

如图，会发现这个x跟这个破折号的中心并没有跟中线重合在一起。也就是实际上并没有完全居中的，只是看上去垂直居中了。
 
二、line-height与行内框盒子模型
1、什么是行内框盒子模型
所有内联元素的样式表现都与行内框盒子模型有关！例如浮动的图文环绕效果...
  1. <p>这是一行普通的文字，这里有个<em>em</em>标签</p>
上面是一行普通的文字，有个em标签。但是，却包含了4种盒子。
1）、“内容区域”(content area)，是一种围绕文字看不见的盒子。"内容区域"(content area)的大小与font-size大小相关。个人理解，可以是选中文字的时候，那一块区域
2）、“内联盒子”(inline boxes), “内联盒子”不会让内容成块显示，而是排成一行。如果外部含inline水平的标签(span,a,em等),则属于“内联盒子”。如果是光秃秃的文字，则属于“匿名内联盒子”；
3）、“行框盒子”（line boxes），每一行就是一个“行框盒子”，每个“行框盒子”又是由一个一个“内联盒子”（inline-boxes）组成
4）、<p>标签所在的“包含盒子”（containing box）,此盒子由一行一行的“行框盒子”（line boxes）组成。
了解行内框盒子模型，对理解line-height有什么现实意义？
三、line-height对高度机理（机理是机制原理对简称）
先看一个小小的例子
  1. <body>
  2. 　　<p>这是一行普通的文字，这里有个<em>em</em>标签。</p>
  3. 　　<script>
  4. 　　　　console.log(document.querySelector("p").clientHeight);
  5. 　　　　// mac chrome:22 firefox:23
  6. 　　　　// windows chrome:21 ie:19 firefox:22
  7. 　　</script>
  8. </body>
那么这个元素高度是从何而来的呢？是不是由里面的文字撑开的？非也，是由line-height决定的
  1. <style>
  2. 　　.test1{
  3. 　　　　font-size: 36px;
  4. 　　　　line-height: 0;
  5. 　　　　border: 1px solid #ccc;
  6. 　　　　background: #eee;
  7. 　　　　margin-top:50px;
  8. 　　}
  9. 　　.test2{
  10. 　　　　font-size: 0;
  11. 　　　　line-height: 36px;
  12. 　　　　border: 1px solid #ccc;
  13. 　　　　background: #eee;
  14. 　　　　margin-top:50px;
  15. 　　}
  16. </style>
  17. <body>
  18. 　　<div class="test1">测试1</div>
  19. 　　<div class="test2">测试2</div>
  20. </body>
看这个demo，能看到test1文字长的很大，高度就是边框的高度,2px，test2有高度，文字没有，36px。所以内联元素的高度是由行高决定的
那么问题来了，line-height命名是两基线距离，单行文字哪来行高，还控制了高度？这就有点尴尬了。
1、行高由于其继承性，影响无处不在，即使单行文本也不例外；也就是说页面上所有元素，每个角落都有行高的。
2、行高只是幕后黑手，高度的表现不是行高，而是内容区域和行间距。
　　只不过，正好... 内容区域高度＋行间距 ＝ 行高
　　　1)、内容区域高度只与字号以及字体有关，与line-height没有任何关系
　　　2）在simsun（宋体）字体下，内容区域高度等于文字大小值。
　　simsun字体下：
　　font-size + 行间距 = line-height
　　那么什么是行间距呢？行间距 ＝ 行高 － font-size
　　把行间距上下拆分，就有了“半行间距”。
　　总结：行高决定内联盒子高度；行间距墙头草，可大可小（甚至负值），保证高度正好等同于行高
那么问题来了，如果行框盒子里面有多个不同行高的内联盒子？由行高最高的那个盒子决定？似是而非！看上去好像是对的，其实是不正确的。
  1. <body>
  2. 　　<p>这是一行普通的文字，这里有个<em style="line-height: 80px;">em</em>标签</p>
  3. 　　<script>
  4. 　　　　console.log(document.querySelector('p').clientHeight);
  5. 　　</script>
  6. </body>
  1. 发现clientHeight正好是80px。如果是这个例子看，那句话是正确的。
  1. <body>
  2. 　　<p>这是一行普通的文字，这里有个<em style="line-height: 80px; vertical-align:40px;">em</em>标签</p>
  3. 　　<script>
  4. 　　　　console.log(document.querySelector('p').clientHeight);
  5. 　　</script>
  6. </body>
这个时候再来看一下这个行高的高度，91，不是80了。发生了一些变化，比预计的要高了。所以那句话是不准确的。那么vertial-align是个非常重要，也非常深的一个东西。等会讲这个东西。结论是91px不等于高度最高的内联元素。
前面讲的是单行文本的高度，如果是多行文本高度呢，多行文本的高度就是单行文本高度累加。
若行框盒子里面混入inline-block水平元素（如图片），高度如何表现呢？
 
四、line-height各类属性值
line-height支持的属性值大概这些
normal
<number>
<length>
<percent>
inherit
我们一个个来看一下
1)line-height:normal
默认属性值，跟着用户的浏览器走，且与元素字体关联。
比如我用的火狐，你用的chrome，这个normal的值可能就不一样
  1. <body>
  2. 　　<p>这是一行普通的文字，这里有个<em>em</em>标签。</p>
  3. 　　<script>
  4. 　　　　console.log(document.querySelector("p").clientHeight);
  5. 　　　　// mac chrome:22 firefox:23
  6. 　　　　// windows chrome:21 ie:19 firefox:22
  7. 　　</script>
  8. </body>
还有另外一种，字体不一样，normal的值也不一样
  1. <body>
  2. 　　<div style="font-family:雅黑">字体</div>
  3. </body>
family不一样，normal的值也会不一样。
2）line-height:<number>
使用数值作为行高值。例如
line-height:1.5;
根据当前元素的font-size大小计算。
假设文字大小(font-size)20px.则实际的行高像素值是：
line-height = 1.5 * 20px = 30px
3) line-height:<length>
使用具体长度值作为行高值，例如
line-height: 30px;
4) line-height:<percent>
使用百分比作为行高值。例如
line-height:150%;
相对于设置了该line-height属性的元素的font-size大小计算。
假如文字大小(font-size)20像素，则实际的行高像素值是：
line-height = 150% * 20px = 30px;
5) line-height:inherit
行高继承： ie8+，行高天生好像就会继承，那么为什么还要这个继承呢？
input{ line-height: inherit; }
input框等元素默认行高是normal,使用inherit可以让文本框样式可控性更强。
此继承非彼继承。input的行高默认是normal,不是继承外面的，默认不受外面影响。这个时候可能需要继承一下
这里有一个有意思的问题
line-height:1.5,
line-height:150%,
line-height:1.5em
有什么区别？
我是这么认为的，从计算上来讲，是没有任何差别的。比如20px，计算出来,高度全是30px。差别在什么地方呢
应用元素有差别
1）line-height:1.5所有可继承元素根据font-size重计算行高；
2）line-height:150%/1.5em 当前元素根据font-size计算行高，继承给下面的元素；
这语言很苍白，不懂，看例子

  1. <body>
  2. 　　<div style="line-height:1.5; width:500px;">
  3. 　　　　<span style="font-size:60px;">我的font-size为60px</span>
  4. 　　</div>
  5. 　　<div style="line-height:150%; width:500px;">
  6. 　　　　<span style="font-size:60px;">我的font-size为60px</span>
  7. 　　</div>
  8. </body>
浏览器看会有什么不一样？上面的是90px，下面的是40px。上面的行高会重新计算扩大，下面的不会
body全局数值行高使用经验
body{ font-size:14px; line-height:?}
假如是博客，这种阅读为主的，行高至少1.5到1.6。如果主要是网页开发，面向用户的。一半匹配20px的使用经验－方便心算。
line-height = 20px / 14px = 1.42857
body{ font-size:14px; line-height:1.42857?}
这个很怪，火狐里面是19px;所以要向上取值
body{ font-size:14px; line-height:1.4286}
 

五、line-height与图片的表现
首先思考一个问题，行高会不会影响图片实际占据的高度？也就是行高从一百改成两百，这个图片占据的高度会不会变。不会变。
  1. <p style="background:#eee"><img src="imgs/text.png" alt="" style="width:200px;"></p>
首先这么一张图片，会看到图片下面会有一段间隙，为什么会有间隙呢？这个时候在图片后面加一段文字，纹丝不动。没有任何变化。会发现图片的下边缘和文字的边缘是对齐的。这是为什么呢？因为默认是根据基线对齐的。这个时候改变行高，发现下边缘也变高了。
  1. <body>
  2. 　　<p style="background:#eee; line-height: 60px">
  3. 　　<img src="imgs/text.png" alt="" style="width:200px;">
  4. 　　　　<span style="display:inline-block; background:#fff;">图片高度177px，字体14px</span>
  5. 　　</p>
  6. </body>
会发现行高的高度就是文字的高度。因为要让文字根据基线对齐，所以下面的高度变高了。所以现在解释刚开始的下面的空隙。因为要把文字进行基线对齐，所以不得已，图片下面有空隙。那么为什么刚开始没有文字的时候，表现跟有文字一样呢。这里有个概念，叫做隐匿文本节点，这是自己的理解，就是里面好像有个文本，但是看不到，摸不到，js获取不到。
那么如何消除图片底部间隙？我们实际开发中是不需要的。
  1. 1、图片块状话－无基线对齐
  2. img{ display: block; }
  3. 2、图片底线对齐
  4. img{ vertical-align: bottom; }
  5. 3、行高足够小－基线位置上移
  6. .box{ line-height:0; }
六、line-height的实际应用
像居中啊，边距什么的，上面都说过，就不探讨了。
1、大小不固定的图片，多行文字的垂直居中
  1. <style>
  2. 　　.box{
  3. 　　　　line-height: 300px;
  4. 　　　　text-align: center;
  5. 　　　　background: #eee;
  6. 　　}
  7. 　　.box > img {
  8. 　　　　vertical-align: middle;
  9. 　　}
  10. </style>
  11. <body>
  12. 　　<div class="box">
  13. 　　　　<img src="imgs/text.png" style="width:200px" alt="">
  14. 　　</div>
  15. </body>
这个时候图片会近似的垂直居中，这里又用到了vertical-align;这个middle是基线1/2x的距离，下一章再具体研究下
2、多行文本水平垂直居中
  1. <style>
  2. 　　.box{
  3. 　　　　line-height: 250px; text-align: center; background: #eee;
  4. 　　}
  5. 　　.box > .text{
  6. 　　　　display: inline-block; line-height: normal; text-align: left; vertical-align: middle;
  7. 　　}
  8. </style>
  9. <body>
  10. 　　<div class="box">
  11. 　　　　<div class="text">
  12. 　　　　　　多行文字水平垂直居中实现的原理跟上一页图片的实现是一样的，区别在于要把多行文本所在的容器的display水平转换成
  13. 　　　　　　和图片一样的，也就是inline-block，以及重置外部继承的 text-align 和 line-height属性值。
  14. 　　　　</div>
  15. 　　</div>
  16. </body>
这里父元素text-align:center，和子元素vertical-align:middle跟图片居中是一样的。唯一不一样的就是要把text设置成inline-block;同时干掉父元素的line-height这些继承下来的东西。如果不干掉，三行文字都是250px。
 
接下来看几个行高的事例，产生的现象 
  1. <style>
  2. 　　span {
  3. 　　　　background: red;
  4. 　　}
  5. 　　.c1 {
  6. 　　　　line-height: 20px;
  7. 　　}
  8. 　　.c2 {
  9. 　　　　line-height: 8px;
  10. 　　}
  11. 　　.c3 {
  12. 　　　　line-height: 30px;
  13. 　　}
  14. 　　.c5 {
  15. 　　　　line-height: 28px
  16. 　　}
  17. </style>
  18. <body>
  19. 　　<div>
  20. 　　　　<span class="c1">inline box xfg中文</span>
  21. 　　　　<span class="c2">inline box</span>
  22. 　　　　<span class="c3">inline box</span>
  23. 　　　　inline box
  24. 　　　　<span class="c5">inline box</span>
  25. 　　</div>
  26. </body>

它们的行高不一样，但是为什么渲染的高度是一样的

这个呢其实比较复杂，这个涉及到文字到排版，文字到排版中有几条线，上面叫做顶线，下面叫做底线，顶线和底线之间的区域叫做文本占据到区域。字母都会有一个基线，都是对齐的。这就是为什么行高不一样，但是却一样。第三个元素到行高是30。但是选中看高度还是22。那行高会决定什么呢？会决定它上下到多余的高度。我们选中div，发现刚好是30px。它会把外面的盒子撑起来。那么行高是由什么构成的。行高是由line-box(一行的高度)组成的。line-box是由inline-box组成的。inline-box的高度会决定line-box的高度
  1. <style>
  2. 　　.cc1 {
  3. 　　　　font-size: 12px;
  4. 　　}
  5. 　　.cc2 {
  6. 　　　　font-size: 18px;
  7. 　　}
  8. 　　.cc3 {
  9. 　　　　font-size: 24px;
  10. 　　}
  11. </style>
  12. <body>
  13. 　　<div style="border:1px solid red">
  14. 　　　　<span style="background:blue; color:#fff; font-size:20px; line-height:60px">
  15. 　　　　　　居中xfg&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
  16. 　　　　</span>
  17. 　　</div>
  18. 　　<div>
  19. 　　　　<span class="cc1">第一段</span>
  20. 　　　　<span class="cc2">第二段</span>
  21. 　　　　<span class="cc3">第三段</span>
  22. 　　</div>
  23. 　　<div style="background:red">
  24. 　　　　<span>文字</span>
  25. 　　　　<img src="text.png" alt="">
  26. 　　</div>
  27. 　　<div>
  28. 　　　　<div style="float:left">
  29. 　　　　　　<span>第一段</span>
  30. 　　　　</div>
  31. 　　　　<div style="float:left">
  32. 　　　　　　<span>第二段</span>
  33. 　　　　</div>
  34. 　　</div>
  35. </body>

第一部分是为了大家看到的样子，div是没有定高的，里面有一个span。span是inline的元素。它也是没有定高的。因为span是inline元素，定高其实没用。它有一个背景blue。背景blue是根据字体大小来渲染的。底线和顶线之间。我们字体调大，背景也会变大。那我们的line-height是60px。60px实际上就是把整个div撑起来了。这个div是62，因为他有边框。这里有一个特性，就是行高比字体要大，要大的话，多余的高度会上下分布，让里面的inline元素垂直居中。这是一个非常重要的特性，如果要做垂直居中的话，用line-height来做就好了，而且在这种情况下都不用为div指定高度。

第二部分我们看到字体的大小是不一样的。字体大小不一样，那么按照什么对齐呢。默认情况呢，是按照base-line,基线对齐。对大部分中文来说，底部基本上是基线对位置。如果要居中对齐怎么办。

那我们就设置vertical-align:middle，居中对齐，三个部分都设置居中对齐。设置top就是根据顶线对齐。设置bottom就是根据底线对齐。这里根据顶线和底线对齐并不是根据文字都顶部和底部对齐。

第三部分有一个文本，有一个图片。然后会发现一个很奇怪的事情。这个图片下面有一段空白。有人说我是不想要这个空白的。那怎么办呢？首先他的原因是什么，原因是因为，img这个也相当于是一个inline的这样一个元素。inline的元素就要遵守行高的构成。他会按照base-line对齐。就是基线对齐。基线对齐的话，就意味着，基线到底线之间还是有一段空隙的。这是这个空隙产生的原因。那我们要去掉这个空隙怎么办？默认是按base-line对齐，base-line跟底线是有偏差的。这个偏差的大小视字体大小而定。如果是12px的大小，那么这个图片的空隙有可能就是3px左右。那么这就是经典的图片3px缝隙问题。这个问题怎么解决呢，很简单，默认是base-line。我们改成vertical-align:bottom,按底线对齐。这样缝隙就没有了

行高 line-height的更多相关文章

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

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

  2. css - 行高

    css - 行高 line-height行高 取值:px | em | rem | 百分比 | 纯数字 | normal | inherit 设置给:块.行内.行内块 应用给:文本 继承:块.行内.被 ...

  3. easyui datagird 解决行高不一致问题!

    <style>.datagrid-btable .datagrid-cell {padding: 6px 4px;overflow: hidden;text-overflow: ellip ...

  4. wpf datagrid row height 行高自动计算使每行行高自适应文本

    wpf 的datagrid的行高 要么是Auto,要么是定值:但会带来麻烦就是每行行高都一样. 当需要按内容(主要是wrap 换行的textbox或textblock)来动态调整行高的时候,需要用到d ...

  5. css中line-height行高的深入学习

    之前对css中行高line-height的理解还是有些肤浅,深入后才发觉里面包罗万象.学习行高line-height,首先从基本原理开始 (标注该文章转载 http://www.cnblogs.com ...

  6. 第2月第24天 coretext 行高

    1.NSMutableAttributedString 行高 NSMutableAttributedString *attributedString = [[NSMutableAttributedSt ...

  7. CSS行高——line-height

    初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那么简单,最近看了一些关于行高的知 ...

  8. CSS行高line-height的理解

    一.行高的字面意思 “行高“顾名思义指一行文子的高度.具体来说是指两行文子间基线间的距离. 基线是在英文字母中用到的一个概念,我们刚学英语的时候使用到的那个英语本子每行有4条线,其中底部第二条线就是基 ...

  9. 深入理解 CSS 中的行高与基线

    1.基本概念 1.  基线.底线.顶线.中线 注意:基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿. 2. 内容区 内容区是指底线和顶线包裹的区域(行内元素display ...

  10. (转)CSS行高——line-height

    原文地址:http://www.cnblogs.com/dolphinX/p/3236686.html 初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了 ...

随机推荐

  1. 用poi替换ppt中的文字和图片

    try {            // 获取PPT文件             String pptModelPath =ConfigReadUtil.getInstance().getConfigI ...

  2. 0325img和超链接的学习

    上午学习了cellspacing\cellpadding,img标签以及三种属性,src,alt,title.下午学习了超链接<a></a>,绝对路径与相对路径,锚点链接的使用 ...

  3. 解决Input number 框能够能够输入eeeeee 的问题

    onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" 在input  type="n ...

  4. 使用SVN进行源码管理

    阅读目录: 1.SVN服务端配置 1.1 创建版本库 1.2 创建用户 1.3 设置用户权限 2.SVN客户端使用 2.1 向SVN服务器中导入源码 2.1.1 直接通过TortoiseSVN向SVN ...

  5. select简单示例，有注释

    全部都在代码中: import select import socket import queue """ 简单的select 实现echo server 个人理解: s ...

  6. Eclipse的企业开发时常用快捷键使用、优化配置（博主推荐）

    不多说,直接上干货! 一.简介 eclipse可谓是Java开发界的神器,基本占据了大部分的Java开发市场,而且其官方还对其他语言提供支持,如C++,Ruby,JavaScript等等.为什么使用它 ...

  7. 字典表+委托替代switch解决思路

    参考:http://www.jianshu.com/p/8887b3b3e8ba 代码 namespace 解决Switch { class Program { delegate string fun ...

  8. mongodb慢查询记录

    在 MySQL中,慢查询日志是经常作为我们优化数据库的依据,那在MongoDB中是否有类似的功能呢?答案是肯定的,那就是Mongo Database Profiler.不仅有,而且还有一些比MySQL ...

  9. bzoj 4574: [Zjoi2016]线段树

    Description 小Yuuka遇到了一个题目:有一个序列a_1,a_2,?,a_n,q次操作,每次把一个区间内的数改成区间内的最大值,问 最后每个数是多少.小Yuuka很快地就使用了线段树解决了 ...

  10. C# 如何提取SaveFileDialog的保存路径？

    public TestOne() { InitializeComponent(); SaveFileDialog();//调用打开SaveFileDialog 保存对话框 } #region 保存对话 ...