CSS盒模型

一、盒模型分类介绍

1. W3C的标准盒模型

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

2. IE· 怪异盒模型

 在IE盒子模型中，width不含margin， 是content+padding+border三部分的宽度之和；

注：IE 浏览器默认使用这种盒模型，IE8+支持使用box-sizing进行切换。

二、字段区分

1. box-sizing

 如果想要切换盒模型也很简单，这里需要借助CSS3的box-sizing属性

• box-sizing: content-box，属于W3C盒子模型
• box-sizing: border-box， 属于IE盒子模型
• box-sizing的默认属性是content-box

三、盒模型分类追溯

 这个与文档模式有很大关系，HTML有两种文档模式：标准模式、混杂模式，详情请查看：标准模式、混杂模式两种文档模式