CSS深入理解之line-height 笔记

line-height 与行内框盒子模型

line-height 表示两行基线之间的距离。

所有内联元素的样式表现都与行内框盒子模型有关。

行内框盒子模型

1. “内容区域(content area)”，是一种围绕文字看不见的盒子。“内容区域”的大小与font-size的大小有关。

2. “内联盒子(inline boxes)”，不会让内容成块显示，而是排成一行。如果外部含inline水平的标签(span,a,em等)，则属于“内联盒子”，如果只有文字，则属于“匿名内联盒子”。

3. “行框盒子(line boxes)”，每一行就是一个“行框盒子”，每个“行框盒子”又是由一个个“内联盒子组成”。

4. “包含盒子(containing box)”，即基本的 block 盒子，由一行行“行框盒子”组成，如<p>标签所在的就是“包含盒子”。

line-height各类属性值

• normal
  默认属性值，不同浏览器不同，且与元素字体关联。
• <number>
  使用数值，如1.5，与当前元素的font-size值相乘计算。
• <length>
  使用具体的长度值，如1.5em/20px等
• <percent>
  使用百分比，如150%。
• inherit
  继承，input等元素默认行高是normal，使用inherit可以让文本框样式更可控。

line-height: 1.5|150%|1.5em 的区别

在计算值上没有差别都是和font-size值相乘。但在应用元素上有差别：

• line-height: 1.5 所有可继承元素根据自身font-size重计算行高；

• line-height: 150%/1.5em 当前元素根据font-size计算行高，继承给下面的子元素，子元素不再进行计算。

body 全局设置数值行高最佳实践

body{font-size:14px;line-height:?}

匹配 20px 方便计算。line-height = 20px/14px =1.42857...

body{font-size:14px;line-height:1.4286;} /*兼容chrome 向上取整*/

line-height的高度机理

line-height由于其继承性，影响无处不在，即使单行文本也不例外。

内联盒子的高度是由line-height决定的，通过改变行间距的大小，保证了高度正好等于行高，内容区域高度 + 行间距 = line-height。但高度的表现不是line-height，而是内容区域和行间距，所以为什么只有一行也有line-height。

1. 内容区域高度只与font-size及font-family有关，与line-height无关。

2. 在宋体字体下，内容区域高度等于font-size值，所以font-size + 行间距 = line-height。

行框盒子(line boxes)里有多个不同行高的内联盒子时

分两种情况，如下图所示：

• 第一种情况

  
  

• 第二种情况

  
  

行框盒子(line boxes)里混入 inline-block的元素(如图片)

消除图片底部间隙的方法：

1. 图片块状化——无基线对齐

img { display: block; }

2. 图片底线对齐

img { vertical-align: bottom; }

3. 行高足够小——基线位置上移

.box { line-height: 0; }

line-height 实际应用

图片水平垂直居中

.box { line-height: 300px; text-align: center; }
.box > img { vertical-align:middle; } /* middle 基线往上1/2x高度*/

多行文本垂直水平居中

.box { line-height: 250px; text-align: center; }
.box > .text { 
    display:inline-block; line-height: normal; 
    text-align: left; vertical-align: middle; 
}