持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第31天，点击查看活动详情
CSS中盒子模型分为两种： 一种是符合W3C规范的标准盒模型，我们之前已经了解许多啦～有需要可以翻翻前面的信息哦！另一种是IE的盒子模型，就是今天说的“怪异盒模型”！
怪异盒子模型也叫IE盒模型
对于怪异盒子模型来说：
width指的是内容、边框、内边距总的宽度（content+border+padding）height指的是内容、边框、内边距总的高度padding和border被包含在定义的width和height之内
即：实际宽度就等于设置的width值。即使定义有border和padding也不会改变对象的实际宽度，即（Element width=width）
例如1：抽象示例图，参考
例如2：实际数值例子，参考
与标准盒子模型的区别
关键：元素内容的width和height的范围不同
- 当
box-sizing=context-box时，为怪异盒模型。其中内容元素不会把容器扩大，而是自动调节元素大小保持整体美观～ - 当
box-sizing=context-box时，则为我们常见的标准盒模型
一句话总结就是：标准模式会被设置的padding撑开，而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子～
写在最后
重新开始更文啦！最近忙了一段时间，终于继续可以学习！感谢大家的支持！我会继续努力坚持学习！养成了好习惯，每天必定会抽出时间多多少少学习前端知识～
以上习题&笔记从大佬们的论坛学习而来，特感谢大佬们的知识分享～ （学习技术知识，果然要看大佬们的技术博客，大家有好的推荐也欢迎指引我这个小白哈，感恩！）
附上学习链接，感谢这些大佬出题和解答：
