资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

W3C盒子模型和IE盒子模型的不同点-创新互联

创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商,新人活动买多久送多久,划算不套路!

创新互联公司-专业网站定制、快速模板网站建设、高性价比东风网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式东风网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖东风地区。费用合理售后完善,十年实体公司更值得信赖。

这期内容当中小编将会给大家带来有关W3C盒子模型和IE盒子模型的不同点,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

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

现计算出两种盒子模型下盒子的宽高。

W3C标准盒子:

盒子占用空间的宽高:(在浏览器页面所占空间)

Width = 200 + 10*2 + 10*2 + 20*2 = 280 px;

Height = 50 + 10*2 + 10*2 + 20*2 = 130 px;

盒子实际宽高:

Width = 200 + 10*2 + 10*2 = 240 px;

Height = 50 + 10*2 + 10*2 = 90 px;

IE盒子:

盒子占用空间的宽高:(在浏览器页面所占空间)

Width =  200 + 20*2 = 240 px;

Height = 50 + 20*2 = 90 px;

盒子实际宽高:

Width = 200 px;

Height = 50 px;

由数据可以看出,同样的数据下,border-box是比content-box要小的。

显示效果:

W3C盒子模型和IE盒子模型的不同点

上述就是小编为大家分享的W3C盒子模型和IE盒子模型的不同点了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联-成都网站建设公司行业资讯频道。


网站名称:W3C盒子模型和IE盒子模型的不同点-创新互联
网页URL:http://cdkjz.cn/article/pesgj.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220