box-sizing属性,IE怪异盒模型

有没有遇到过这种情况?

当一个放在整个页面的容器,它的宽度定义为 width:100%;  之后。假设再添加 padding ,border 或者 margin 则会溢出父容器,是向外扩张的,也就是说设置了之后看不到效果。

首先看盒模型,如下图:

包括content(内容),padding(填充),margin(边界),border(边框),四个部分。

默认情况下,box-sizing属性的默认值是content-box,width和height属性其实是content(内容)的宽度和高度。——标准盒

box-sizing属性的另一个值是border-box,属性width,height包含了content,border和padding。——怪异盒

标准盒模型和 IE盒模型的区别在于设置 width 和 height 属性时,所对应的范围不同,可以通过box-sizing来改变元素的盒子模型。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

明里灰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值