1、CSS 盒模型（Box Model）所有 HTML 元素都可以看作是盒子，在 CSS 中，“Box Model”這一術語主要是在佈局時使用。 CSS 盒模型（Box Model）規定了處理元素內容、邊框、內邊距和外邊距的方式。 CSS 盒模型本質上是一個盒子，封裝周圍的 HTML 元素，

1、CSS 盒模型（Box Model）

　　所有 HTML 元素都可以看作是盒子，在 CSS 中，“Box Model”這一術語主要是在佈局時使用。

　　CSS 盒模型（Box Model）規定了處理元素內容、邊框、內邊距和外邊距的方式。

　　CSS 盒模型本質上是一個盒子，封裝周圍的 HTML 元素，它包括：外填充也叫外邊距（margin），邊框（border），內填充也叫內邊距（padding）和實際內容（content）。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

　　如下 CSS 盒子模型圖：

CSS 盒子模型

　　盒子模型的最內層是盒子的實際內容（content），顯示文本和圖像。直接包圍內容的是內邊距（padding），清楚內容周圍的區域，內邊距呈現了元素的背景，會受到框中填充的背景顏色影響。內邊距的邊緣是邊框（border），邊框以外是外邊距（margin），外邊距沒有背景顏色，預設是透明的，因此不會遮擋其後的任何元素。背景應用於由內容和內邊距、邊框組成的區域。盒模型就好比一套茶杯，為了避免損壞，每個茶杯的周圍都會被填充一些東西，這些填充就是內邊距，再用盒子把茶杯裝起來，裝茶杯的盒子就是邊框，一套茶杯不可能只有一個，所有的茶杯會用一個精美包裝的大盒子再裝起來，那麼每個裝茶杯的小盒子之間的距離就是外邊距。

　　內邊距、邊框和外邊距都是可選的，預設值是零。但是，許多元素將由瀏覽器樣式表（瀏覽器預設值）設置外邊距和內邊距。因此可以將元素的 margin 和 padding 設置為零來覆蓋這些瀏覽器樣式。

　　在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素盒子的總尺寸。為了確保在所有瀏覽器中元素的寬度和高度設置正確，有必要瞭解盒模型是如何工作的。

　　當指定一個 CSS 元素的寬度和高度屬性時，只是設置了內容區域的寬度和高度，完全大小的元素，還必須添加內邊距，邊框和外邊距。如下設置盒子的樣式：

1 #box{
2     width:200px;
3     height:100px;
4     padding:20px;
5     border:10px solid blue;
6     margin:30px;
7 }

　　上面例子中，ID 為 box 的寬為 200 像素，高為 100 像素，內邊距為 20 像素，邊框為 10 像素，外邊距是 30 像素，下圖是在 Firefox 中計算出的佈局樣式：

　　那麼該元素的總寬度實際為：30+10+20+200+20+10+30= 320px

　　實際高度為：30+10+20+100+20+10+30= 220px

　　最終元素的總寬度計算公式是：總元素的寬度=內容寬度+左外邊距+右外邊距+左邊框+右邊框+左內邊距+右內邊距。

　　元素的總高度最終計算公式是：總元素的高度=內容高度+頂外邊距+底外邊距+頂邊框+底邊框+頂內邊距+底內邊距。

　　根據 W3C 的規範，元素內容占據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。內邊距、邊框和外邊距可以應用於一個元素的所有邊，也可以應用於單獨的邊。外邊距可以是負值，而且在很多情況下都要使用負值的外邊距，內邊距不可以是負值。

　　margin 屬性的值設為負值即負邊距，在 CSS 佈局中是一個很有用的技巧。當 margin-top 、 margin-left 為負值的時候，會把元素上移、左移，同時文檔流中的位置也發生相應變化，這點與 position:relative 的元素設置 top、left 後元素還占據原來位置不同。當 margin-bottom 、 margin-right 設為負值的時候，元素本身沒有位置變化，後面的元素會下移、右移。

　　當元素被設置為絕對定位時，其 top、right、bottom、left 值是指元素自身的邊界到最近的已定位祖先元素的距離，這個元素自身的邊界指的就是 margin 定義的邊界，所以，如果 margin 為正的時候，那它的邊界是向外擴的，即下移/右移，如果 margin 為負的時候，則它的邊界是向內收的，即上移/左移，利用這點，就有了經典的利用絕對定位來居中的方法：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>垂直居中</title>
 6 <style>
 7 *{padding;margin:0;}
 8 #box{
 9     width:200px;
