盒子模型(标准盒模型，怪异盒模型)

信息：盒模型

当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成。

中间是元素呈现内容的区域。这个区域的外面是内边距。再外面是边框。最外面的是外边距，外边距将该元素与其它元素分开。

内边距，边框和外边距在元素的上、右、下、左都可以有不同的大小。所有这些大小值都可以为0。

颜色
内边距总是跟元素的背景色一样，所以当你设置背景色时，你会发现背景色在元素本身和内边距上都生效了。外边距总是透明的。

标准盒模型与怪异盒模型

对比两种模型的区别

1.标准盒模型

标准盒模型（W3C盒子模型），设置的width或height是对 实际内容（content）的width或height进行设置，内容周围的border和padding另外设置，即盒子模型的width（height）=设置的content的宽高+padding+border+margin

注：除内容content外，其他为上下左右都有

2.怪异盒模型

怪异盒模型（IE盒子模型），设置的width或height是对 实际内容（content）+内边距（padding）+边框（border）之和的width和height进行设置的，其盒模型的width（height）=设置的width（height）+外边距margin

解决两者的兼容问题

可尝试对父元素使用内边距，对子元素使用外边距

3、box-sizing的应用

• box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。（个人认为可以理解为指定盒模型的类型，即上述两种类型）
• box-sizing值为content-box时：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。（即
  标准盒模型）
  box-sizing值为border-box时：为元素设定的宽度和高度决定了元素的边框盒，就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。（即
  怪异盒模型） box-sizing值为inherit时：规定应从父元素继承 box-sizing 属性的值。