深入了解css的行高LineHeight属性

1、CSS浏览器什么是行间距？古时候我们是用印刷机来处理文字，印出来的每个字都位于独立的一个块里。行间距，即传说中控制两行文字之间垂直距离的东东。在CSS，line-height被用来控制行与行之间的垂直距离。不过行间距与半行间距还是取决于CSS中的line-height。那么如何来使用line-height？默认状态，浏览器使用1.0-1.2 line-height .这是一个初始值。你可以定义CSS里的line-height属性来覆盖默认值Css代码pline-height:140%;p line-height:140%; 你可以用5种方式来定义line-height:1、line-heigh

2、t可以被定义为normal。Css代码bodyline-height:normal;body line-height:normal; 2、line-height可以被定义为继承p line-height:inherit; 3、line-height可以使用一个百分比的值p line-height:120%; 4、line-height可以被定义为一个长度值（单位px、em等）p line-height:20px; 5、line-height也可以被定义为纯数字（甚至没有单位）p line-height:1.2; 缩写line-height那5种line-height值也可以在font属性里缩写

3、line-height值紧跟着font-size值，使用斜杠隔开/举例来说.值normalbody font:100%/normal arial; helvetica, sans-serif; 值百分比body font:100%/120% arial; helvetica, sans-serif; 值长度body font:100%/20px arial; helvetica, sans-serif; 值纯数字body font:100%/1.2arial; helvetica, sans-serif; 计算line-height有些CSS属性是可继承(inherited)(从层叠的元素里传

4、递下来)这样设计是为了方便开发者于是他们不用为所有后代元素再设置一次例如：color属性是可继承的。如果body被定义了color，那么它会传递给页面里的所有元素对于line-height继承会有一点复杂为了更好的演示line-height的各种用法使用如下的HTML代码 consect etuer adipi scing . Lorem ipsum dolor sit amet . Duis autem vel eum . 这些代码有着如下文档树结构我们同时使用如下CSS（注：文字大小使用像素是为了看起来简单，尽管不推荐这么干！）Css代码bodyfont-size:16px;line-he

5、ight:XXX;h1font-size:32px;pfont-size:16px;#footerfont-size:12px;body font-size:16px; line-height:XXX; h1 font-size:32px;p font-size:16px; #footer font-size:12px;例1：值百分比line-height被设置为百分比（120%）Css代码bodyfont-size:16px;line-height:120%;h1font-size:32px;pfont-size:16px;#footerfont-size:12px;body font-si

6、ze:16px; line-height:120%; h1 font-size:32px;p font-size:16px;#footer font-size:12px;line-height的百分比（120%）和body的文字大小（16px）被用来计算值（16px*120%=19.2px）这个计算出来的值会被层叠下去的元素所继承所有继承下来的元素会忽略本身的font-size，而使用相同的，计算出来的line-height.line-height不会随着相关的font-size做相应的比例缩放例2、值：长度line-height被设置成一个长度值（20px）Css代码bodyfont-siz

7、e:16px;line-height:20px;h1font-size:32px;pfont-size:16px;#footerfont-size:12px;body font-size:16px; line-height:20px; h1 font-size:32px;p font-size:16px;#footer font-size:12px;长度值20px会被后代继承所有继承下来的元素会忽略本身的font-size，而使用相同的，继承的line-heightline-height还是不会随着相关的font-size做相应的比例缩放例3、值：normalline-height被设置为no

8、rmal（约为1.2）Css代码bodyfont-size:16px;line-height:normal;h1font-size:32px;pfont-size:16px;#footerfont-size:12px;body font-size:16px; line-height:normal; h1 font-size:32px;p font-size:16px;#footer font-size:12px;在本例中使用继承的计算出来的值还不如用值normal，浏览器在解释normal的时候会有细微差别。现在所有继承下来的元素不会忽略本身的font-size，而使用基于font-size算

9、出来的line-height现在，line-height会随着相关的font-size做相应的比例放缩但是，如果你既想要normal的灵活，又想要设置一个自定义的值这时候就得指望值：纯数字例4、值：纯数字line-height被设置为值：纯数字（1.5）Css代码bodyfont-size:16px;line-height:1.5;h1font-size:32px;pfont-size:16px;#footerfont-size:12px;body font-size:16px; line-height:1.5; h1 font-size:32px;p font-size:16px;#foot

10、er font-size:12px;在本例中用继承的计算后的值，倒不如用系数（1.5）现在所有继承下来的元素使用基于font-size算出来的line-height再一次，line-height会随着相关的font-size做相应的比例缩放那么哪一种是最好的方案？一般来说，设置行高为值：纯数字是最理想的方式。因为其会随着对应的font-size而放缩在多种情况下，很难确定一个完美的line-height，但无论如何，保守估计标题是没有段落那么的需要自适应line-height举例来说，所有内容被定义为1.5，标题被定义为1.2.body line-height:1.5 h1,h2,h3,h4,

11、h5,h6 line-height:1.2万维网内容可存取性指南（WCAG）2.0规定“段落中的行距至少要1.5倍”，这意味着如果要达到AAA等级，行高应为1.5.深入line-height为了深入了解line-height,我们需要先来了解 CSS boxes的各种类型我们从一段简单的HTML代码开始 The emphasis element is defined as inline. 这些代码在大多数浏览器下应该会被渲染成下图这个例子中涉及到4个boxesbox类型1：containing boxes这个例子中段落就是一种containing boxes，它包含了其他boxes。box类型

12、2：inline boxes在段落内有一系列的inline boxesinline boxes 不会让内容显示成块形式，而是排成一行。emphasis 元素就是一种inline boxes其他没有特别标签的box被称为拟名inline boxesbox类型3：line boxesinline boxes在containing boxes里一个接一个组成了line boxesbox类型4：content areacontent area是围绕着文字的看不见的一种box，他的高取决于font-sizeinline boxes与inline-height行高基于一则简单小配方，应用在inline b

13、oxes上。1.line-height和font-size的差别可以从下面的例子中看出例：font-size:16px;line-height:20px;差别：4px（即行间距）2.拆分行间距，来创建一个半行间距4px行间距/2 = 2px半行间距3.半行间距会被应用在content area 的顶部和底部但有的时候情况会有一点点的复杂content box包裹着line box，而半行间距位于content box 的上部和下部。然而有时候inline box 会小于content area！举例来说，如果line-height 小于 font-size，inline box 会优先于行高例

14、：font-size:16px;line-height:12px;inline box 高度：12pxcontent area 会溢出，inline box的顶部和底部半行高会折叠起来以保证inline box的高度line box的一些注解line box的高度取决于它内部最高的inline box （或被替换的元素）最高的inline box 可以是匿名inline box也是可以增加line-height后的inline box360docimg_42_还可以是更大font-size的inline box360docimg_43_或存在上标或下标360docimg_44_或，甚至存在可替换元素，例如一张图360docimg_45_line box在containing box宽度内靠着彼此的颈部堆积360docimg_46_最后，总结上标和下标上标和下标有时候会强制影响