# 盒子模型
[TOC]
當你的瀏覽器展現一個元素時，這個元素會占據一定的空間。這個空間由四部分組成。
* **Margin(外邊距)**\- 清除邊框外的區域，外邊距是透明的。
* **Border(邊框)**\- 圍繞在內邊距和內容外的邊框。
* **Padding(內邊距)**\- 清除內容周圍的區域，內邊距是透明的。
* **Content(內容)**\- 盒子的內容，顯示文本和圖像。
## 邊框
用 `border` 屬性給元素四周指定統一的邊框。在屬性值中指定邊框的寬度（通常是以顯示到屏幕上的像素為單位）， 樣式， 還有顏色。
樣式包括：
你也可以通過設置樣式為 `none` 或 `hidden` 來明確地移除邊框。
如果一次只指定某一個方向的邊框，就用屬性：`border-top，border-right， border-bottom，border-left`。
### 邊框樣式
使用`border-style`屬性設置邊框樣式
~~~css
div {
/*border-top-style:solid;*/
border-style:solid;
}
~~~
>[info] * 指定一個邊框樣式時，它將會給元素四周加上邊框（上、右、下、左）
> * 指定兩個邊框樣式時，第一個邊框樣式會作用于頂部和底部，第二個邊框樣式將會作用于右邊和左邊。
> * 指定四個邊框樣式時，這四個值依次指定上右下左四個方向的值
>
### 邊框寬度
`border-width`屬性設置邊框寬度
~~~css
div {
border-style:solid;
border-width:2px;
}
~~~
>[info]同樣的`border-width`也有一到四個值用法同`border-style`
### 邊框顏色
`border-color`設置邊框顏色
~~~css
div {
border-style:solid;
border-width:2px;
border-color:lightblue;
}
~~~
>[info]同樣的`border-color`也有一到四個值用法同`border-style`
### 簡寫屬性
border屬性設置邊框的寬度，樣式，顏色。
~~~css
div {
border:2px solid lightblue;
}
~~~
## 外邊距和內邊距
使用外邊距和內邊距調整元素的位置，并在其周圍創建空間。用`margin`屬性或者 `padding` 屬性分別設置外邊距和內邊距的寬度。
* 如果你指定一個寬度，它將會作用于元素四周（上、右、下、左）。
* 如果你指定兩個寬度， 第一個寬度會作用于頂部和底部，第二個寬度作用于右邊和左邊。
* 你也可以按照順序指定四個寬度： 上、右、下、左。
下面的規則通過給元素四周設置紅色邊框，標記出了類名為 `remark` 的段落元素。
```css
p.remark {
border: 2px solid red;
padding: 4px;
margin-left: 24px;
}
```
結果如下：
> 注意：
>
> * 外邊距margin可以為負，內邊距不可以為負。
> * 行內元素設置上下邊距不影響行高。
> * 邊框是可見的，邊距是不可見的，只能看到對其他元素的影響。
### 簡寫屬性：
我們可以根據規定順序，簡寫屬性：
* 設置兩個屬性值，那么第一個值表示上下邊框的屬性，第二個值表示左右邊框的屬性。
* 設置三個屬性值，第一個值表示上邊框屬性，第二個值表示左右邊框屬性，第三個值表示下邊框屬性。
* 設置四個值，一次表示上右下左邊框的屬性。
例如：
```css
h1{margin:10px 0px 15px 5px}
```
## 行內元素的盒子模型
* 行內元素的盒子模型只能得到一行高度的空間，行高由`line-height`屬性決定，沒有設置該屬性則為內容默認高度。
> 如果設置上下邊框或者邊距，會導致盒子高度超過行高，盒子上下部分將會與其他元素重疊。這就是行內元素不可設置上下邊距的原因。
* 綜上所述，不推薦對行內元素設置盒子屬性，一般先用`display`屬性設置內聯元素為塊級元素顯示，再設置盒子屬性。
## 元素盒子屬性的默認值
* 大多HTML元素的盒子屬性默認值都為0。
* 少部分HTML元素盒子屬性存在默認值，如：`body`,`p`,`ul`,`li`,`form`標簽等，因此我們在需要的時候可以先初始化他們的屬性為0。
