[toc]
## line-height定義
line-height行高的定義就是指兩基線的間距,
也是純文本時文本所撐開的父級容器高度(`content-area/em-box`+`上下半行間距`)。
## line-height的組成

### em-box與content-area
em就是1em那個的em,1em等同于一個font-size大小。
需要注意的是可見的**文字圖形區域**并**不一定**就等同于`em-box`。
對于漢字,1個漢字通常小于em-box(更小于content-area)。
對于英文,一些帶尾巴的英文字符q或則g,其小尾巴通常在em-box范圍外(但仍在content-area之內)。
**另外em-box(只受font-size影響)不等同于content-area(受font-size和font-family影響)**
(通常內容區域高度要比em-box更高一些?)
**但,** 當字體為宋體這種方方正正的字體時,內容區域和em-box可以看做是等價的(即被鼠標select后背景變藍的區域)
>示例

(白色區域為內容區域,黃色為半行間距,可以發現宋體的內容區域大小等于em-box,即font-size)
但我們改變字體

(font-size不再等于content-area,content-area比font-size大)
可以發現行間距是一個墻頭草,在同一個行高下,即使font-size相同,行間距也可能是不一樣大小的。
行間距的作用就是保證內容區域+行間距正好等于行高

### 半行間距
`行距=line-height-font-size`
而半行間距即是其一半
平均分為兩份后,再追加到em-box的頂部和底部就形成了行高。
>[info] 半行間距可以是負值,直接表現即是兩行文字可以交錯。
>
## line-height不會影響替換元素
## line-height與垂直居中
行高之所以可以實現垂直居中,原因在于CSS中**行間距的上下等分機制**,So,換句話說,如果過行距的添加規則是在文字的上方或則下方,則行高是無法讓文字垂直居中的。
## line-height的屬性值
normal 這個值的實際值是不固定的,不是1,而是根據字體變化而變化的
。。。
## line-height的大值特性
```
.box{
line-height:96px;
}
.box span{
line-height:20px;
}
```
```
.box{
line-height:20px;
}
.box span{
line-height:96px;
}
```
最終box的高度都為96px
## lineHeight頂點位置與border-box
lineHegiht是從元素的content-box上邊開始計算的
故如果設置border-box,常常就會出現下面這種情況

因為height,line-height一樣,但設置了padding,故文字非但沒有居中還下沉了(因為lineHeight頂點從content-box開始計算)
- 空白目錄
- 未處理
- webpack中的css模塊化
- CSS預處理器
- 效果
- 元素裝飾與美化
- 顏色
- checkbox
- img
- background
- clip-path
- 字體
- 文本控制
- text-indent
- letter-spacing
- word-spacing
- word-break和word-wrap
- white-space
- text-align
- text-decoration
- text-transform
- first-letter
- first-line
- 有關CSS百分單位的那些奇葩事兒
- 破壞性、包裹性、塊狀化
- 強大的absolute
- padding
- relative
- 繼承性
- fixed
- float
- BFC
- z-index
- overflow
- clip
- 最佳可訪問性隱藏
- 關于scrollHeight/Width
- 包含塊
- margin
- 布局系統
- 雜
- Flex
- Grid
- 自定義布局系統
- gutter實現思路
- 選擇器
- 偽元素和偽類
- css3
- appearance
- CSS2.1
- tmp
- 未定義行為
- 焦點元素
- outline輪廓
- 替換元素
- 盒子模型
- 塊級元素/盒子
- 標記盒子
- 容器盒子(內在盒子)
- 內聯元素/盒子
- 字母X
- line-height
- vertical-align
- font-size
- 內聯元素盒子模型新解
- line-height定義
- line-height與行內框盒子模型
- line-height與內聯元素的高度機制
- line-height值
- line-height與圖片
- vertical-align支持的屬性值及組成
- vertical-align起作用前提
- vertical-align與圖片
- vertical-align與line-height
- vertical-align前后不一的行為表現
- vertical-align實際應用
- line-height與height
- width/height與auto
- 最小內容寬度
- 最大內容寬度
- min/max-width/height注意事項
- 流:外部尺寸與內部尺寸
- 流體布局下的寬度分離原則
- height:auto
- 瀏覽器渲染原理
- 移動端