为了账号安全,请及时绑定邮箱和手机立即绑定

css盒模型

标签:
Html/CSS

1. CSS盒模型分为标准盒模型IE盒模型
2. 区别:IE盒模型的width包括padding和border,而标准盒模型的width只是content。
3.一张图:

webp

盒模型图示


比如说:给一个元素的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>

运行结果:


webp

盒模型运行结果

6.在浏览器中模拟两种盒模型的方法:设置box-sizing属性
box-sizing:border-box:IE盒模型
box-sizing:content-box:标准盒模型(默认是content-box)



作者:椰果粒
链接:https://www.jianshu.com/p/10b587dc2e58


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消