盒模型:width、height不设置时,对盒模型的影响

`先写一个嵌套的盒子,在不设置width100%的情况下盒子2的宽度也会占满整个容器
在这里插入图片描述
在这里插入图片描述
此时我们给盒子2加一个30px左内填充,会发现盒子2超出了30px:
在这里插入图片描述
再加一个10px左边框,发现再次超出了10px:
在这里插入图片描述
此时你可能会想到将盒子2的box-sizing设为border-box,此时宽度值300px将包含边框、内填充和内容(content),而不仅仅是把content设为300px:
在这里插入图片描述
其实不用写这么多代码,只要不设置宽度就可以了。
如果我们此时不设置宽度,那会发现即使设置了边框和内填充,盒子2也没有超出,宽度自动调整到了260px:
在这里插入图片描述
结论:当width、height不设置时,盒模型会自动去计算容器的大小,节省代码。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值