[toc]
## font-size和line-height和vetical-align
`line-height`的**數值**屬性值**和百分比**值屬性值都是**相對**于`font-size`計算的
而`vertical-align`的**百分比**值屬性值又是**相對**于`line-height`計算的。
## font-size值
### ex
>font-size越大,ex越大
在字母X一節中已經詳細說過,ex就是字母x的高度(font-size一般會大于ex,因為整個字母x是處于基線和中線之間的,是一個font-size的中間部位)
故常用來行內居中
### em和rem
>1em的計算值等同于當前元素所在的font-size計算值
em指一個字模的高度,
什么是字模的高度?其一般由`M`的**寬度**決定(寬高相同)
所以叫em(ex和x相關,em和m相關)
之所以是em,是因為英文26個字母中方方正正不算多,M是一個
So,方方正正的漢字,每一個都正好是一個em
160px寬度剛好能放10個16px的漢字
但160px的高度并不一定可以疊10個16px的漢字,因為line-height不一定等于1
>[danger] 需要注意的是如果我么將當前元素的font-size修改為xem,那么在當前元素設置其它屬性值時如果也使用了em,那么這個1em的基準是我們修改后xem,而不再是1em
>
比如下面這樣,margin-left的計算結果會是1.2em,而不是0.6em
```
div{
font-size:2em;
margin-left:0.6em;
}
```
so,如果想要保持一致,推薦使用`rem`,統一根據html元素的font-size計算
但em并不是一無是處,
如果你想字號變大時,上下間距也變大,那么em可能更合適。
#### em與text-indent
從下面的示例中我們可以發現,一個字母的寬度并**不一定**等于**1 font-size**

## 625%
font-size:62.5% 計算值為 `16px*0.625=10px`,但是在chrome(中文版)下低于12px會強制為14px,故可提升10倍進行計算基準(100px)。
## font-size:0
雖然低于12px會被強制為14px,但為0時是會隱藏文字的。
- 空白目錄
- 未處理
- 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
- 瀏覽器渲染原理
- 移動端