【曾以为CSS牛逼了，然而并没有系列】
---知道line-height是干啥的不？
---知道啊，设置行高的！
---还有吗?和height有什么关系？
---额😊...
周末翻译了两篇国外讲line-height的ppt(运营妹子们叫它怕怕提)：在这里，和这里，总结一下里面的内容吧。
嗯，宝宝以前以为line-height就是个设置行高的、跟height相等的话能够让文字垂直居中。非也哉！line-height其实是有内涵的...
line-height的几个大方面的作用
- 增加代码的可读性和可理解性(easier to read and comprehend)
- 控制（尤其是多列布局的）垂直分布(control the vertical rhythm)
- inline元素的垂直居中(centre inline content vertically)
语法：
<'line-height'> = normal | <number> | <length> | <percentage> | inherit
line-height的使用
normal和inherit
normal的话，在被大环境改造之后，"做自己就好"。换句话说，如果浏览器默认行高就是*1.2倍的文字大小。比如h1{ font-size: 20px}，那么h1的行高就是20*1.2 = 24px
inherit就是继承父元素，暂时没什么可说的。
百分比
body {
font-size: 16px;
line-height: 120%;
}
h1 { font-size: 32px; }
p { font-size: 16px; }
footer { font-size: 12px; }
| element | original value | calculated value | result |
|---|---|---|---|
| body | 16px 120% | 16 x 120% | 19.2px |
| h1 | 32px | inherits calculated value | 19.2px |
| p | 16px | inherits calculated value | 19.2px |
| footer | 12px | inherits calculated value | 19.2px |
定长
body {
font-size: 16px;
line-height: 20px;
}
h1 { font-size: 32px; }
p { font-size: 16px; }
footer { font-size: 12px; }
| element | original value | calculated value | result |
|---|---|---|---|
| body | 16px | 20px | 20px |
| h1 | 32px | inherits 20px | 20px |
| p | 16px | inherits 20px | 20px |
| footer | 12px | inherits 20px | 20px |
数值
body {
font-size: 16px;
line-height: 1.2;
}
h1 { font-size: 32px; }
p { font-size: 16px; }
footer { font-size: 12px; }
| element | original value | calculated value | result |
|---|---|---|---|
| body | 16px 1.2 | 16 x 1.2 | = 19.2px |
| h1 | 32px factor of 1.2 | 32 x 1.2 | = 38.4px |
| p | 16px factor of 1.2 | 16 x 1.2 | = 19.2px |
| footer | 12px factor of 1.2 | 12 x 1.2 | = 14.4px |
简写
font : <font-size>/<line-height> || <font-weight> || <font-family>...
也就是说，定义font的时候，可以"顺便"把line-height和其他font的属性一起定义，既规定了文字形式，又规定了相对于文字的行高。
百分比percentage、定长length、数值number的比较
其实可以看出，用百分比和定值的话，不同的元素行高相同，完全继承了body的行高，so pass out！但是 number values allows us to set specific line-heights for different types of elements. 其实是和normal一样的效果。so，number value胜出！（此处有掌声👏）
CSS boxed组成
深入了解line-height之前，弄清楚CSS boxes的四部分组成（跟inline/block/inline-block没关系），我们只看一个inline元素：
<p>
The <em>emphasis</em> element is defined as “inline”.
</p>
四个组成部分分别是:
- containing area
- content area
- inline boxes
- line boxes
哪个部分分别是什么，一看图就知道了：
img 1-1
补充一点：一个containing area(containing box, means它里面包含着其他的boxes)也相当于一个block box。
img 1-2
line-height的组成
从图中可以看到，containing area和content area之间是有空隙的(leading)，这里面我设置了line-height : 3，所以很明显能看得到空隙，上下各占一半(half-leading)，上面的叫top half-leading，下面的叫bottom half-leading。
-
当line-height > font-size的时候，top、bottom各占leading的一半，content area会居中：
img 2-1
- 当line-height < font-size的时候，top、bottom各占line-height的一半，一起撑起line-height，这个时候line-height依然是居中的，只不过是相对content area来居中，因为content area此时等于font-size，会超出line-height的范围
"The content area then pokes out the top and bottom of the inline box.
The half-leading collapses together to form the inline box height"
img 2-2
决定line-height的因素
line-height是由line box的高度决定的，而由img 1-1我们能够看到，一个line box是由一个或多个inline boxes的高度决定的。确切说，是由这些inline boxes里面最高的那个inline box决定的。什么时候会产生最高的inline box呢？
- Increased line-height（某个非匿名的inline box单独设置了line-height）
- larger font-size (某个单词单独设置了比较大的字号)
- superscript or subscript (上角标或下角标，解决办法 line-height:0)
-
replaced element (image、video这种)
（之前美团一面的那位兄台问我，为什么image和文字处于一行（image高于文字），文字上面会有空缺。现在宝宝知道了，image是和文字的baseline底部对齐的，而image会撑起那行line box的高度，说的就是这一点，他问我image是什么属性的，我竟然说成了inline-block，当时想着它能设置宽高...然而image实际上是inline的啊！！只不过它比较特殊，是一个replaced element！！！啊！啊！啊！）
others about line-height
不设置高度的情况下，div实际上是可以由line-height撑起来的，不论font-size多么大都没用，line-height为0的话，整个垮掉！这个时候高度是怎么算的：line-height-font-size = -30px, top-leading=bottom-leading=-30/2=-15。height=top-leading+font-size+bottom-leading=0
相反的，如果font-size为零，而line-height有值的话，高度就能出来。
看图就知道了。
deep-dive讲了一些理想line-height的高度，说是适合人阅读什么的，比如
h1, h2, h3, h4, h5, h6{
line-height: 1.1;
}
li{
line-height: 1.5;
margin-bottom: 0.5rem;
}
再比如large and mid screen上，line-height在1.4到1.6之间是ideal的；而在small screen上，line-height在1.3到1.5之间是ideal的。
There's nothing definitely special in the "deep-dive" part, just some proposals to design the height of line-height, but sure there're more interesting things about line-height ,and next time let's talk about its closely friend ------vertical-align, and their relationship 😆.
网友评论