# 盒模型（box modal）
###### tags:`css`
## CSS 盒模型（box model）
Box Model 主要由四個部分主成，由內而外分別是 Content ( 內容 )、Padding ( 內邊距 )、Border ( 邊框 ) 和 Margin ( 外邊距 )。
單位可以設定為像素 px、百分比 % 或 em、rem 等。
四個值：上-top、右-right、下-bottom、左-left
三個值：上、左右、下
兩個值：上下、左右
一個值：上下左右
border-radius:左上右下、右上左下;
要特別注意:
Margin邊框之外空白的距離
如果是 inline 元素，margin 的垂直方向 ( 上、下 ) 沒有效果。
Border邊框
會受到 box-sizing 影響 ( 設定 border-box 時表示邊框包含在寬度內 )。
Padding元素跟邊框的距離
會受到 box-sizing 影響 ( 設定 border-box 時表示內邊距包含在寬度內 )。

---
## box-sizing盒模型
box-sizing:content-box; //padding，border會往外加 (預設)
box-sizing:border-box; //padding，border會往內縮(不會跑版)