一文搞懂css盒模型

众所周知，浏览器内核不同，盒模型分为两大派系，IE盒模型和标准盒模型。今天就带着大家深入剖析两者的不同。看完这篇文章，我不允许你记不住两者的区别
盒模型包含：content、padding、border、margin
1、标准盒模型

标准盒模型的代表，就是谷歌浏览器。标准盒模型标准css设置的height、width就是content本身的height、width和padding、border、margin没关系。

把盒模型比喻成房子，房子盖好了，房子长度和宽度是固定的，如果你再加padding、border不占用房子内部空间、是在房子外表做的，比如给房子外面加保温层，刷漆等操作
2、IE盒模型

IE盒模型。就是IE浏览器厂商代表。IE盒模型标准是设置height和width是固定的，你再加padding、border、margin值**只能挤占**固有的空间。

还是把盒模型比喻成房子、房子盖好了，长度宽度是固定的，只不过你再加padding、border是挤占房子内部空间的。
总结：将盒模型比喻成房子，设置盒子宽高就等价于房子盖好了，标准盒模型是房子空间不变（content内容不变）在房子外部加的装饰。IE盒模型（也称怪异盒模型）是房子空间被挤占了，也可以理解为房子内部装修，刷墙打柜子等占据了房子内部的空间。
以上仅代表个人理解，有不同意见或者不足，欢迎指出讨论...