ss盒子模型：網頁設計中css技術所使用的一種思維模型。
css盒子模型組成：外邊距（margin）、邊框（border）、內邊距（padding）、內容（content）。
css盒子模型分為：標準w3c盒子模型，ie盒子模型，注意在兩種模型中寬（width）和高（height）包括屬性的不同。
w3c模型中：
css中的寬（width）=內容（content）的寬
css中的高（height）=內容（content）的高
eg:w3c模型
則此div的實際大小：
div高=height+（padding+border+margin）*2=50+(2+1+3)*2=62px;
div寬=width+（padding+border+margin）*2=50+(2+1+3)*2=62px;
div內容佔大小：div寬=width=50px；
e模型中：
css中的寬（width）=內容（content）的寬+（border+padding）*2
css中的高（height）=內容（content）的高+（border+padding）*2
eg:w3c模型
則此div的實際大小：
div高=height+margin2=50+32=56px;
div寬=width+margin2=50+32=62px;
div內容佔大小：div寬=width-（border+padding）*2=50-（1+2）*2=44px;
盒模型 IE盒模型和W3C盒模型
w3c盒模型 可以看到得到的盒子寬度和高度是120 20 20 5 5 10 10 190px ie盒模型 可以看到得到的盒子寬度和高度是120 10 10 140px 其中的120 70 20 20 5 5。也就是設定的div寬度包括了內容內邊距和邊框的寬度。通過這兩對盒子進行對比可以清楚看到兩種...
IE 盒模型和W3C盒模型
在css中有兩種盒模型 box sizing屬性可以設定元素應用哪一種盒模型。瀏覽器相容性 ie8及以上 box sizing border box 以上css 會使元素的盒模型為ie盒模型。width 與 height 包括內邊距 padding 與邊框 border 不包括外邊距 margin ...
標準盒模型 w3c 和IE盒模型
盒子模型是css中乙個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是 ie 盒子模型 和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟知的標準盒子模型 從上圖可以看到標準 w3c 盒子模型的範圍包括 margin border padding conten...