所有HTML元素可以看作盒子荔睹，在CSS中狸演，"box model"這一術語是用來設計和布局時使用。
CSS盒模型本質上是一個盒子僻他，封裝周圍的HTML元素严沥，它包括：邊距，邊框中姜，填充消玄，和實際內容跟伏。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖片說明了盒子模型(Box Model)：
不同部分的說明：
Margin(外邊距) - 清除邊框外的區(qū)域翩瓜，外邊距是透明的受扳。
Border(邊框) - 圍繞在內邊距和內容外的邊框。
Padding(內邊距) - 清除內容周圍的區(qū)域兔跌，內邊距是透明的勘高。
Content(內容) - 盒子的內容，顯示文本和圖像坟桅。
最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
CSS邊框
1.樣式
border-style屬性用來定義邊框的樣式
none: 默認無邊框
dotted:定義一個點線邊框
dashed: 定義一個虛線邊框
solid: 定義實線邊框
double: 定義兩個邊框华望。 兩個邊框的寬度和 border-width 的值相同
groove: 定義3D溝槽邊框。效果取決于邊框的顏色值
ridge: 定義3D脊邊框仅乓。效果取決于邊框的顏色值
inset:定義一個3D的嵌入邊框赖舟。效果取決于邊框的顏色值
outset: 定義一個3D突出邊框。 效果取決于邊框的顏色值
2.寬度
您可以通過 border-width 屬性為邊框指定寬度夸楣。
為邊框指定寬度有兩種方法：可以指定長度值宾抓，比如 2px 或 0.1em(單位為 px, pt, cm, em 等)，或者使用 3 個關鍵字之一豫喧，它們分別是 thick 石洗、medium（默認值） 和 thin。
注意：CSS 沒有定義 3 個關鍵字的具體寬度紧显，所以一個用戶可能把 thick 讲衫、medium 和 thin 分別設置為等于 5px、3px 和 2px孵班，而另一個用戶則分別設置為 3px涉兽、2px 和 1px。
3.邊框顏色
border-color屬性用于設置邊框的顏色重父。可以設置的顏色：
name - 指定顏色的名稱忽匈，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16進制值, 如 "#ff0000"
您還可以設置邊框的顏色為"transparent"房午。
4.單獨設置各邊
p { border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid; }
嘗試一下 上面的例子也可以設置一個單一屬性：
實例：border-style:dotted solid;
border-style:dotted solid double;
上邊框是 dotted
左、右邊框是 solid
底邊框是 double
5.簡寫屬性
你也可以在一個屬性中設置邊框丹允。
你可以在"border"屬性中設置：
border-width
border-style (required)
border-color
實例：border:5px solid red;
CSS輪廓（Outline）
| [outline]| 在一個聲明中設置所有的輪廓屬性 | outline-color outline-style
outline-width inherit
| [outline-color]設置輪廓的顏色 | color-name hex-number rgb-number
invert inherit
| [outline-style]設置輪廓的樣式 | none dotted dashed solid
double groove ridge inset
outset inherit
| [outline-width]設置輪廓的寬度 | thin medium
thick length inherit
