W3C 盒模型与 IE 传统模型的区别

Posted on Edited on

一、盒子模型(box model)

在HTML文档中的每个元素被描绘为矩形盒子。确定其大小，属性——比如颜色、背景、边框，及其位置是渲染引擎的目标。


CSS下这些矩形盒子由标准盒模型描述。这个模型描述元素内容占用空间。盒子有四个边界：外边距边界 margin edge, 边框边界border edge, 内边距边界padding edge 与 内容边界content edge。

二、盒模型分类

盒模型的计算有两种：w3c标准盒模型和IE传统盒模型

w3c标准盒模型主要由：magin + border + padding + content(他不包含其他部分)

IE盒子模型主要由：magin + content(他里面包含了border和padding)

为了能更清楚的了解这其中的差异，举个简单的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//举个例子：
div{
    width:100px;
    height:100px;
    padding:10px;
    border:5px;
    magin:30px
}

//在标准盒模型下面：
//div元素空间尺寸为：100 + 10 * 2 + 10 * 2 + 30 * 2 = 200px
//div元素大小为：100 + 10 * 2 + 10 * 2 = 140px;

//在IE盒模型下面：
//div元素空间尺寸：100 + 30 * 2 = 160px;
//div元素大小: 100px;