一、CSS盒模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。
二、CSS盒子模型有几种？
1. W3C盒子模型(标准盒模型)
1.标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。
2.标准盒模型下盒子的大小 = content + border + padding + margin
2. IE盒子模型(怪异盒模型)
1.怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度 2.怪异盒模型下盒子的大小=width（content + border + padding） + margin
三、设置盒子模型（CSS3指定盒子模型种类）：
语法：
box-sizing: content-box;
box-sizing: border-box;
box-sizing: inherit;
即box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。
四、解决两种模式下样式的兼容性问题
建议不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
