標準盒模型和IE怪異盒模型
以上幾種DOCTYPE都是標準的文件型別,無論使用哪種模式完整定義DOCTYPE,都會觸發標準模式,而如果DOCTYPE缺失則在ie6,ie7,ie8下將會觸發怪異模式(quirks 模式)。
首先定義一個div塊用來演示標準模式和怪異模式的區別,以下是Css樣式
.box { width: 200px; height: 200px; border: 20px solid black; padding: 50px; margin: 50px; }
在標準模式下的盒模型如下圖所示,盒子總寬度/高度=width/height+padding+border+margin
在怪異模式下的盒模型如下圖所示,盒子的總寬度和高度是包含內邊距padding和邊框border寬度在內的,
盒子總寬度/高度=width/height + margin = 內容區的寬度/高度 + padding + border + margin;
看到這裡你應該對盒模型的兩種模式有了清晰的認識,下面在此基礎上介紹一下css3屬性box-sizing;
box-sizing有兩個值一個是content-box,另一個是border-box。
當設定為box-sizing:content-box時,將採用標準模式解析計算,也是預設模式;
當設定為box-sizing:border-box時,將採用怪異模式
目前使用此屬性需要字首如下:
-webkit-box-sizing: content-box; -moz-box-sizing: content-box;
盒子模型是css中一個重要的概念,其實盒子模型有兩種,分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同,先來理解下兩種不同的盒子:
從上圖可以看到標準 w3c 盒子模型的範圍包括 margin、border、padding、content,並且 content 部分不包含其他部分。
ie 盒子模型
從上圖可以看到 ie 盒子模型的範圍也包括 margin、border、padding、content,和標準 w3c 盒子模型不同的是:ie 盒子模型的 content 部分包含了 border 和 pading。