CSS之盒模型

CSS的盒模型是CSS的不可缺少一块，只有正确的理解盒模型，你才能轻松的对页面进行布局操作。

1、CSS盒模型分为两种：

1、W3C的标准盒模型

为了更好的说明，从网上截取了两张图片

一般浏览器都是默认的这种盒子模型

2、IE的标准盒子模型

从两张图中可以看出，两种盒子模型的区别是hegiht和width的区别，

W3C的盒子模型中height和width只是单纯的content中的内容

而IE的盒子模型中height和width=content+wpadding+border

 

2、盒子模型的四种属性

接着我们来说一下盒子模型的四种属性

从外到内依次为

margin(外边距) - 清除边框外的区域，外边距是透明的。
border(边框) - 围绕在内边距和内容外的边框。
padding(内边距) - 清除内容周围的区域，内边距是透明的。
content(内容) - 盒子的内容，显示文本和图像。

3、盒子模型的切换

CSS3中提供了box-sizing的属性，用于切换盒子模型

box-sizing: content-box 是W3C盒子模型

box-sizing: border-box 是IE盒子模型

其中，box-sizing还提供了一个inherit属性，该属性从父元素中继承box-sizing属性

4、另外说明

盒子模型默认属性为content-size

综上，两种盒子模型没有好坏区分，仅仅只是有部分区别而已。

重点还是要理解盒子模型的概念及属性，来顺利的实现页面布局。