怪异盒模型与标准盒子模型的区别?(IE与w3c)

2025-10-20 01:45:19

1、什么是盒子模型?

    所谓盒子模型,即是将网页布局中的元素(能设置宽高的元素)进行拟物化的比喻。

盒子模型的组成? 

 一个盒子是由四个部分组成:

① “内容--content”(盒子内的物件)、

② “内间距--padding”(物件和盒子的距离)、

③ “边框--border”(盒子壁)、

④ “外间距--margin”(盒子和其它物体的距离)

怪异盒模型与标准盒子模型的区别?(IE与w3c)

2、标准盒子模型是什么样的?(也称w3c盒模型)

在标准的盒子模型中:

最终盒子的“width”和“height”=我们给元素设置的宽高 + padding + border;

换句话说:

    在标准模型下,我们给元素设置的宽高只会作用到内容content上,如果元素padding和border有值的话,那么这些值是另外算的

怪异盒模型与标准盒子模型的区别?(IE与w3c)

3、标准盒子模型使用举例

    如下图所示:我们给元素设置的100px的宽高在标准盒子模型下之后作用到内容上,和padding与border是不相干的。

<style>

div{

border: 10px red solid;

padding: 10px;

width: 100px;

height: 100px;

box-sizing: content-box; /* 标准盒子模型(默认也是这个值) */

}

</style>

<div>

hello

</div>

怪异盒模型与标准盒子模型的区别?(IE与w3c)

4、标准盒子模型示例效果演示

从下图我们看出,100像素确实只作用到元素的内容上了,padding和border是另外计算的。

即: 

最终盒子的“width”和“height”=我们给元素设置的宽高 + padding + border;

怪异盒模型与标准盒子模型的区别?(IE与w3c)

5、怪异盒模型又是什么样的?(也称之为IE盒模型)

由于一些“客观”的原因,IE浏览器和标准的盒子模型有一定的差异。

IE浏览器盒子模型

      最终盒子的width”和“height == 我们给元素设置的宽高

换句话说:

     在标准模型下,我们给元素设置的宽高为content+padding+borderde

怪异盒模型与标准盒子模型的区别?(IE与w3c)

6、怪异盒模型使用举例

<style>

div {

border: 10px red solid;

padding: 10px;

width: 100px;

height: 100px;

/* box-sizing: content-box; 标准盒子模型(默认也是这个值) */

box-sizing: border-box;/* IE盒子模型(也称之为怪异盒子模型) */

}

</style>

<div>

hello

</div>

怪异盒模型与标准盒子模型的区别?(IE与w3c)

7、怪异盒模型示例效果

从下图可以看出,在IE这种怪异盒模型下,我们设置的宽高变成了

100px == 内容宽高 + border + padding

怪异盒模型与标准盒子模型的区别?(IE与w3c)

8、开发时选择什么盒子模型?

    开发时,在大部分情况下,为了更好的控制,我们一般选择的是IE盒模型。当然,这并不绝对。

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