line-height(行高)和vertical-align(基線對齊)

行高（line-height）🚩

line-height 屬性是指文本行基線之間的距離，用於設置多行元素的空間量，如多行文本的間距。對於塊級元素，它指定元素行盒（line boxes）的最小高度。

行高 line-height  實際上只影響行內元素和其他行內內容，而不會直接影響塊級元素，也可以為一個塊級元素設置line-height，但這個值只是應用到塊級元素的內聯內容時才會有影響。

在這里先列舉幾個概念：

   ◾ 行高：一行文字的最小高度

   ◾ 行間距：兩行文字之間的距離(也就是文字上邊和下邊的留白部分)

   ◾ 半行間距：1/2行間距

計算行高：

   ◾ 行高 = 字體大小 + 行間距

   ◾ 行高 = 行高倍數字 * 字體大小(倍數值與字體大小相乘必須為整數)

這里直接上圖，便於理解什么是行高😁

設置文字在盒子中垂直居中，只需要將line-height的值設置為盒子高度~

語法：

p{
  line-height: normal;/* 不設置行高 */
  line-height: 3.5;/*值為數值*/
  line-height: 5em;/*長度*/
  line-height: 34%;/*值為百分比*/
}

• normal：取決於客戶端，桌面瀏覽器（包括Firefox）使用默認值，約為1.2，這取決於元素的 font-family 。
• 數值: 是這個無單位數字乘以該元素的字體大小（大多數情況下，這是設置line-height的推薦方法，不會在繼承時產生不確定的結果。）
• 長度: 以 em 為單位的值可能會產生不確定的結果
• 百分比: 與元素自身的字體大小有關。 計算值是給定的百分比值乘以元素計算出的字體大小（百分比值可能會帶來不確定的結果）
  

細心地小伙伴已經發現，在上面我提到設置line-height時推薦使用無單位數值！！

為什么推薦無單位數值？

直接上示例，一看就明白了~

<div class="box green">
    <h1>Avoid unexpected results by using unitless line-height.</h1>
    length and percentage line-heights have poor inheritance behavior ...
</div>

<div class="box red">
    <h1>Avoid unexpected results by using unitless line-height.</h1>
    length and percentage line-heights have poor inheritance behavior ...
</div>

.green {
    line-height: 1.1;
    border: solid limegreen;
}

.red {
    line-height: 1.1em;
    border: solid red;
}

h1 {
    font-size: 30px;
}

.box {
    width: 18em;
    display: inline-block;
    vertical-align: top;
    font-size: 15px;
}

效果如下：

 如果文字的大小要隨頁面的縮放而變化，請使用無單位的值，以確保行高也會等比例縮放。

基線對齊（vartical-align）🚩

vertical-align 用來指定行內元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。

vertical-align屬性應用場景：

◾ （1）使行內元素盒模型與其行內元素容器垂直對齊。例如，用於垂直對齊一行文本內的圖片

◾ （2）垂直對齊表格單元內容

注意：vertical-align 只對行內元素、表格單元格元素生效：不能用它垂直對齊塊級元素！

取值：

• vartical-align：top 文字頂部對齊(包括半行間距)

• vartical-align：text-top 文字頂部對齊

• vartical-align：baseline 默認對齊方式

• vartical-align：text-bottom 文字底部對齊

• vartical-align：bottom 文字底部對齊(包括半行間距)

• vertical-align：sub 使元素的基線與父元素的下標基線對齊

• vertical-align：super 使元素的基線與父元素的上標基線對齊

• vertical-align：middle 使元素的中部與父元素的基線加上父元素x-height（譯注：x高度）的一半對齊

• vertical-align：(+-n)px 元素相對於基線上下偏移npx

• vertical-align：x% 相對於元素的line-height值

• vertical-align:：inherit 從父元素繼承vertical-align屬性的值

通過下面這兩張圖可以更好地理解各個屬性值的具體含義！

  

另外，當在表格中使用基線對齊時：

baseline (以及 sub, super, text-top, text-bottom, <length>, <percentage>)

使單元格的基線，與該行中所有以基線對齊的其它單元格的基線對齊。

top：

使單元格內邊距的上邊緣與該行頂部對齊。

middle：

使單元格內邊距盒模型在該行內居中對齊。

bottom：

使單元格內邊距的下邊緣與該行底部對齊。

注意：可以是負數。