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

原创

艾编程

发布于 2022-12-13 15:11:26

71600

代码可运行

文章被收录于专栏：艾编程艾编程

运行总次数：0

代码可运行

理解盒模型：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;和添加后，两者渲染后的效果如下

标准盒模型

标准盒模型下的width:100px;height:150px;只包含了content部分,所以content的宽高为100px和150px;

怪异盒模型

width:100px;height:150px;包含了border、padding、content三部分，则通过计算得出content内容区的高为: 150px-20px*2-10px*2=90px宽为：100px -20px*2 -10px*2=40px

盒模型转换

可以通过修改元素的 box-sizing 属性来改变元素的盒模型：

box-sizing: content-box表示标准盒模型（默认值）
box-sizing: border-box表示 IE 盒模型（怪异盒模型）

你学会了吗？

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css

登录后参与评论

暂无评论