盒子模型用于处理元素的内容、内边距、边框和外边距的方式简称。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。
CSS实现页面布局的一种思想：把页面的所有元素都看成一个类似于礼品盒的盒子，礼品盒可能会有好多层包装组成，那么页面元素也对应的有内容、边框、内外边距等组成。这里特别提醒一下，盒模型是要把元素看成立体的，它确实有空间的3D属性,css盒子3D模型从上到下分为5层：1、border；2、content+padding；3、background-image；4、background-color；5、margin。
目前有： 标准盒子模型和IE盒子模型 2种盒模型 ，区别在于：
为了满足跨浏览器的差异，我们比较肯定的方式是使用标准盒模型，这里通过在网页顶部增加DOCTYPE的声明，来解决跨浏览器兼容方案（或者使用css3的声明方式）：
块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化，另外
块级元素：div , p , form, ul, li , ol, dl,form, address, fieldset, hr, menu, table...
行内元素(内联元素)：a , span, strong, em, br , img , input, label, select, textarea, cite....
如果想让一个元素可以设置宽度高度，又让它以行内形式显示，我们可以设置display的值为inline-block。
CSS3增加的box-sizing属性,允许我们规定元素使用哪种盒模型。IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-。它具有有3个属性值：
box-sizing:content-box： W3C标准盒模型，默认属性。padding和border不被包含在定义的width和height之内。
box-sizing:border-box： IE6混杂模式盒模型， padding和border被包含在定义的width和height之内。此属性表现为怪异模式下的盒模型。
box-sizing：inherit ： 从父级元素中继承该属性。
如果设置box-sizing：border-box来使用IE6混杂盒模型 ，那么
设置padding与border后，内容区的宽度和高度被压缩为70px 70px,盒子的原尺寸仍然是100px 100px
当一个容器宽度定义为 width:100%之后，如果再增加 padding 或者 border 则会溢出父容器，是向外扩张的。如果使用该样式，指定为 box-sizing: border-box则 padding 和 border 就不会再溢出，而是向内收缩的，这个效果是非常实用的。
IE盒子模型box-sizing:border-box（怪异模式）
W3C标准盒子模型 box-sizing:content-box（标准模式）默认模式
content-box:这是默认样式指定CSS标准。测量width和height属性只包括的内容，但不是border, margin, 或者 padding。
padding-box:width和height属性包括padding的大小，不包括border和margin
border-box:width和height属性包括padding和border，但不是margin。这是盒模型的文档时，Internet Explorer使用Quirks模式。
content-box不包含padding，border-box包含padding。所以如果你设置的大小是一样的，content-box看起来，会比border-box大
CSS盒子模型由四个部分组成，包括：外边距(margin)、内边距(padding)、边框(border)、内容区(width和height)
标准的CSS盒子模型和低端IE CSS盒子模型（也叫怪异盒模型）不同，区别在于：
标准的css盒子模型宽高=内容区宽高
低端IE css盒子模型宽高=内容区宽高+内边距﹢边框
即：width/height = content + padding + border
所以标准盒模型下，盒子的总宽高计算公式是：content宽或高 + border + padding + margin
怪异盒模型下盒子的总大小=width（content + border + padding） + margin
W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。而IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
解决IE8及更早版本不兼容问题，可以在HTML页面声明 <!DOCTYPE html>。
如果是定义了完整的doctype的标准文档类型，无论是哪种模型情况，最终都会触发标准模式，
如果doctype协议缺失，会由浏览器自己界定，在IE浏览器中IE9以下（IE6.IE7.IE8）的版本触发怪异模式，其他浏览器中会默认为W3c标准模式。
另外，我们还可以通过属性box-sizing来设置盒子模型的解析模式
当设置为box-sizing:content-box时，将采用标准模式解析计算（默认模式）；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；
参考教程：
2020权威HTML+CSS零基础入学-渡一教育
CSS 盒子模型-W3C手册
标准的CSS盒子模型？与低版本IE的盒子模型有什么不同的？
W3C盒模型和IE盒模型的区别
什么是CSS盒模型 IE盒模型和W3C盒模型