10     height:200px;
11     margin:10px auto;
12     border:1px solid blue;
13     position:relative;
14 }
15 #box .content{
16     width:100px;
17     height:100px;
18     background:green;
19     position:absolute;
20     top:50%;
21     left:50%;
22     margin-top:-50px;
23     margin-left:-50px;
24 }
25 </style>
26 </head>
27 <body>
28 <div id="box">盒子
29   <div class="content">內容</div>
30 </div>
31 </body>
32 </html>

　　把元素設置為絕對定位，然後設置 top 和 left 為 50%，這時候元素的上邊界、左邊界就到了父元素的 50% 處，再對元素設置其自身寬度和高度一半的負邊距，使元素中心移動到父元素中心，實現居中對齊。

　　負邊距對於浮動元素的影響和上面的情況一樣，不過有其特殊性，如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>負邊距對浮動元素的影響</title>
 6 <style>
 7 *{padding;margin:0;}
 8 #box{
 9     width:280px;
10     border:1px solid black;
11     overflow:hidden;
12 }
13 #box .float{
14     width:100px;
15     height:100px;
16     float:left;
17 }
18 #box .float:nth-child(1){
19     background:red;
20 }
21 #box .float:nth-child(2){
22     background:yellow;
23 }
24 #box .float:nth-child(3){
25     background:blue;
26 }
27 </style>
28 </head>
29 <body>
30 <div id="box">
31   <div class="float">1</div>
32   <div class="float">2</div>
33   <div class="float">3</div>
34 </div>
35 </body>
36 </html>

　　上面代碼中，在一個寬度為 280px 的 div 的容器中向左浮動3個子 div 元素，寬度都為 100px ，由於一行放不下，最後一個會被移動到下一行顯示，如果給第三個元素添加 -20px 的外邊距，這時候第三個元素就移上去了，並且覆蓋了第二個元素 20px ，經典的多列佈局正是利用此原理。

1 #box .float:nth-child(3){
2     background:blue;
3     margin-left:-20px;
4 }

　　實例：兩列佈局

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>兩列佈局</title>
 6 <style>
 7 *{padding;margin:0;font:bold 18px "微軟雅黑";}
 8 #box{
 9     width:500px;
10     border:1px solid black;
11     margin:10px auto;
12     overflow:hidden;
13 }
14 #box .wrap{
15     width:100%;
16     float:left;
17 }
18 #box .wrap .content{
19     height:200px;
20     margin-right:100px;
21     background:pink;
22 }
23 #box .right{
24     width:100px;
25     height:200px;
26     background:lightgreen;
27     float:left;
28     margin-left:-100px;
29 }
30 </style>
31 </head>
32 <body>
33 <div id="box">
34     <div class="wrap">
35         <div class="content">
36             1左列內容 2左列內容 3左列內容 4左列內容 5左列內容 6左列內容 7左列內容 8左列內容 9左列內容
37         </div>
38     </div>
39     <div class="right">右列內容</div>
40 </div>
41 </body>
42 </html>

　　上面的代碼很好理解，為 content 元素定義父元素，設置左浮動，寬度為 100%，再為 content 元素設置右邊距，值等於 right 元素的寬度，最後給 right 元素設置左浮動，再設置其寬度的負邊距為 content 元素設置右邊距，即自身寬度。

　　本來 right 元素應該在第二行顯示，但是左浮動使它到了第一行的最右邊，覆蓋了 wrap 元素的一部分，但是 content 元素有 right 元素寬度的右邊距，所以覆蓋區域沒有內容，這樣就實現了兩列佈局。註意：如果不給 content 元素設置 right 元素寬度的右邊距，那麼 content 元素的內容則會被覆蓋掉。其它此類更複雜的佈局原理與其類似。

2、CSS 邊框

　　CSS border 屬性可以為元素指定邊框的寬度、樣式和顏色。元素的邊框是圍繞元素內容和內邊距的一條或多條線。

　　在 CSS 規範中指出，邊框是繪製在“元素的背景之上”。這很重要，因為有些邊框是“間斷的“，如：點線邊框或虛線框，元素的背景應當出現在邊框的可見部分之間。CSS2 指出背景只延伸到內邊距，而不是邊框。在 CSS2.1 中定義：元素的背景是內容、內邊距和邊框區的背景。

　　(1)、邊框樣式（border-style）

　　border-style 屬性用來定義邊框的樣式。邊框樣式屬性指定要顯示什麼樣的邊界，樣式是邊框最重要的一個屬性，如果沒有樣式，將根本沒有邊框。

