[toc]
## inherit
## 線類
baseline、top、middle、bottom
>baseline
>

如果是替換元素的基線,就等同于其底線
另外基線對齊,會導致行框(對,是行框)下沉
>bottom(top):
1. inline/inline-block元素:元素底部和整行的底部對齊
2. table-cell元素:單元格底padding邊緣和表格行的底部對齊
> middle
1. inline/inline-block:元素的垂直中心點和父元素基線上1/2x-height對齊
2. table-cell:單元格填充盒子相對于外面的表格行居中對齊

font-size越大,文字下沉越明顯(微軟雅黑更明顯)
解決辦法:
1. font-size設為0,此時各種線都合為一條
2. 或則一再弄一個空的inline-block span

## 文本類
text-top、text-bottom
text-top:盒子的頂部和父級content-area的頂部對齊
bottom:盒子的底部和父級content-area的底部對齊



## 上標下標類
sub、super
### html中的上標下標
`<sup>`:等于vertical-align:super
`<sub>`:等于vertical-align:sub
用了上標下標的字體為原來的75%左右


## 數值百分比類
20px、2em、20%
數值(相對于基線)和百分比(相對于行高計算)
1. 都帶數字
2. 都支持負值 (margin、letter-spacing、word-spacing、vertical-align)
3. 行為表現一致
## vertical-align與前后的元素沒有關系只和父級有關系

- 空白目錄
- 未處理
- 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
- 瀏覽器渲染原理
- 移動端