詳解CSS盒模型

本文主要是學習CSS盒模型的筆記，總結了一些基本概念，知識點和細節。

一些基本概念

HTML的大多數元素都是塊級(block)元素或行內(inline)元素

塊級元素

預設情況下，塊級元素會另起一行，並儘可能的充滿整個容器。
塊級元素可以包含行內元素和其他塊級元素，相比於行內元素可以建立更復雜和大型的結構

塊級元素列表：

html5新增的元素：
figcation：圖文資訊組標題 ，article：文章，figure：圖文資訊組
output：表單輸出，aside：側欄內容，footer：區段尾或頁尾，audio：音訊播放
video：視訊播放，section：頁面區段，canvas：畫布、繪製圖形，header：區段頭或頁頭
hgroup：標題組，

address：聯絡方式資訊，ol：有序列表，p：行，form：表單，pre：預格式化文字，blockqute：塊引用
h1-h6：標題，table：表格，dd：列表中條目描述，dl：定義列表，div，hr：水平分割線

行內元素

行內元素不會另起一行只佔據它對應的標籤的邊框所包含內容的空間，
只能包含資料和其他行內元素

行內元素列表

b，big，i，small，tt，
abbr，acronym，cite，code，dfn，em，kbd，strong，samp，var，
a，bdo，br，img，map，object，q，script，span，sub，sup，
button，input，label，select，textarea

塊級元素和行內元素的區別

塊級元素：
1.會另起一行，
2.可以設定width，height，margin，padding，border屬性
3.預設寬度是容器的100%

行內元素：
1.和其他元素在同一行內
2.高度和寬度就是內容的高度和寬度
3.可以設定margin-left和margin-right屬性，無法設定margin-top和margin-bottom屬性
4.border和padding可以設定，但是border-top和padding-top到頁面頂部後就不再增加

正常流

正常流指：從左到右，從上到下顯示。要讓一個元素不在正常流中，唯一的辦法是讓元素浮動或定位

非替換元素

如果元素的內容包含在文件中，則稱之為非替換元素。比如一個段落的文字都在該元素本身之內，這個段落就是一個非替換元素。

替換元素

作為其他內容佔位符的一個元素稱為替換元素，根據標籤和屬性的值來顯示內容的元素。比如img元素，它只是指向一個影像檔案，這個檔案插入到文件流中。大多數表單元素（input，根據type屬性來顯示內容）也是替換元素。

根元素

位於文件樹的頂端，在html文件中就是html元素

盒模型

html文件中的每個元素都被描繪成矩形盒子，這些矩形盒子通過一個模型來描述其佔用空間，這個模型稱為盒模型。盒模型通過四個邊界來描述：margin（外邊距），border（邊框），padding（內邊距），content（內容區域），如圖所示：

幾點提示

1.padding，border，margin都是可選的，預設值為0，但是瀏覽器會自行設定元素的margin和padding，通過在css樣式表中設定

來覆蓋瀏覽器樣式。注意：這裡的*表示所有元素，但是這樣效能不好，建議依次列出常用的元素來設定

2.如果給元素設定背景，並且邊框的顏色為透明，背景將應用於內容，內邊距和邊框組成的區域。

3.瀏覽器相容性
一旦為頁面設定了恰當的 DTD，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 IE 5 和 6 的呈現卻是不正確的。
根據 W3C 的規範，元素內容佔據的空間是由 width 屬性設定的，而內容周圍的 padding 和 border 值是另外計算的。
不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。

水平格式化

非替換元素的水平格式化

水平格式化的7大屬性是：margin-left，border-left，padding-left，width，padding-right，border-right，margin-right。這7個屬性值加起來往往是父級元素的width值。

其中margin-left，width，margin-right可以設定為auto。
主要有下面幾種情況：

一個屬性設定成auto

如果三個屬性中某個屬性設定了auto，其餘兩個為特定的值，那麼設定auto的屬性為確定所需的元素，從而使得元素框的寬度等於父級元素的width。

例子

HTML程式碼

CSS程式碼

 

被設定為auto的margin-auto屬性值為340px，即margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=340+0+30+100+30+0+100=600

總和不等於父級元素的width

使用auto可以彌補實際值與所需總和的差距，如果三個屬性都設定了特定值，但是總和不等於父級元素的width。
修改上面例子中的margin-left為100px，即

 

在上面的CSS中，margin-left，width，margin-right都設定了特定值，但是七大屬性總和不等於父級元素的width。這種情況下：
在FF中，margin-right的值為開發者設定的值
在Chrome中，margin-right被強制為auto

width設定為auto

如果margin-left和margin-right都設定特定值，width設定為auto，則width將會等於某個特定值以達到父級元素的width。
如果將width修改為auto，即：

 

元素的width將被被設定為340px來使總和達到父級元素的width

margin-left和margin-right設定成auto

如果margin-left和amrgin-right都設定為auto，則它們會設定相等的值，因此元素將在父級元素中居中。這是將塊級元素居中的一種方法。注意：text-align設定為center只適用於塊級元素中的內聯內容居中，並不能使塊級元素居中。
設定margin屬性為margin:0 auto

 

margin-left和margin-right的值會被設定為相等，使得元素居中

某個外邊距和width設定成auto

如果設定某個外邊距和width為auto，則設定為auto的外邊距會為0，width會設定為所需的值來填充父級元素。

 

設定margin-left和width為auto，則margin-left將被設定為0，width會被設定為440px來滿足父級元素的width

全設定成auto

如果margin和width都設定為auto，則兩個外邊距會設定為0，width會盡可能寬。

 

三個值都設定為auto，則兩個外邊距會設定為0，width會被設定為540px

負外邊距

7個屬性只要都是大於等於0的值，總和總是等於父級元素的width，不會超過父級元素的區域
但是可以通過制定負外邊距來得到比父級元素width更大的區域

 

設定margin-right為-400px，則元素會大於父級元素width，因為100+0+30+840+30+0-400=600，元素的width為840px

替換元素的水平格式化

替換元素的水平格式化規則和非替換元素的規則類似，只有一個width有區別，如果width設定為auto，則元素的寬度是內容的固有寬度。注意：對於img標籤，如果width不等於其固有寬度，則height也會等比例增加，除非設定特定值。反過來如果height設定高度，width也會等比例增加

垂直格式化

垂直格式化和水平格式化類似，也有7個相關屬性：margin-top，border-top，padding-top，height，padding-bottom，border-bottom，margin-bottom，這7個屬性的總和必須等於父級元素的height屬性。
其中margin-top，margin-bottom和height可以設定成auto
一個正常流中的塊元素的margin-top和margin-bottom設定為auto後，會被設定為0，即不能將元素垂直居中，實際上元素沒有外邊距。定位元素如果設定成auto有不同的處理結果。

如果正常流元素的height設定為auto，則其高度將會被設定為其內容元素的高度總和。

垂直外邊距合併

垂直外邊距合併：當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

例子：

html程式碼

css程式碼

如圖所示，兩個div標籤的外邊距分別是20px，10px，但是最終兩個div之間的距離是20px，而不是20+10=30px

行內元素的盒模型

行內元素也是有盒模型的，但是有幾點要注意：

1.對於非替換元素，比如a，span標籤等
（1）可以設定margin-left和margin-right屬性，無法設定margin-top和margin-bottom屬性
（2）行內元素border和padding可以設定，但是border-top和padding-top到頁面頂部後就不再增加

2.對於替換元素，比如input，img標籤

margin，padding，border都有效果