深入理解盒模型

寬度width被定義為從左內邊界到右內邊界的距離，高度height被定義為從上內邊界到下內邊界的距離

[注意]寬度和高度無法應用到行內非替換元素，且不能為負

width/height

值:| | auto | inherit

初始值: auto

應用於: 塊級元素和替換元素

繼承性: 無

百分數: 相對於包含塊的width/height

計算值: 對於auto和百分數值，根據指定確定；否則是乙個絕對長度，除非元素不能應用該屬性(此時為auto)

auto

寬高和margin可以設定auto。對於塊級元素來說，寬度設定為auto，則會盡可能的寬。詳細來說，元素寬度=包含塊寬度—元素水平外邊距-元素水平邊距寬度-元素水平內邊距；高度設定為auto，則會盡可能的窄。詳細來說，元素高度=恰好足以包含其內聯內容的高度

[注意]如果沒有顯式宣告包含塊的height，則元素的百分數高度會重置為auto

怪異盒模型

ie6-瀏覽器的寬高定義的是可見元素框的尺寸，而不是元素框的內容區尺寸

【最大最小寬高】

min-width | min-height

值: | | inherit

初始值: 0

應用於: 塊級元素和替換元素

繼承性: 無

百分數: 相對於包含塊的寬度(高度)

max-width | max-height

值: | | inherit

初始值: none

應用於: 塊級元素和替換元素

繼承性: 無

百分數: 相對於包含塊的寬度(高度)

[注意]ie6-瀏覽器不支援min-width | min-height | max-width | max-height

[注意]當最小寬度(高度)大於最大寬度(高度)時，以最小寬高的值為準

相比於盒模型的其他屬性(如在定位中經常使用負值的margin，因為css3的到來重獲光彩的border等)，padding顯得中規中矩了很多，沒有什麼相容性，也沒有一些特殊的問題

對於行內元素，左內邊距應用到元素的開始處，右內邊距應用到元素的結尾處，垂直內邊距不影響行高，但會影響自身尺寸，加背景顏色可以看出

[注意]內邊距不能是負值

padding

值:[| ] | inherit

初始值: 未定義

應用於: 所有元素

繼承性: 無

百分數: 相對於包含塊的width

【50%】

塊級元素通過padding:50%可以實現正方形的效果，因為水平和垂直padding的百分比值都是相對於包含塊的寬度決定的，常常用於移動端頭圖

如果是內聯元素使用padding:50%，必須配合font-size:0，因為使用inline元素的垂直padding會出現"幽靈空白節點"，也就是規範中"strut"。所以通過font-size:0使其尺寸為0

【表單】

1、所有瀏覽器input/textarea/button都內建padding

2、部分瀏覽器select下拉內建padding，firefox、ie8+可以設定padding

3、除ie10-以外的其他瀏覽器，radio/checkbox單選核取方塊無內建padding，且無法設定padding。ie10-瀏覽器的radio/checkbox單選核取方塊有內建padding，且可以設定padding

[注意]除ie10-以外的其他瀏覽器，radio/checkbox單選核取方塊無內建border，且無法設定border

button相容

1、在firefox瀏覽器中，設定padding:0，按鈕左右兩側依然有padding，這時需要使用firefox自有樣式

button::-moz-focus-inner

2、ie7-瀏覽器下文字越多，左右padding逐漸變大，設定overflow:visible可解決該問題

3、button按鈕的padding與高度計算不相容

button

結果為：

ie7: 45px

firefox:42px

chrome/ie8+:40px

可以使用label標籤來實現類似的效果，然後把按鈕button進行可訪問性隱藏即可

"
btn">
for="
btn">按鈕

label

結果為：

ie7: 40px

firefox:40px

ie8+:40px

chrome:40px

【下內邊距缺失】

firefox和ie8+瀏覽器在overflow:scroll或auto時，存在padding-bottom缺失現象

.box.in

<
div 
class
="box"
>
<
div 
class
="in"
>
div>
div>

左圖為chrome瀏覽器的情況，右圖為firefox瀏覽器的情況

設定外邊距margin會在元素外建立額外的空白，空白通常指不能放其他元素的區域，而且在這個區域中可以看到父元素的背景

外邊距可以應用到行內元素，上下外邊距對行高沒有任何影響。由於上下外邊距實際上是透明的，所以這個宣告沒有任何視覺效果。左外邊距應用到元素開始處；右外邊距應用到元素結束處

[注意]margin負值非常常用，關於margin的詳細資訊移步至此

margin

值:[| | auto] | inherit

初始值: 未定義

應用於: 所有元素

繼承性: 無

百分數: 相對於包含塊的width

[注意]對於普通元素來說，包含塊就是塊級父級元素，對於定位元素來說，包含塊是定位父級。所以，普通元素的margin百分比相對於塊級父級元素的width，定位元素的margin百分比相對於定位父級的width

四值順序

【1個值】margin: top|right|bottom|left;
【2個值】margin: top|bottom left|right;
【3個值】margin: top left|right bottom;
【4個值】margin: top right bottom left;

margin-startmargin-start相當於流方向的開始端的外邊距。在正常的流向下，margin-start等同於margin-left，兩者重疊不累加；如果水平流是從右向左，margin-start等同於margin-right；在垂直流下(writing-mode:vertical-*;)，margin-start等同於margin-top

與margin-start相對應的是margin-end

[注意]ie瀏覽器不支援

類似地，margin-before在預設流向的情況下，等同於margin-top

與margin-before相對應的是margin-after

[注意]只有chrome和safari支援

元素外邊距內就是元素的邊框border，元素的邊框是圍繞元素內容的內邊距的一條或多條線。邊框由粗細、樣式和顏色三部分組成

對於行內元素來說，邊框實際上畫在各行之外的下乙個畫素上，由於各行緊挨著，所以其邊框會重疊。無論為行內元素的邊框設定怎樣的寬度，不會對行高有任何影響；但左右邊框會分別顯示在元素的開始處和結尾處

關於邊框的詳細資訊移步至此

divspan

<
div><
span
>測試文字測試文字測試文字
span
>
div>

在css中盒模型被分為兩種，第一種是w3c的標準模型，第二種是ie怪異盒模型。不同之處在於後者的寬高定義的是可見元素框的尺寸，而不是元素框的內容區尺寸。目前對於瀏覽器大多數元素都是基於w3c標準的盒模型，但對於表單form中的部分元素還是基於ie的怪異盒模型，如input裡的radio、checkbox、button等元素，如果給其設定border和padding它們也只會往元素盒內延伸

在w3c的標準模型下，寬度和高度僅僅包含了內容寬度，除去了邊框和內邊距兩個區域，這樣為web設計師處理效果帶來了不少麻煩。為了解決這個問題，css3新增了乙個盒模型屬性box-sizing，能夠事先定義盒模型的尺寸解析方式

[注意]ie7-瀏覽器不支援

box-sizing

值: content-box | bordrer-box | padding-box | inherit

初始值: content-box

應用於: 塊級元素和替換元素

繼承性: 無

[注意1]只有firefox瀏覽器支援padding-box屬性值

[注意2]ie瀏覽器在getcomputedstyle得到width/height是按照標準模式計算的，而不論box-sizing的取值

深入理解盒模型

深入理解盒模型

深入理解CSS盒模型

深入理解 CSS3 彈性盒布局模型

深入理解盒模型

深入理解盒模型

深入理解CSS盒模型

深入理解 CSS3 彈性盒布局模型

相關推薦