精彩评论
ytg3114(2周前 (01-04))
评:伪元素“::after”和“::before”的作用分别是什么_html5教程,伪元素,::after,::before少时诵诗书所
ytg3114(10个月前 (04-05))
:smile:
评:如何利用css实现放大缩小关闭效果_html5教程,css
我们通过实例来看看它们有什么不同:
(推荐学习:css快速入门)
一个盒子模型如下: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盒子模型有什么区别的详细内容,更多请关注ki4网其它相关文章!
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
上一篇:style标签怎么用?_html5教程,style,css
下一篇:纯 CSS 如何实现实现鼠标跟随效果?(代码详解)_html5教程,CSS,鼠标跟随
共 0 条评论关于"W3C盒子模型与IE盒子模型有什么区别_html5教程,W3C,IE,盒子模型"
最新评论