盒子模型的尺寸解析

在这里我们分析了在W3c标准下的盒子模型和在IE模式下的盒子模型。

根据由万维网联盟（W3C）于1996年发行并于1999年修订的CSS1所指定的，当任意一个块级元素的宽度或高度被显式指定，它应当只确定这个可见元素自身(内容区)的宽度或高度，而padding, border和margin随后被应用。Internet Explorer在“怪异模式” 则把内容，内边距（padding）和边框（border）全部包括在一个指定的宽度或高度之内；这导致它呈现出一个比遵从标准行为的结果更窄或者更短的盒子，具体分析如下：

1. 让元素维持W3C的标准盒模型

元素的总宽度和高度是：边框宽度+元素内边距+元素内容的宽度。即显示在我们界面上的所占的宽度。但是在css中设定的“width”是他的内容的宽度，而不是总宽度。因此总宽度=width+2*padding+2*border；

2. 维持IE传统模式

元素的总宽度等于css中设定的“width”宽度。而内容宽度等于=width-2*border-2*padding。

3. 图例分析

W3C的标准盒模型

IE传统模式盒子模型