[TOC]
## **介紹**
> 所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。
> CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
> 盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
## **寬度和高度：**
~~~
width：10px或者10cm；
height：10px或者10cm；
~~~
## **內邊距：padding**
內邊距屬性：
~~~
padding：26px或者26cm
padding-top：
padding-bottom：
padding-right：
padding-left：
~~~
## **外邊距：margin**
同理外邊距也有：
~~~
margin-left：
margin-right:
margin_top:
margin-bottom：
~~~
## **邊框：border**
~~~
border-color：red或者rgb()或者#fffabc
border-width：thin,medium,thick,1px,2px···6px
border-redius:1.1em或1.2px（邊框圓角）
~~~
**border-style：**
> 可能的值：
> none ------------------定義無邊框。
> hidden --------------與 "none" 相同。不過應用于表時除外，對于表，hidden 用于解決邊框沖突。
> dotted --------------定義點狀邊框。在大多數瀏覽器中呈現為實線。
> dashed --------------定義虛線。在大多數瀏覽器中呈現為實線。
> solid --------------------定義實線。
> double ---------------定義雙線。雙線的寬度等于 border-width 的值。
> groove ---------------定義 3D 凹槽邊框。其效果取決于 border-color 的值。
> ridge -------------------定義 3D 壟狀邊框。其效果取決于 border-color 的值。
> inset -------------------定義 3D inset 邊框。其效果取決于 border-color 的值。
> outset ---------------定義 3D outset 邊框。其效果取決于 border-color 的值。
> inherit ----------------規定應該從父元素繼承邊框樣式。
###### **例子 1**
`border-style:dotted solid double dashed; `
*上邊框是點狀
右邊框是實線
下邊框是雙線
左邊框是虛線*
###### **例子 2**
`border-style:dotted solid double;`
*上邊框是點狀
右邊框和左邊框是實線
下邊框是雙線*
#### **但是一般直接這樣寫：**
`border：1px solid pink;`
## **背景：**
~~~
background-color：red;
background-img：url("image_path或者直接外鏈圖片地址")
background-repeat:
repeat 背景圖像將向垂直和水平方向重復。這是默認
repeat-x 只有水平位置會重復背景圖像
repeat-y 只有垂直位置會重復背景圖像
no-repeat background-image不會重復
inherit 指定background-repea屬性設置應該從父元素繼承
background-position:
left top 圖像在左上
left center 圖像在左中
left bottom 圖像在左下
right top 圖像在右上
right center 圖像在右中
right bottom 圖像在右下
center top
center center
center bottom
x% y% 第一個值是水平位置，第二個值是垂直。左上角是0％0％。右下角是100％100％。如果僅指定了一個值，其他值將是50％。 。默認值為：0％0％
inherit 指定background-position屬性設置應該從父元素繼承
~~~
## **指定邊框**
以上只是針對全部的邊框，而你可以指定邊框，指定的邊框同樣有以上屬性，指定邊框方法：
~~~
border-top-left:
border-top-right:
border-bottom-right:
border-bottom-left:
~~~
