介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

紫微前端

于 2022-03-23 08:43:45 发布

阅读量671

点赞数

分类专栏：前端知识加深文章标签：前端面试

本文链接：https://blog.csdn.net/liuhao9999/article/details/123676739

版权

前端知识加深专栏收录该内容

510 篇文章 ¥39.90 ¥99.00

订阅专栏

本文详细介绍了标准CSS盒子模型的组成，包括内容区、内边距、边框和外边距。同时，对比了低版本IE浏览器的非标准盒子模型，指出其内容区域包含边框和内边距的特点，以及这对布局的影响。了解这些差异对于前端开发者解决兼容性问题至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（1）有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分
IE盒模型和W3C标准盒模型的区别：
（1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding（2）IE盒模型：属性width，height包含content、border和padding，指的是content+padding+border。
在ie8+浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为content-box，即标准盒模型；如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6，7，8中DOCTYPE缺失会将盒子模型解释为IE盒子模型。若在页面中声明了DOCTYPE类型，所