[toc]
## vertical-align屬性值分類
線類:baseline、top、middle、bottom
文本類:text-top、text-bottom
上標下標類:sub、super
數值百分比類:20px、2em、20%等
### 數值百分類
數值百分比類其實是兩個類,數值類 和 百分比類。這里之所以把它們合在一起歸為一類,是因為它們的行為表現是一致的。
都是**相對于**基線往上或往下偏移。
**正值往上偏移,負值往下偏移。**
其中,百分比類的百分比是相對于`line-height`計算的。
## vertical-align與基線
`vertical-align:baseline`等同于`vertical-align:0`
基線的定義是字母x的下邊緣
**但**對于**替換元素**,基線往往是元素本身的下邊緣。
### inline-block與基線
設置為`inline-block`的元素的基線不同于上面的任何一個,它分分為兩種情況
當該`inline-block`元素里面**沒有內聯**元素,或則overflow不是visible,則該元素的基線就是其**margin**底邊緣;否則其基線就是元素里面最后一行內聯元素的基線。
## vertical-align:top和bttom
分為兩種情況
- 內聯元素:
元素底部和當前行框盒子的頂部對齊
- table-cell元素:
元素底padding邊緣和表格行的頂部對齊
## vertical-align:middle
也分為兩種情況

- 內聯元素:
元素的垂直中心點和行框盒子基線往上1/2x-height處對齊
- table-cell元素:
單元格填充盒子相對于外面的表格行居中對齊
## vertical-align:text-top/text-bottom
盒子頂部和父級內容區域的頂部/底部對齊
## vertical-align作用的前提
vertical-align其作用是有前提條件的,這個前提條件就是:只能應用于**內聯元素**以及display值為**table-cell**的元素
具體為
display計算值為inline、inline-block、inline-table、table-cell
注意:即使是替換元素也是有效的(不像`line-height`)
### 浮動和絕對定位會讓元素塊狀化
浮動和絕對定位會讓元素塊狀化,意思是會改變它的display值,從而導致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
- 瀏覽器渲染原理
- 移動端