css - 的宽度如何大于最大宽度？

Question

我有一个 <div>和:

display: block;
max-width: 150px;
position: static;
overflow: hidden;

然而， <div>宽度为 530px ，远远超过 max-width我指定了，我不知道为什么。

当我检查 <div>在 Chrome 中，它非常清楚地显示了 max-width正在应用(并且没有被任何其他规则打败)，但同时在“计算”选项卡中它清楚地显示了 530px宽度。

不过，我并不是在寻求帮助来调试我的特定情况。相反，我只是想了解在任何情况下如何使用 overflow: hdden 块级元素可以有超过其 max-width 的宽度.

显然我不完全理解如何 max-width作品。

Answer 1

我是前端开发的新手。

我还想提一下，填充不计入宽度，并且可能在内部 <div> 中, width指定为 100% ，但 <div>与 padding可能看起来像 <div>超过width .

添加

-webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
        box-sizing:border-box;

可以解决这个问题。