盒模型是CSS中一个重要的概念,一般来说,分为IE盒模型和W3C盒模型,我们只需看两张图即可。
标准盒模型
IE盒模型
实际上,标准与IE盒模型都是包括了margin,border,padding与content,不同点在于IE的content是包括border和padding部分。
要计算盒子所占用的空间,对于标准盒模型来说为:
宽:width+2×padding+2×border+2×margin
高:height+2×padding+2×border+2×margin
对于IE盒模型为:
宽:width+2×margin
高:height+2×margin