【曾以為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
哪個部分分別是什么，一看圖就知道了：
補充一點：一個containing area(containing box, means它里面包含著其他的boxes)也相當于一個block box。
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"
決定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 ??.
