css盒子实体模型图解

日期:2021-01-20 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

从上图能够看到规范 W3C 盒子实体模型的范畴包含 margin、border、padding、content,而且 content 一部分不包括别的一部分。

从上图能够看到 IE 盒子实体模型的范畴也包含 margin、border、padding、content,和规范 W3C 盒子实体模型不一样的是:IE 盒子实体模型的 content 一部分包括了 border 和 pading。

例:1个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px、高为 50px,假如用规范 W3C 盒子实体模型解释,那末这个盒子必须占有的部位为:宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px,盒子的具体尺寸为:宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px;假如用IE 盒子实体模型,那末这个盒子必须占有的部位为:宽 20*2+200=240px、高 20*2+50=70px,盒子的具体尺寸为:宽 200px、高 50px。

那应当挑选哪中盒子实体模型呢?自然是“规范 W3C 盒子实体模型”了。如何才算是挑选了“规范 W3C 盒子实体模型”呢?很简易,便是在网页页面的顶部再加 DOCTYPE 申明。假如不加 DOCTYPE 申明,那末各个访问器会依据自身的个人行为去了解网页页面,即 IE 访问器会选用 IE 盒子实体模型去解释你的盒子,而 FF 会选用规范 W3C 盒子实体模型解释你的盒子,因此网页页面在不一样的访问器中就显示信息的不1样了。反之,假如再加了 DOCTYPE 申明,那末全部访问器都会选用规范 W3C 盒子实体模型去解释你的盒子,网页页面就可以在各个访问器中显示信息1致了。

上一篇:淘宝导航栏栏css编码共享 返回下一篇:没有了