今天同学发给了我一份前端基础的面试题，第一道便是对css盒子模型的理解，我看到的第一眼想到的是div，然后就...懵逼了，知其然不知其所以然。所以打算写一写盒子模型的概念理解啥的，如有写的不当的地方，望指正见谅！
1、css3盒子模型
个人的理解是页面上所有的html元素都可以看作是盒子，即整个html页面就是由无数个盒子通过特定的布局结合在一起的，每个盒子包括内容（content）、内边距（padding）、边框（border）、外边距（margin）。
（一般来说margin有两种形式，一种是盒子与浏览器窗口的外边距，还有一种是盒子与相邻盒子的外边距）
2、关于盒子的宽高的问题
标准盒子模型，也就是咋们的大哥W3C规定的盒子模型，这种情况下：css中定义的宽高 = 盒子实际内容（content）的宽高，盒子的总宽高 = css定义的宽高 + padding + border + margin（注意计算时左右和上下的padding、margin都是两个）
如下定义了一个盒子，css代码和html代码如下：
1 #box{ 2 width: 200px; 3 height: 200px; 4 margin: 10px; 5 padding: 10px; 6 border: solid red;/* border默认宽度是3px 所以没写直接3px了*/ 7 }
1 <div id="box"> 2 我是一个盒子 3 </div>
在浏览器开发工具下的截图如下：
从图中可以看出:蓝色部分（200*200 )是盒子的content，绿色的是padding，黄色的是border, 深黄色是margin
但在IE浏览器中盒子的宽高计算方式会不一样：
IE盒子模型也叫怪异盒模型
在该模式下，浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和；即在怪异模式下的盒模型，盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin。
写到最后就有点想要放弃了，望路过的大佬见谅！凑合看吧~