Appearance
大小與空白
Sizing
| 高 class | css 效果 | 寬 class | css 效果 |
|---|---|---|---|
| h-auto | height: auto | w-auto | width: auto |
| h-screen | height: 100dvh | - | - |
| h-0 | height: 0 | w-0 | width: 0 |
| h-25 | height: 25% | w-25 | width: 25% |
| h-50 | height: 50% | w-50 | width: 50% |
| h-75 | height: 75% | w-75 | width: 75% |
| h-100 | height: 100% | w-100 | width: 100% |
練習
- 設定長寬是 flex 容器的 50%。 練習
邊距(margin)/填充(padding)
方向
| code | 影響方向 | |
|---|---|---|
| t | top | 上 |
| b | bottom | 下 |
| l | left | 左 |
| r | right | 右 |
| s | start | 開始的方向(LTR: 左；RTL: 右) |
| e | end | 結束的方向(LTR: 右；RTL: 左 ) |
| x | x | x 軸方向(上下) |
| y | y | y 軸方向(左右) |
| a | all | 所有方向(上下左右) |