前端入门教程：CSS标准盒模型和怪异盒模型区别

艾编程前端技术

已于 2022-12-13 23:00:34 修改

阅读量461

点赞数

分类专栏： WEB前端入门 html+css教程文章标签：前端学习 javascript

于 2022-12-13 23:00:16 首次发布

本文链接：https://blog.csdn.net/Codinglaoshi/article/details/124167211

版权

WEB前端入门同时被 2 个专栏收录

53 篇文章

订阅专栏

html+css教程

13 篇文章

订阅专栏

本文介绍了CSS中的标准盒模型和IE盒模型，解释了盒模型的5个属性：width、height、border、padding和margin。重点讨论了两者在width和height属性上的差异，并通过案例展示了不同盒模型的渲染效果。此外，文章还提到了如何通过box-sizing属性转换盒模型，并提及了一个为期30天的学习计划，旨在帮助前端初学者掌握实际项目开发技能。

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

理解盒模型：CSS3 中的盒模型有以下两种：标准盒模型、IE盒子模型(怪异盒模型)，盒模型是由4个部分组成，由内向外分别是content(下图蓝色部分)、padding、border、margin盒模型有5个属性：

width 元素宽
height 元素高
border 元素边框线
pdding元素内边距
margin元素外边距

一张图来理解盒模型的5个属性

父子间间距，通过给父元素设置padding来实现

兄弟间间距，通过给元素设置margin来实现

标准盒模型和 IE盒模型- 两者区别

标准盒模型和 IE盒模型的区别在于设置 width 和 height 属性时，所对应的范围不同：

标准盒模型的 width 和 height 属性的范围只包含了 content内容区。
IE盒模型（怪异盒模型）的 width 和 height 属性的范围包含了 border、padding 和 content。

案例展示

<style>
     .box {
       width: 100px;
       height: 150px;
       padding: 20px;
       border: 10px;
       margin: 50px;
       box-sizing: border-box;/*怪异地盒子模型*/
    }
   </style>
 <body>
   <div class="box"></div>
 </body>

以上代码，在未添加box-sizing: border-box;和添加后，两者渲染后的效果如下

标准盒模型