實作 - HTML Playground
實作 Blog 文章
工具 - VSCODE
觀念 - Box Sizing (盒子模型)
觀念 - Block vs Inline Display屬性
- Padding, Margin, Border
- Border Box vs Content Box
- Box 裡面的間距
- Box 跟 Box 的間距
- Box 外面的間距
邊界
Padding , Border 都算在Box 外面
Padding , Border 都算在Box 裡面
- 以前只有content box， 算距離非常辛苦
-之後才有border-box
- 所以在開始寫CSS都會重設讓所有元件的預設是border-box
- 寬度佔全部
-換行
- 寬度佔Box 的寬度
- 不會換行
ex. span, img, a, b, strong,
ex. div, section, nav, h1, footer