![](https://img2020.cnblogs.com/blog/2191084/202011/2191084-20201117201110691-1985379810.jpg)
标准盒模型
组成部分 margin border padding content(width/height)
实际宽度计算:margin+border+padding+width
![](https://img2020.cnblogs.com/blog/2191084/202011/2191084-20201117201207655-92161704.jpg)
怪异盒模型
组成部分 margin content(width/height/border/padding)
实际宽度计算:margin+width
相互转化
box-sizing:content-box/border-box
补充:怪异模式 --- IE下文档类型缺失时触发的一种模式
以上纯属个人看法 如有错误欢迎提出 我加以修改!