HTML知识点——盒模型

1.盒子模型

盒子模型 = content（内容） + padding（内边距） + border（边框） + margin（外边距）

2.W3C标准盒模型

width = content.width （即盒子的宽为内容的宽）

height = content.height（即盒子的高为内容的高）

在HTML文档开头声明 ，即使用W3C标准盒模型

如上例子中，盒子test的width设置为300px，在控制台可以看到，这个width为内容content的宽度。

3.IE盒模型

width = content + （padding + border）* 2

height = content + （padding + border） * 2

使用 box-sizing:border-box; 使用IE标准盒模型

我们设置width为300px，可以看出，此时 width = padding-left + content + padding-right