目錄：
- CSS 盒子模型（Box Model）
- CSS 邊框
- CSS 輪廓
- CSS Margin(外邊距)
- CSS Padding（填充）
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子官疲，在CSS中实撒，"box model"這一術(shù)語是用來設(shè)計和布局時使用畅卓。
CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTML元素窜护，它包括：邊距，邊框标锄，填充片林，和實際內(nèi)容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素合蔽。
下面的圖片說明了盒子模型(Box Model)：
不同部分的說明：
Margin(外邊距) - 清除邊框外的區(qū)域击敌，外邊距是透明的。
Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框拴事。
Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域沃斤，內(nèi)邊距是透明的。
Content(內(nèi)容) - 盒子的內(nèi)容刃宵，顯示文本和圖像衡瓶。
為了在所有瀏覽器中的元素的寬度和高度設(shè)置正確的話，你需要知道的盒模型是如何工作的牲证。
元素的寬度和高度
重要: 當(dāng)您指定一個CSS元素的寬度和高度屬性時哮针，你只是設(shè)置內(nèi)容區(qū)域的寬度和高度。要知道，完全大小的元素诚撵，你還必須添加填充缭裆，邊框和邊距。
下面的例子中的元素的總寬度為300px：
<pre>div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}</pre>
讓我們自己算算：
<pre>300px (寬)
- 50px (左 + 右填充)
- 50px (左 + 右邊框)
- 50px (左 + 右邊距)
= 450px</pre>
最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
瀏覽器的兼容性問題
一旦為頁面設(shè)置了恰當(dāng)?shù)?DTD寿烟，大多數(shù)瀏覽器都會按照上面的圖示來呈現(xiàn)內(nèi)容澈驼。然而 IE 5 和 6 的呈現(xiàn)卻是不正確的。根據(jù) W3C 的規(guī)范筛武，元素內(nèi)容占據(jù)的空間是由 width 屬性設(shè)置的缝其，而內(nèi)容周圍的 padding 和 border 值是另外計算的。不幸的是徘六，IE5.X 和 6 在怪異模式中使用自己的非標(biāo)準(zhǔn)模型内边。這些瀏覽器的 width 屬性不是內(nèi)容的寬度，而是內(nèi)容待锈、內(nèi)邊距和邊框的寬度的總和漠其。
<em><strong>雖然有方法解決這個問題。但是目前最好的解決方案是回避這個問題竿音。也就是和屎，不要給元素添加具有指定寬度的內(nèi)邊距，而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素和子元素春瞬。</strong></em>
IE8 及更早IE版本不支持 填充的寬度和邊框的寬度屬性設(shè)柴信。
解決IE8及更早版本不兼容問題可以在HTML頁面聲明 <!DOCTYPE html>即可。
CSS 邊框
border-style
| border-style | 值 |
|---|---|
| none | 默認(rèn)無邊框 |
| dotted | 定義一個點線邊框 |
| dashed | 定義一個虛線邊框 |
| solid | 定義實線邊框 |
| double | 定義兩個邊框宽气。 兩個邊框的寬度和 border-width 的值相同 |
| groove | 定義3D溝槽邊框随常。效果取決于邊框的顏色值 |
| ridge | 定義3D脊邊框。效果取決于邊框的顏色值 |
| inset: | 定義一個3D的嵌入邊框萄涯。效果取決于邊框的顏色值 |
| outset | 定義一個3D突出邊框绪氛。 效果取決于邊框的顏色值 |
屬性|描述
-|-|-
border | 簡寫屬性，用于把針對四個邊的屬性設(shè)置在一個聲明窃判。
border-style|用于設(shè)置元素所有邊框的樣式钞楼，或者單獨地為各邊設(shè)置邊框樣式。
border-width|簡寫屬性袄琳，用于為元素的所有邊框設(shè)置寬度，或者單獨地為各邊邊框設(shè)置寬度燃乍。
border-color|簡寫屬性唆樊，設(shè)置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設(shè)置顏色刻蟹。
border-bottom|簡寫屬性逗旁，用于把下邊框的所有屬性設(shè)置到一個聲明中。
border-bottom-color|設(shè)置元素的下邊框的顏色。
border-bottom-style|設(shè)置元素的下邊框的樣式片效。
border-bottom-width|設(shè)置元素的下邊框的寬度红伦。
border-left|簡寫屬性，用于把左邊框的所有屬性設(shè)置到一個聲明中淀衣。
border-left-color|設(shè)置元素的左邊框的顏色昙读。
border-left-style|設(shè)置元素的左邊框的樣式。
border-left-width|設(shè)置元素的左邊框的寬度膨桥。
border-right|簡寫屬性蛮浑，用于把右邊框的所有屬性設(shè)置到一個聲明中。
border-right-color|設(shè)置元素的右邊框的顏色只嚣。
border-right-style|設(shè)置元素的右邊框的樣式沮稚。
border-right-width|設(shè)置元素的右邊框的寬度。
border-top|簡寫屬性册舞，用于把上邊框的所有屬性設(shè)置到一個聲明中蕴掏。
border-top-color|設(shè)置元素的上邊框的顏色。
border-top-style|設(shè)置元素的上邊框的樣式调鲸。
border-top-width|設(shè)置元素的上邊框的寬度囚似。
CSS 輪廓（outline）
輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍线得，可起到突出元素的作用饶唤。
CSS outline 屬性規(guī)定元素輪廓的樣式、顏色和寬度贯钩。
所有CSS 輪廓（outline）屬性
"CSS" 列中的數(shù)字表示哪個CSS版本定義了該屬性(CSS1 或者CSS2)募狂。
| 屬性 | 說明 | 值 | CSS |
|---|---|---|---|
| outline | 在一個聲明中設(shè)置所有的輪廓屬性 | *outline-color outline-style outline-width *inherit |
2 |
| outline-color | 設(shè)置輪廓的顏色 | *color-name hex-number rgb-number invert *inherit |
2 |
| outline-style | 設(shè)置輪廓的樣式 | *none dotted dashed solid double groove ridge inset outset *inherit |
2 |
| outline-width | 設(shè)置輪廓的寬度 | thin medium thick *length *inherit |
2 |
CSS Margin(外邊距)
CSS Margin(外邊距)屬性定義元素周圍的空間。
<em><b>Margin</b></em> 清除周圍的元素（外邊框）的區(qū)域角雷。margin沒有背景顏色祸穷，是完全透明的∩兹可以單獨改變元素的上雷滚，下，左吗坚，右邊距祈远。也可以一次改變所有的屬性。
<em>可能的值</em>
| 值 | 說明 |
|---|---|
| auto | 設(shè)置瀏覽器邊距商源。這樣做的結(jié)果會依賴于瀏覽器 |
| length | 定義一個固定的margin（使用像素车份，pt，em等） |
| % | 定義一個使用百分比的邊距 |
<em>所有的CSS邊距屬性</em>
| 屬性 | 描述 |
|---|---|
| margin | 簡寫屬性牡彻。在一個聲明中設(shè)置所有外邊距屬性扫沼。（順序：上右下左） |
| margin-bottom | 設(shè)置元素的下外邊距。 |
| margin-left | 設(shè)置元素的左外邊距。 |
| margin-right | 設(shè)置元素的右外邊距缎除。 |
| margin-top | 設(shè)置元素的上外邊距严就。 |
CSS Padding（填充）
<em><b>Padding（填充）</b></em> 當(dāng)元素的 Padding（填充）（內(nèi)邊距）被清除時，所"釋放"的區(qū)域?qū)艿皆乇尘邦伾奶畛洹?/p>
單獨使用填充屬性可以改變上下左右的填充器罐∩椅縮寫填充屬性也可以使用，一旦改變一切都改變技矮。
<em><b>可能的值</b></em>
| 值 | 說明 |
|---|---|
| length | 定義一個固定的填充(像素, pt, em,等) |
| % | 使用百分比值定義一個填充 |
<em><b>所有的CSS填充屬性</b></em>
| 屬性 | 說明 |
|---|---|
| padding | 使用縮寫屬性設(shè)置在一個聲明中的所有填充屬性（順序：上右下左） |
| padding-bottom | 設(shè)置元素的底部填充 |
| padding-left | 設(shè)置元素的左部填充 |
| padding-right | 設(shè)置元素的右部填充 |
| padding-top | 設(shè)置元素的頂部填充 |
