深入理解盒模型

目錄

前面的話

　　所有文檔元素都生成一個矩形框，這稱為元素框(element box)，它描述了一個元素在文檔佈局中所占的空間大小。而且，每個框影響著其他元素框的位置和大小

寬高

　　在CSS中，可以對任何塊級元素設置顯式高度。如果指定高度大於顯示內容所需高度，多餘的高度會產生一個視覺效果，就好像有額外的內邊距一樣；如果指定高度小於顯示內容所需高度，則會向元素添加一個滾動條。如果元素內容的高度大於元素框的高度，瀏覽器的具體行為取決於overflow屬性

　　寬度 width被定義為從左內邊界到右內邊界的距離

　　高度 height被定義為從上內邊界到下內邊界的距離

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

width/height

　　值:<length> | <percentage> | auto | inherit

　　初始值: auto

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

　　繼承性: 無

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

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

<怪異盒模型>

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

內邊距

　　對於行內元素，左內邊距應用到元素的開始處，右內邊距應用到元素的結尾處，上下內邊距不影響行高

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

padding

　　值:[<length> | <percentage>]{1,4} | inherit

　　初始值: 未定義

　　應用於: 所有元素

　　繼承性: 無

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

外邊距

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

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

margin

　　值:[<length> | <percentage> | auto]{1,4} | inherit

　　初始值: 未定義

　　應用於: 所有元素

　　繼承性: 無

　　百分數: 相對於包含塊的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;

合併垂直外邊距

　　相鄰的兄弟級元素外邊距合併又稱為外邊距疊加

　　包含的父子級元素外邊距合併又稱為外邊距傳遞

　　在包含塊上設置邊框或內邊距時，會使其子元素的外邊距包含在包含塊內，會阻止外邊距傳遞

負外邊距

　　如果垂直外邊距都設置為負值，瀏覽器會選取兩個外邊距的絕對值的最大值。如果一個正外邊距與一個負外邊距合併，會從正外邊距減去這個負外邊距的絕對值

邊框

　　元素外邊距內就是元素的邊框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>