CSS中盒子模型怎么划分,分别是怎样�
Admin 2022-07-13 群英技术资�
在html文档中,每个渲染在页面中的标签都是一个个盒子模型�
盒子模型又分� � W3C标准的盒子模�
� IE标准的盒子模�
�
由于目前大部分主流的浏览器支持的是W3C标准盒模型(标准盒模型),也有保留对怪异盒子样式的解析,当然IE沿用的是自己标准的盒模型(怪异盒子模型�
用两个简单的例子分别介绍下这两个盒子模型�
标准盒模型:
<!--html--> <div class="box1"> <div class="box2"></div> </div>
<!--css--> .box1{ width: 200px; height: 200px; background-color: aqua; padding: 30px; } .box2{ width: 200px; height: 200px; background-color: red; }
这里外层盒子的width和height都是�30 + 200 + 30 = 260px�
怪异盒模�
<!--css中加入box-sizing属�--> <!--box-sizing属性:border-box(怪异盒子模型),content-box(标准盒模�)--> .box1{ width: 200px; height: 200px; background-color: aqua; padding: 30px; box-sizing: border-box; } .box2{ width: 200px; height: 200px; background-color: red; }
这里外层盒子的width和height都是�30 + 140+ 30 = 200px�
这里得出一个结论:
标准盒模型,一个块的总宽� = width(content的宽度) + margin(左右)+ padding(左右)+ border(左右)
怪异盒模型,一个块的总宽� = width(content + border + padding�+ margin(左右)
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章主要介绍了canvas绘制折线路径动画实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
外部样式表,通过标签引入CSS。内部样式表,在HTML文档中的标签里通过标签书写CSS代码。行内样式表,通过属性书写CSS语句。导入样式表,使用@import指令导入外部样式表�
css如何设置不可点击?可以通过设置元素的pointer-events属性设置为none,来实现元素不可点击。此方法是通过设置元素的鼠标事件失效来实现元素不可点击�
这篇文章主要介绍了html+css实现图片扫描仪特�,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
这篇文章主要介绍了通过CSS的滤镜实现火焰效果的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078