CSS魔法堂：盒子模型簡介

標籤：style   blog   http   color   使用   ar   strong   2014   art   

一、W3C標準的盒子模型　　　　　　　　　　　　　　　　　　　　　　　　　　　　 

 

 

二、IE盒子模型　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

 

三、兩種模型的區別　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

W3C標準盒子模型：

  外盒模型

       元素空間寬度 = content width + padding + border + margin的寬度

       元素空間高度 = content width + padding + border + margin的高度

  內盒模型

　　元素寬度 = content height + padding + border的寬度

       元素高度 = content height + padding + border的高度

 E盒子模型：

  外盒模型

       元素空間寬度 = content width + margin的寬度

       元素空間高度 = content height + margin的高度

  內盒模型

　　元素寬度 = content width

    　元素高度 = content height

當IE6~8處於怪異模式下就會使用IE盒子模型，否則將使用W3C標準盒子模型。

 

四、CSS3規則——box-sizing　　　　　　　　　　　　　　　　　　　　　　　　　　　

box-sizing有三個值，預設是content-box（表示元素使用W3C盒子模型），而border-box（表示元素使用IE盒子模型），inherit（從父元素上繼承）

瀏覽器支援：IE8開始支援

Element{  -moz-box-sizing: border-box; // FireFox3.5+  -o-box-sizing: border-box; // Opera9.6(Presto核心)  -webkit-box-sizing: border-box; // Safari3.2+  -ms-box-sizing: border-box; // IE8  box-sizing: border-box; // IE9+,Chrome10.0+,Safari5.1+,Opera10.6}

 

五、總結　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  盒子模型是CSS的基礎，雖然IE一直被大家詬病，但不代表IE盒子模型就比W3C標準盒子模型差，後面我們一起深入學習CSS3樣式規則box-sizing就明白了。

  尊重原創，轉載請註明來自： http://www.cnblogs.com/fsjohnhuang/p/3967623.html ^_^肥仔John

 

六、參考　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

http://www.cnblogs.com/releaseyou/archive/2009/04/16/1437456.html

http://blog.csdn.net/ncode/article/details/7428746

http://www.w3cplus.com/content/css3-box-sizing

 

CSS魔法堂：盒子模型簡介