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

最新推荐文章于 2025-09-28 16:27:17 发布

原创最新推荐文章于 2025-09-28 16:27:17 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#CSS盒子模型

前端专栏收录该内容

15 篇文章

订阅专栏

本文深入讲解了CSS中的标准(W3C)盒模型和怪异(IE)盒模型的区别，包括它们的内容(content)、内填充(padding)、边框(border)、外边距(margin)的计算方式，以及如何在标准浏览器中通过设置box-sizing属性来触发不同的解析计算模式。

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

- 标准(W3C)盒模型
- 怪异(IE)盒模型

这是一个很基础的前端问题，在考察前端基础功底的时候，特别是在校招的情况下会经常被问到。
标准的盒模型主要有两种：标准(W3C)盒模型，怪异(IE)盒模型。两者的区别就在于元素宽度计算方式不一样。盒子模型构成：内容(content)、内填充(padding)、边框(border)、外边距(margin)。IE8及其以下版本浏览器，未声明 DOCTYPE，内容宽高会包含内填充和边框，被称为怪异盒模型(IE盒模型)。