　　CSS 的 border-style 屬性定義了 10 個不同的非 inherit(繼承) 樣式，包括 none 和 hidden，該屬性無繼承。如下：

　　　　①、預設值為 none：無邊框。border-color 將被忽略，border-width 計算值為0，除非邊框輪廓為圖像，即 border-image。

　　　　②、hidden：隱藏邊框。

　　　　③、dotted：點狀框。

　　　　④、dashed: 虛線框。

　　　　⑤、solid: 實線框。

　　　　⑥、double: 雙線框。兩條單線的寬度和 border-width 值相同。

　　　　⑦、groove: 3D 凹槽框。效果取決於邊界的顏色值。

　　　　⑧、ridge: 3D 凸槽框。效果取決於邊界的顏色值。

　　　　⑨、inset：3D 嵌入(凹)邊框。效果取決於邊界的顏色值。

　　　　⑩、outset：3D 突出(凸)邊框。效果取決於邊界的顏色值。

　　border-style 屬性可以定義多種樣式，即為一個邊框定義多個樣式，如下：

 1 <head>
 2 <style>
 3 #box{
 4     width:500px;
 5     height:300px;
 6     color:blue;
 7     background:lightgreen;
 8     border-style:solid dotted dashed double;
 9 }
10 </style>
11 </head>
12 <body>
13 <div id="box">
14 內容
15 </div>
16 </body>

　　上面例子中，為 div 元素的邊框樣式分別為：頂邊框為實線框，右邊框為點狀框，底邊框為虛線框，左邊框為雙線框。

　　border-style 屬性可以設置一個元素四個邊框的樣式，可以有 1-4 個值：

　　　　①、如果提供全部四個參數值，將按上、右、下、左的順序作用於四邊。

　　　　②、如果只提供一個，將用於全部的四邊。

　　　　③、如果提供兩個，第一個用於上、下，第二個用於左、右。

　　　　④、如果提供三個，第一個用於上，第二個用於左、右，第三個用於下。

　　該屬性屬於複合屬性，也叫簡寫屬性，如果只為元素框的某一個邊框設置樣式，而不是設置所有 4 個邊的邊框樣式，可以使用下麵的單邊邊框樣式屬性：

　　　　①、border-top-style 設置或檢索對象頂邊框樣式。

　　　　②、border-right-style 設置或檢索對象右邊框樣式。

　　　　③、border-bottom-style 設置或檢索對象底邊框樣式。

　　　　④、border-left-style 設置或檢索對象左邊框樣式。

　　因此，這兩種方法是等同的：

1 #box1{
2     border-style:none solid solid solid;
3 }
4 #box2{
5     border-style:solid;
6     border-top-style:none;
7 }

　　需要註意：如果使用第二種方法，必須把單邊屬性放在簡寫屬性之後。因為如果把單邊屬性放在 border-style 之前，簡寫屬性的值就會覆蓋單邊值 none。

　　(2)、邊框寬度（border-width）

　　通過 border-width 屬性可以為邊框指定寬度。

　　為邊框指定寬度有兩種方法：

　　①、可以指定長度值，比如 2px 或 0.1em。

　　②、使用關鍵字設置，預設值為 medium 定義中等的邊框， thin 定義細邊框，thick 定義粗邊框。

　　需要註意：CSS 沒有定義 3 個關鍵字的具體寬度，所以一個瀏覽器可能把 thin 、medium 和 thick 分別設置為等於 2px、3px 和 5px，而另一個瀏覽器則分別設置為 1px、2px 和 3px。通常建議為元素指定長度值的邊框。

　　border-width 屬性可以設置一個元素四個邊框的寬度，可以有 1-4 個值，和 border-style 屬性相同。

　　　　①、該屬性有 1個值時，對應元素的四個邊框。

　　　　②、該屬性有 2個值時，對應元素的頂、底邊框，右、左邊框。

　　　　③、該屬性有 3個值時，對應元素的頂邊框，右、左邊框，底邊框。

　　　　④、該元素有 4個值時，對於元素的頂邊框，右邊框，底邊框，左邊框。

　　該屬性屬於複合屬性，可以使用單獨的屬性為每個邊框指定寬度：

　　　　①、border-top-width 設置或檢索對象頂邊框的寬度。

　　　　②、border-right-width 設置或檢索對象右邊框的寬度。

　　　　③、border-bottom-width 設置或檢索對象底邊框的寬度。

　　　　④、border-left-width 設置或檢索對象左邊框的寬度。

