盒子模型

CSS盒子模型分为两种：标准盒模型、IE盒模型

1. box-sizing:content-box —— 页面采用标准模式content-box解析计算

2. box-sizing:border-box —— 页面采用IE模式解析计算

3. inherit：页面从父元素继承box-sizing的值

盒子的大小由content、padding、border决定

两者的区别在于content的不同，IE盒模型的content包括border、padding，这会影响盒子的宽高计算

在IE盒子模型中，width表示content+padding+border这三个部分的宽度

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

参考自CSDN

1. 内容区域content 内容区域content area 是包含元素真实内容的区域。它通常包含背景、颜色或者图片等，位于内容边界的内部，它的大小为内容宽度 或 content-box宽及内容高度或content-box高。 如果 box-sizing 为默认值， width, min-width, max-width, height, min-height 与 max-height 控制内容大小。

2. 内边距区域padding 内边距区域padding area 延伸到包围padding的边框。如果内容区域content area设置了背景、颜色或者图片，这些样式将会延伸到padding上(而不仅仅是作用于内容区域)。它位于内边距边界内部, 它的大小为 padding-box 宽与 padding-box 高。 内边距与内容边界之间的空间可以由 padding-top, padding-right, padding-bottom, padding-left 和简写属性 padding 控制。

3. 边框区域border 边框区域border area 是包含边框的区域，扩展了内边距区域。它位于边框边界内部，大小为 border-box 宽和 border-box 高。由 border-width 及简写属性 border控制。

4. 外边距区域margin 外边距区域margin area用空白区域扩展边框区域，以分开相邻的元素。它的大小为 margin-box 的高宽。 外边距区域大小由 margin-top, margin-right, margin-bottom, margin-left 及简写属性 margin 控制。 注意: 在外边距合并 的情况下，由于盒之间共享外边距，外边距不容易弄清楚。 对于非替换的行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（行高）由 line-height 属性决定。