怪异盒模型与标准盒子模型的区别?(IE与w3c)
1、什么是盒子模型?
所谓盒子模型,即是将网页布局中的元素(能设置宽高的元素)进行拟物化的比喻。
盒子模型的组成?
一个盒子是由四个部分组成:
① “内容--content”(盒子内的物件)、
② “内间距--padding”(物件和盒子的距离)、
③ “边框--border”(盒子壁)、
④ “外间距--margin”(盒子和其它物体的距离)
2、标准盒子模型是什么样的?(也称w3c盒模型)
在标准的盒子模型中:
最终盒子的“width”和“height”=我们给元素设置的宽高 + padding + border;
换句话说:
在标准模型下,我们给元素设置的宽高只会作用到内容content上,如果元素padding和border有值的话,那么这些值是另外算的
3、标准盒子模型使用举例
如下图所示:我们给元素设置的100px的宽高在标准盒子模型下之后作用到内容上,和padding与border是不相干的。
<style>
div{
border: 10px red solid;
padding: 10px;
width: 100px;
height: 100px;
box-sizing: content-box; /* 标准盒子模型(默认也是这个值) */
}
</style>
<div>
hello
</div>
4、标准盒子模型示例效果演示
从下图我们看出,100像素确实只作用到元素的内容上了,padding和border是另外计算的。
即:
最终盒子的“width”和“height”=我们给元素设置的宽高 + padding + border;
5、怪异盒模型又是什么样的?(也称之为IE盒模型)
由于一些“客观”的原因,IE浏览器和标准的盒子模型有一定的差异。
IE浏览器盒子模型
最终盒子的width”和“height == 我们给元素设置的宽高
换句话说:
在标准模型下,我们给元素设置的宽高为content+padding+borderde
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>
7、怪异盒模型示例效果
从下图可以看出,在IE这种怪异盒模型下,我们设置的宽高变成了
100px == 内容宽高 + border + padding
8、开发时选择什么盒子模型?
开发时,在大部分情况下,为了更好的控制,我们一般选择的是IE盒模型。当然,这并不绝对。