【HTML/CSS】CSS盒模型及其理解

1 盒模型

1. 概念：CSS盒模型本质是一个盒子，包括：外边距margin、边框border、内边距padding、内容content

2. 分类：标准盒模型（W3C）和怪异盒模型（IE）
   标准盒模型：width的值就是content的值
   

   怪异盒模型：width的值等于content+padding+border
   

2 如何解决样式兼容性问题

1. 不要给子元素设置内边距
2. 可以给父元素加内边距或者给子元素加外边距

3 CSS3指定盒模型

可以使用box-sizing指定盒模型的类型：

1. content-box：标准模型
2. border-box：怪异模型
3. inherit：继承父元素

4 容易混淆的API

// 获取的是content的宽度，而不是width属性的值
document.getElementById('#div).width() 
// 获取的是width属性的值
document.getElementById('#div).css('width') 
// innerWidth获取的是padding+content的值，不含border
document.getElementById('#div).innerWidth()