　　在前面的例子中，如果要顯示某種邊框，就必須設置邊框樣式，比如 solid 或 dashed。如果把 border-style 設置為 none，如下：

 1 <head>
 2 <style>
 3 #box1{
 4     border-style:none;
 5     border-width:10px;
 6 }
 7 #box2{
 8     border-style:solid;
 9     border-width:10px;
10 }
11 </style>
12 </head>
13 <body>
14 <div id="box1">
15 內容 內容
16 </div>
17 <div id="box2">
18 內容
19 </div>
20 </body>

　　通過上面的例子，可以看到，儘管 box1 的邊框的寬度是 10px，但是邊框樣式設置為 none。在這種情況下，不僅邊框的樣式沒有了，其寬度也會變成 0。邊框消失了，這是因為如果邊框樣式為 none，即邊框根本不存在，那麼邊框就不可能有寬度，因此邊框寬度自動設置為 0，而不論寬度定義的是多少。這一點非常重要，根據下麵規則，所有 h1 元素都不會有任何邊框，更不用說 50 像素寬了：

1 h1{
2     border-width:50px;
3 }

　　border-style 屬性的預設值是 none，如果沒有聲明樣式，就相當於 border-style:none。所以，如果要想顯示邊框，就必須聲明一個邊框樣式。

　　(3)、邊框顏色（border-color）

　　border-color 屬性用於設置邊框的顏色。可以使用任何顏色類型的值，如指定顏色的名稱，"red"。如指定 RGB 值，"rgb(255,0,0)"。如指定16進位值， "#FF0000"。該屬性的預設值為 "transparent" 指定邊框的顏色為透明。註意： border-color 單獨使用是不起作用的，必須得先使用 border-style 來設置邊框樣式。

　　border-color 屬性可以設置一個元素四個邊框的顏色，可以有 1-4 個值，和 border-width 屬性相同，即按照 top-right-bottom-left 的順序設置元素的各邊邊框。

　　該屬性屬於複合屬性，可以使用單獨的屬性為每個邊框指定顏色：

　　　　①、border-top-color 設置或檢索對象頂邊框的顏色。

　　　　②、border-right-color 設置或檢索對象右邊框的顏色。

　　　　③、border-bottom-color 設置或檢索對象底邊框的顏色。

　　　　④、border-left-color 設置或檢索對象左邊框的顏色。

　　預設邊框顏色是元素本身的前景色。如果沒有為邊框設置顏色，它將與元素的文本顏色相同。另一方面，如果元素沒有任何文本，假設它是一個表格，其中只包含圖像，那麼該表格的邊框顏色就是其父元素的文本顏色，因為 color 屬性可以繼承，這個父元素很可能是 body、div 或另一個 table。

　　我們可以為網頁上的文字賦予顏色，這就使用到了 CSS 的前景色，前景色使用 color 屬性，且通常使用在文字上。與前景色相對應的就是 CSS 背景色，背景色不同於前景色，文字顏色可以使用 color 屬性，但是包含文字的 p、div、body 等元素的背景顏色則使用 background-color 屬性，前景色具有繼承性，而背景色則沒有繼承。

　　綜上所述，前景色影響邊框顏色，如下麵的實例，不設置 div 元素的邊框顏色：

 1 <head>
 2 <style>
 3 #box{
 4     width:200px;
 5     height:100px;
 6     border-style:solid;
 7     border-width:5px;
 8     background:lightgreen;
 9 }
10 </style>
11 </head>
12 <body>
13 <div id="box">
14 內容
15 </div>
16 </body>

　　上面的例子，給 div 元素設置了背景色為淺綠色，可以看到，元素的背景區包含前景之下直到邊框外邊界的所有空間，包含內容、內邊距，且延伸到邊框。而前景色則影響到了邊框顏色，例子中沒有設置邊框顏色，但是前景色預設是黑色，因此邊框也顯示為黑色，如果給文本定義前景色，那麼邊

CSS 高級

1、CSS 盒模型（Box Model）

把元素設置為絕對定位，然後設置 top 和 left 為 50%，這時候元素的上邊界、左邊界就到了父元素的 50% 處，再對元素設置其自身寬度和高度一半的負邊距，使元素中心移動到父元素中心，實現居中對齊。

2、CSS 邊框

　　把元素設置為絕對定位，然後設置 top 和 left 為 50%，這時候元素的上邊界、左邊界就到了父元素的 50% 處，再對元素設置其自身寬度和高度一半的負邊距，使元素中心移動到父元素中心，實現居中對齊。