1. CSS盒模型分为标准盒模型
和IE盒模型
2. 区别:IE盒模型的width包括padding和border,而标准盒模型的width只是content。
3.一张图:
盒模型图示
比如说:给一个元素的width设置为100px,在IE盒模型下,该元素的
content+左右padding+左右border=100px
,如果将该元素的padding增大,那么它的content就会相应的减小
而对于标准和模型,给定width就是content的值,content的大小与border、padding无关。
5.举个例子
<div class="wrapper1">标准盒模型</div><div class="wrapper4">130*30的盒子</div><div class="wrapper2">IE盒模型</div><div class="wrapper3">100*30的盒子</div><style> .wrapper1{ width: 100px; padding: 10px; border: 5px solid red; box-sizing: content-box; } .wrapper2{ width: 100px; padding: 10px; border: 5px solid yellow; box-sizing: border-box; } .wrapper3{ width: 100px; height: 30px; background-color: green; } .wrapper4{ width: 130px; height: 30px; background-color: green; }</style>
运行结果:
盒模型运行结果
6.在浏览器中模拟两种盒模型的方法:设置box-sizing属性
box-sizing:border-box:IE盒模型
box-sizing:content-box:标准盒模型(默认是content-box)
作者:椰果粒
链接:https://www.jianshu.com/p/10b587dc2e58
点击查看更多内容
1人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