css基础-盒模型知识

简介：就是用来装页面上的元素的矩形区域。CSS 中的盒子模型包括IE 盒子模型(border-box)和标准的 W3C 盒子模型(content-box)。

 

 区别：从图中我们可以看出，这两种盒子模型最主要的区别就是width 的包含范围。

在标准的盒子模型中，width 指 content 部分的宽度。

在 IE 盒子模型中，width 表示content+padding+border 这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异：

标准盒子模型的盒子宽度：左右 border+左右 padding+width

IE 盒子模型的盒子宽度：width

在 CSS3 中引入了 box-sizing 属性，box-sizing:content-box;表示标准的盒子模型，box-sizing:border-box 表示的是 IE 盒子模型