前面的話
所有文檔元素都生成一個矩形框，這稱為元素框(element box)，它描述了一個元素在文檔布局中所占的空間大小。而且，每個框影響著其他元素框的位置和大小
寬高
寬度width被定義為從左內邊界到右內邊界的距離，高度height被定義為從上內邊界到下內邊界的距離
在CSS中，可以對任何塊級元素設置顯式高度。如果指定高度大于顯示內容所需高度，多余的高度會產生一個視覺效果，就好像有額外的內邊距一樣；如果指定高度小于顯示內容所需高度，則會向元素添加一個滾動條。如果元素內容的高度大于元素框的高度，瀏覽器的具體行為取決于overflow屬性
[注意]寬度和高度無法應用到行內非替換元素，且不能為負
width/height
值:<length> | <percentage> | auto | inherit
初始值: auto
應用于: 塊級元素和替換元素
繼承性: 無
百分數: 相對于包含塊的width/height
計算值: 對于auto和百分數值，根據指定確定；否則是一個絕對長度，除非元素不能應用該屬性(此時為auto)
auto
寬高和margin可以設置auto。對于塊級元素來說，寬度設置為auto，則會盡可能的寬。詳細來說，元素寬度=包含塊寬度—元素水平外邊距-元素水平邊距寬度-元素水平內邊距；高度設置為auto，則會盡可能的窄。詳細來說，元素高度=恰好足以包含其內聯內容的高度
[注意]如果沒有顯式聲明包含塊的height，則元素的百分數高度會重置為auto
怪異盒模型
IE6-瀏覽器的寬高定義的是可見元素框的尺寸，而不是元素框的內容區尺寸
【最大最小寬高】
設置最大最小寬高的好處是可以相對安全地混合使用不同的單位。使用百分數大小的同時，也可以設置基于長度的限制
min-width | min-height
值: <length> | <percentage> | inherit
初始值: 0
應用于: 塊級元素和替換元素
繼承性: 無
百分數: 相對于包含塊的寬度(高度)
max-width | max-height
值: <length> | <percentage> | inherit
初始值: none
應用于: 塊級元素和替換元素
繼承性: 無
百分數: 相對于包含塊的寬度(高度)
[注意]IE6-瀏覽器不支持min-width | min-height | max-width | max-height
[注意]當最小寬度(高度)大于最大寬度(高度)時，以最小寬高的值為準
內邊距
相比于盒模型的其他屬性(如在定位中經常使用負值的margin，因為CSS3的到來重獲光彩的border等)，padding顯得中規中矩了很多，沒有什么兼容性，也沒有一些特殊的問題
對于行內元素，左內邊距應用到元素的開始處，右內邊距應用到元素的結尾處，垂直內邊距不影響行高，但會影響自身尺寸，加背景顏色可以看出
[注意]內邊距不能是負值
padding
值:[<length> | <percentage>]{1,4} | 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{padding:0;}
2、IE7-瀏覽器下文字越多，左右padding逐漸變大，設置overflow:visible可解決該問題
3、button按鈕的padding與高度計算不兼容
button{ line-height:20px; padding:10px; border:none; }
//結果為： IE7: 45px firefox:42px chrome/IE8+:40px
可以使用label標簽來實現類似的效果，然后把按鈕button進行可訪問性隱藏即可
<button id="btn"></button> <label for="btn">按鈕</label>
label{ display:inline-block; line-height:20px; padding:10px; border:none; }
//結果為： IE7: 40px firefox:40px IE8+:40px chrome:40px
【下內邊距缺失】
firefox和IE8+瀏覽器在overflow:scroll或auto時，存在padding-bottom缺失現象
.box{ width: 100px; height: 100px; padding: 50px; background-color: pink; overflow:scroll; } .in{ width: 100px; height: 200px; background-color: lightgreen; }
<div class="box"> <div class="in"></div> </div>
左圖為chrome瀏覽器的情況，右圖為firefox瀏覽器的情況
 |
 |
外邊距
設置外邊距margin會在元素外創建額外的空白，空白通常指不能放其他元素的區域，而且在這個區域中可以看到父元素的背景
外邊距可以應用到行內元素，上下外邊距對行高沒有任何影響。由于上下外邊距實際上是透明的，所以這個聲明沒有任何視覺效果。左外邊距應用到元素開始處；右外邊距應用到元素結束處
[注意]margin負值非常常用，關于margin的詳細信息移步至此
margin
值:[<length> | <percentage> | auto]{1,4} | 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-start
margin-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，元素的邊框是圍繞元素內容的內邊距的一條或多條線。邊框由粗細、樣式和顏色三部分組成
對于行內元素來說，邊框實際上畫在各行之外的下一個像素上，由于各行緊挨著，所以其邊框會重疊。無論為行內元素的邊框設置怎樣的寬度，不會對行高有任何影響；但左右邊框會分別顯示在元素的開始處和結尾處
div{ width: 200px; border: 1px solid red; } span{ border: 1px solid black; background-color: yellow; padding: 6px; margin: 6px; font-size: 30px; line-height: 50px; }
<div><span>測試文字測試文字測試文字</span></div>
box-sizing
在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的取值
文章列表
留言列表
