### 一，CSS盒子模型概述 CSS盒子模型規定了元素框處理元素內容、內邊距、邊框和外邊距的方式。一個完整元素包括內容(content)，內邊距(填充)(padding)，邊框(border)和外邊距(空白)(margin)。 盒子模型圖：  元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。 邊框以外是外邊距，外邊距默認是透明的，因此不會遮擋其后的任何元素。故背景應用于由內容和內邊距組成的區 域。 內邊距、邊框和外邊距都是可選的，默認值是零。但是，許多元素將由用戶代理樣式表設置外邊距和內邊距。可 以通過將元素的 margin 和 padding 設置為零來覆蓋這些瀏覽器樣式。這可以分別進行，也可以使用通用選擇器對所 有元素進行設置： ~~~ * { margin: 0; padding: 0; } ~~~ 在CSS中，width和height指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸， 但是會增加元素框的總尺寸。內邊距、邊框和外邊距可以應用于一個元素的所有邊，也可以應用于單獨的邊。外邊距 可以是負值，而且在很多情況下都要使用負值的外邊距。 假設框的每個邊上有10個像素的外邊距和5個像素的內邊距。如果希望這個元素框達到 100 個像素，就需要將內 容的寬度設置為70像素，請看下圖：  ~~~ <span style="font-size:18px;">#box { width: 70px; margin: 10px; padding: 5px; }</span> ~~~ display屬性設置元素的盒模型的類型 可能的值： none 不顯示，隱藏 inline 內聯元素(行內元素) block 塊級元素 inline-block 行內塊級元素 ### 二，內邊距padding 元素的內邊距在邊框和內容區之間。控制該區域最簡單的屬性是padding屬性。CSSpadding屬性定義元素邊框與 元素內容之間的空白區域。 (1)padding屬性 padding屬性定義元素的內邊距。padding屬性接受長度值或百分比值，但不允許使用負值。 例如，如果您希望所有 h1 元素的各邊都有 10 像素的內邊距，只需要這樣： ~~~ h1 {padding: 10px;} ~~~ 您還可以按照上、右、下、左的順序分別設置各邊的內邊距，各邊均可以使用不同的單位或百分比值： ~~~ </pre><pre name="code" class="css">h1 {padding: 10px 0.25em 2ex 20%;} ~~~ (2)單邊內邊距屬性 也通過使用下面四個單獨的屬性，分別設置上、右、下、左內邊距： padding-left 設置左內邊距 padding-right 設置右內邊距 padding-top 設置上內邊距 padding-bottom 設置下內邊距 您也許已經想到了，下面的規則實現的效果與上面的簡寫規則是完全相同的： ~~~ h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; } ~~~ (3)內邊距的百分比數值 前面提到過，可以為元素的內邊距設置百分數值。百分數值是相對于其父元素的width計算的，這一點與外邊距一 樣。所以，如果父元素的width改變，它們也會改變。注意：上下內邊距與左右內邊距一致；即上下內邊距的百分數會 相對于父元素寬度設置，而不是相對于高度。 下面這條規則把段落的內邊距設置為父元素width的10%： ~~~ p {padding: 10%;} ~~~ 例如：如果一個段落的父元素是div元素，那么它的內邊距要根據div的width計算。 ~~~ <div style="width: 200px;"> <p>This paragragh is contained within a DIV that has a width of 200 pixels.</p> </div> ~~~ ### 三，邊框border 元素的邊框是圍繞元素內容和內邊距的一條或多條線。border屬性允許你規定元素邊框的樣式、寬度和顏色。 (1)邊框 在HTML中，我們使用表格來創建文本周圍的邊框，但是通過使用CSS邊框屬性，我們可以創建出效果出色的邊框，并且可以應用于任何元素。元素外邊距內就是元素的的邊框。元素的邊框就是圍繞元素內容和內邊據的一條或多條線。每個邊框有 3 個方面：寬度、樣式，以及顏色。 (2)邊框與背景 CSS規范指出，邊框繪制在“元素的背景之上”。這很重要，因為有些邊框是“間斷的”（例如，點線邊框或虛線框），元素的背景應當出現在邊框的可見部分之間。CSS2 指出背景只延伸到內邊距，而不是邊框。后來 CSS2.1 進行了更正：元素的背景是內容、內邊距和邊框區的背景。 (3)邊框的樣式 樣式是邊框最重要的一個方面，這不是因為樣式控制著邊框的顯示(當然，樣式確實控制著邊框的顯示)，而是因 為如果沒有樣式，將根本沒有邊框。CSS中border-style屬性定義了10個不同的非inheri 樣式，包括none。 例如，您可以為把一幅圖片的邊框定義為outset，使之看上去像是“凸起按鈕”： ~~~ a:link img {border-style: outset;} ~~~ (4)定義多種樣式 您可以為一個邊框定義多個樣式，例如： ~~~ p.aside {border-style: solid dotted dashed double;} ~~~ 上面這條規則為類名為aside的段落定義了四種邊框樣式：實線上邊框、點線右邊框、虛線下邊框和一個雙線左邊 框。 (5)定義單邊樣式 如果您希望為元素框的某一個邊設置邊框樣式，而不是設置所有 4 個邊的邊框樣式，可以使用下面的單邊邊框樣 式屬性： border-top-style border-right-style border-bottom-style border-left-style (6)邊框的寬度 您可以通過border-width屬性為邊框指定寬度。為邊框指定寬度有兩種方法：可以指定長度值，比如 2px或 0.1em；或者使用3個關鍵字之一，它們分別是 thin 、medium（默認值） 和 thick。 所以，我們可以這樣設置邊框的寬度： ~~~ p {border-style: solid; border-width: 5px;} ~~~ 或者： ~~~ p {border-style: solid; border-width: thick;} ~~~ (7)定義單邊寬度 您可以按照 top-right-bottom-left 的順序設置元素的各邊邊框： ~~~ p {border-style: solid; border-width: 15px 5px 15px 5px;} ~~~ 上面的例子也可以簡寫為（這樣寫法稱為值復制）： ~~~ p {border-style: solid; border-width: 15px 5px;} ~~~ 您也可以通過下列屬性分別設置邊框各邊的寬度： border-top-width border-right-width border-bottom-width border-left-width 因此，下面的規則與上面的例子是等價的： ~~~ p { border-style: solid; border-top-width: 15px; border-right-width: 5px; border-bottom-width: 15px; border-left-width: 5px; } ~~~ (8)沒有邊框 在前面的例子中，您已經看到，如果希望顯示某種邊框，就必須設置邊框樣式，比如solid 或 outset。那么如果把border-style設置為none，由于border-style的默認值是none，如果沒有聲明樣式，就相當于 border-style: none。因 此，如果您希望邊框出現，就必須聲明一個邊框樣式。 (9)邊框的顏色 設置邊框顏色非常簡單。CSS使用一個簡單的border-color屬性，它一次可以接受最多4個顏色值。可以使用任何 類型的顏色值，例如可以是命名顏色，也可以是十六進制和 RGB 值： ~~~ p { border-style: solid; border-color: blue rgb(25%,35%,45%) #909090 red; } ~~~ 如果顏色值小于 4 個，值復制就會起作用。例如下面的規則聲明了段落的上下邊框是藍色，左右邊框是紅色： ~~~ p { border-style: solid; border-color: blue red; } ~~~ 注釋：默認的邊框顏色是元素本身的前景色。如果沒有為邊框聲明顏色，它將與元素的文本顏色相同。另一方面，如果元素沒有任何文本，假設它是一個表格，其中只包含圖像，那么該表的邊框顏色就是其父元素的文本顏色（因為color可以繼承）。這個父元素很可能是body、div 或另一個table。 (10)定義單邊顏色 還有一些單邊邊框顏色屬性。它們的原理與單邊樣式和寬度屬性相同： border-top-color border-right-color border-bottom-color border-left-color 要為 h1 元素指定實線黑色邊框，而右邊框為實線紅色，可以這樣指定： ~~~ h1 { border-style: solid; border-color: black; border-right-color: red; } ~~~ ### 四，外邊距margin 圍繞在元素邊框的空白區域是外邊距。設置外邊距會在元素外創建額外的“空白”。 (1)margin屬性 設置外邊距的最簡單的方法就是使用margin屬性，這個屬性接受任何長度單位、百分數值甚至負值。margin可以設置為auto。更常見的做法是為外邊距設置長度值。 下面的例子為h1元素的四個邊分別定義了不同的外邊距，所使用的長度單位是像素(px)： ~~~ <span style="font-size:18px;">h1 {margin : 10px 0px 15px 5px;}</span> ~~~ 另外，還可以為 margin 設置一個百分比數值： ~~~ p {margin : 10%;} ~~~ 百分數是相對于父元素的 width 計算的。上面這個例子為p元素設置的外邊距是其父元素的 width 的10%。 margin 的默認值是0，所以如果沒有為margin 聲明一個值，就不會出現外邊距。但是，在實際中，瀏覽器對許多元素已經提供了預定的樣式，外邊距也不例外。例如，在支持 CSS的瀏覽器中，外邊距會在每個段落元素的上面和下面生成“空行”。因此，如果沒有為 p 元素聲明外邊距，瀏覽器可能會自己應用一個外邊距。當然，只要你特別作了聲明，就會覆蓋默認樣式。 (2)值復制 有時，我們會輸入一些重復的值： ~~~ p {margin: 0.5em 1em 0.5em 1em;} ~~~ 通過值復制，您可以不必重復地鍵入這對數字。上面的規則與下面的規則是等價的： ~~~ <span style="font-size:18px;">p {margin: 0.5em 1em;}</span> ~~~ 這兩個值可以取代前面4個值。CSS 定義了一些規則，允許為外邊距指定少于4 個值。規則如下： 如果缺少左外邊的值，則使用右外邊距的值。 如果缺少下外邊距的值，則使用上外邊距的值。 如果缺少右外邊距的值，則使用上外邊距的值。 下圖提供了更直觀的方法來了解這一點：  (3)單邊外邊距屬性 您可以使用單邊外邊距屬性為元素單邊上的外邊距設置值。假設您希望把 p 元素的左外邊距設置為 20px。 ~~~ p {margin-left: 20px;} ~~~ 您可以使用下列任何一個屬性來只設置相應上的外邊距，而不會直接影響所有其他外邊距： margin-top margin-right margin-bottom margin-left 一個規則中可以使用多個這種單邊屬性，例如： ~~~ h2 { margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; } ~~~ 當然，對于這種情況，使用 margin 可能更容易一些： ~~~ p {margin: 20px 30px 30px 20px;} ~~~ 不論使用單邊屬性還是使用 margin，得到的結果都一樣。一般來說，如果希望為多個邊設置外邊距，使用margin 會更容易一些。不過，從文檔顯示的角度看，實際上使用哪種方法都不重要，所以應該選擇對自己來說更容易的一種方法。