css盒子模型

css的盒模型有2种，分别为：
1、W3c标准的盒子模型（标准盒模型），width和height指的是内容区域的宽度和高度；
2、IE标准的盒子模型（怪异盒模型），width和height指的是内容区域、边框、内边距总的宽度和高度。

W3c标准的盒子模型（标准盒模型）

.box {
  width: 200px;                      // 宽
  height: 200px;                    // 高
  border: 20px solid black;        // 边框
  padding: 50px;                  // 内边距
  margin: 50px;                  // 外边距
 }

box.jpeg

解：标准盒模型下盒子的大小 =width + height + border + padding + margin

IE标准的盒子模型（怪异盒模型）

.box {
  width: 200px;                      // 宽
  height: 200px;                    // 高
  border: 20px solid black;        // 边框
  padding: 50px;                  // 内边距
  margin: 50px;                  // 外边距
 }

box0.jpeg

解：怪异盒模型下盒子的大小=width + height + margin

两种模式下如何解决样式的兼容性问题

box-sizing: content-box;
box-sizing: border-box;
box-sizing: inherit;

w3c.png

解：content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）