div盒子模型

千次阅读 2019-01-30 12:29:50

div盒子模型 1.盒子模型简介以及兼容问题我们通常所说的盒子模型分为W3C盒子模型和IE盒子模型。W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。 IE 盒子模型的...

div盒子模型

1.盒子模型简介以及兼容问题

我们通常所说的盒子模型分为W3C盒子模型和IE盒子模型。W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。理解这一点有助于我们在使用过程中对盒子盒子模型的布局可以有更好的把握。

我们平时采用的是标准 W3C 盒子模型，规定采用W3C标准盒子模型就是在网页的顶部加上 DOCTYPE 声明。如果不加 DOCTYPE 声明，那么各个浏览器会根据自己的行为去理解网页，即 IE 浏览器会采用 IE 盒子模型去解释你的盒子，而 FF 会采用标准 W3C 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，如果加上了 DOCTYPE 声明，那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

注释：符合W3C的标准网站未必兼容所有浏览器。谷歌浏览器和火狐浏览器是最接近符合W3C标准的浏览器。我们建设网站一致是按照W3C的标准来进行的，目前各大浏览器的发展形势也基本趋同符合W3C标准，不过最值得一提的就是IE浏览器依然存在不少兼容问题。所以，通常开发者们处理兼容问题主要对象还是IE浏览器。也就是说，W3C的标准网站需要处理一下IE浏览器的兼容，才能达到我们目的。关于兼容问题建议去两个网站上看看，内容简单清楚，易理解。一个是C论坛，一个是W3school.com.cn再赠送一个解决IE兼容问题的视频，地址：http://www.tudou.com/programs/view/zxXqnQIeu9E

网页中的盒子模型；我们常常要控制盒子模型的宽度width:

w3c中的盒子模型的宽:包括margin+border+padding+width;

width:margin*2+border*2+padding*2+width;

height:margin*2+border*2+padding*2+height;

iE中的盒子模型的width:也包括margin+border+padding+width;

网页中的盒子模型；我们常常要控制盒子模型的宽度width:

w3c中的盒子模型的宽:包括margin+border+padding+width;

width:margin*2+border*2+padding*2+width;

height:margin*2+border*2+padding*2+height;

iE中的盒子模型的width:也包括margin+border+padding+width;

上面的两个宽度相加的属性是一样的。不过在ie中content的宽度包括padding和border这两个属性；

例如一个盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;

如果用w3c盒子模型解释，那么这个盒子模型占用的

宽度为：20*2+10*2+10*2+200=280px;

高度：20*2+10*2+20*2+50=130px;

盒子的实际宽度大小为:10*2+10*2+200=240px;

实际高度：10*2+10*2+50=90px;

用ie的盒子模型解释：盒子在网页中占据的大小为20*2+200=240px; 高：20*2+50=90px;

盒子的实际大小为：宽度:200px, 高度:50px;

我们常常理解的盒子模型是w3c这样的盒子模型

网页中的盒子模型；我们常常要控制盒子模型的宽度width:

w3c中的盒子模型的宽:包括margin+border+padding+width;

width:margin*2+border*2+padding*2+width;

height:margin*2+border*2+padding*2+height;

iE中的盒子模型的width:也包括margin+border+padding+width;

上面的两个宽度相加的属性是一样的。不过在ie中content的宽度包括padding和border这两个属性；

例如一个盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;

如果用w3c盒子模型解释，那么这个盒子模型占用的

宽度为：20*2+10*2+10*2+200=280px;

高度：20*2+10*2+20*2+50=130px;

盒子的实际宽度大小为:10*2+10*2+200=240px;

实际高度：10*2+10*2+50=90px;

用ie的盒子模型解释：盒子在网页中占据的大小为20*2+200=240px; 高：20*2+50=90px;

盒子的实际大小为：宽度:200px, 高度:50px;

我们常常理解的盒子模型是w3c这样的盒子模型

上面的两个宽度相加的属性是一样的。不过在ie中content的宽度包括padding和border这两个属性；

例如一个盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;

如果用w3c盒子模型解释，那么这个盒子模型占用的

宽度为：20*2+10*2+10*2+200=280px;

高度：20*2+10*2+20*2+50=130px;

盒子的实际宽度大小为:10*2+10*2+200=240px;

实际高度：10*2+10*2+50=90px;

用ie的盒子模型解释：盒子在网页中占据的大小为20*2+200=240px; 高：20*2+50=90px;

盒子的实际大小为：宽度:200px, 高度:50px;

我们常常理解的盒子模型是w3c这样的盒子模型

2.div盒子模型理解误区：如果规定了固定的width，height再设置padding那么是content缩小border的长和高不变还是content不变而新添加的padding把border的长和高撑大？（这里所说的border的长高变化主要是想要描述除过margin后整个div的大小是否发生了变化）

理解了第一部分的盒子模型及兼容问题后实际是这个理解误区自然也就没有了，在采用W3C标准的情况下应该是content不变而新添加的padding把border的长和高撑大也就是说除过margin后整个div的大小发生变化，在IE的标准下应该是border的长和高不变应为content包含了content 部分包含了 border 和 pading实际上也就是说除过margin后整个div的大小不会发生变化。

收起

展开全文