盒模型：width、height不设置时，对盒模型的影响

50 阅读 0 评论 33 点赞

我是靠谱客的博主知性月光，最近开发中收集的这篇文章主要介绍盒模型：width、height不设置时，对盒模型的影响，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

`先写一个嵌套的盒子，在不设置width100%的情况下盒子2的宽度也会占满整个容器
在这里插入图片描述

此时我们给盒子2加一个30px左内填充，会发现盒子2超出了30px：

再加一个10px左边框，发现再次超出了10px：

此时你可能会想到将盒子2的box-sizing设为border-box，此时宽度值300px将包含边框、内填充和内容（content），而不仅仅是把content设为300px：
在这里插入图片描述
其实不用写这么多代码，只要不设置宽度就可以了。
如果我们此时不设置宽度，那会发现即使设置了边框和内填充，盒子2也没有超出，宽度自动调整到了260px：

结论：当width、height不设置时，盒模型会自动去计算容器的大小，节省代码。