标准盒模型和IE盒模型（区别）

最新推荐文章于 2025-05-23 09:48:16 发布

xiaochumen0707

最新推荐文章于 2025-05-23 09:48:16 发布

阅读量4.9k

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/xiaochumen0707/article/details/107425643

标准盒模型

先不说它的盒子占用宽度等于什么，实际宽度等于什么加什么
看例子总结，更容易理解。

 .demo{
       width: 200px;
       height: 200px;
       background-color :pink;
       padding: 20px;
       margin: 10px;
       border: 10px solid  red;

   }

来图：为了方便看清楚，截了整个图,箭头所指为我们设置的div的宽和高
在这里插入图片描述
在标准盒模型性中,可以看到：

盒子在网页中实际占用:
宽 =width + padding2+border2 + margin2
高=height + padding2+border2 + margin2
盒模型实际大小:
宽 = width +padding2+border2
高 = height +padding2 + border2

下面来看标准盒模型图，这样结合例子来看就特别清楚
在这里插入图片描述

IE盒模型

概念：IE 盒子模型的范围和标准w3c 盒模型一样，包括 margin、border、padding、content。不同的是content内容区包括了border和padding
在这里插入图片描述
盒子在网页中实际占用:
宽 =width +margin2
高=height + margin2
盒模型实际大小:
宽 = width
高 = height

IE盒模型的优点就是盒子实际的宽高就是自己设置的宽高，无须再进行计算，它的padding和border已经包含在content中
那么问题来了，引用IE盒模型有什么用呢？
举个例子：

.demo{
     display: flex;
     width: 500px;
     background-color: palevioletred;
 }
   .demo1{   
    width: 50%;
    height: 100px;
    background-color :pink;        
   }
   .demo2{  
     width: 50%;
     height: 100px;
     background-color :green; 
   }

 <div class="demo">
        <div class="demo1"></div>
        <div class="demo2"></div>
    </div>

效果如图：标准盒模型下设置的两个div，要的效果就是如图这样，但是如果想要给其中一个设置一个边框，我们看一下效果
在这里插入图片描述
结果变成了这样：demo2的宽高被压缩了

可是我们既想要加边框，又不想它的宽高发生变化，怪异盒模型（IE盒模型）就解决了这种问题：
css3提供了一种将标准盒模型转换为怪异盒模型的方法：