盒模型【热度: 753】

[yanlele]

关键词：盒模型

盒模型

CSS3 中的盒模型有以下两种：标准盒子模型、IE 盒子模型

盒模型都是由四个部分组成的，分别是 margin、border、padding 和 content。

在标准盒模型性中

盒子在网页中实际占用:
宽 = width + padding2 + border2 + margin2
高 = height + padding2 + border2 + margin2

盒模型实际大小:
宽 = width + padding2 + border2
高 = height + padding2 + border2

在 IE 盒模型性中

盒子在网页中实际占用:
宽 = width + margin2
高 = height + margin2

盒模型实际大小:
宽 = width
高 = height

可以通过修改元素的 box-sizing 属性来改变元素的盒模型：

• box-sizeing: content-box表示标准盒模型
• box-sizeing: border-box表示 IE 盒模型