Question

努力工作，但未能理解为什么它能按预期进行（div不超过1300px）：

div.top_menu {
    position: fixed;
    width: 100%;
    max-width: 1300px;
    left: 50%;
    transform: translate(-50%, 0);
}

这并不（{div比100px宽一些1300px）：

div.top_menu {
    position: fixed;
    width: 92%;
    padding-left: 4%;
    padding-right: 4%;
    max-width: 1300px;
    left: 50%;
    transform: translate(-50%, 0);
}

有人知道吗？非常感谢您的支持。

Answer 1

适用于width的相同规则也适用于min-width和max-width：

默认情况下，该属性定义内容区域的宽度。但是，如果将box-sizing设置为border-box，则它将确定边框区域的宽度。

https://developer.mozilla.org/en-US/docs/Web/CSS/width

这意味着默认情况下，填充和边框宽度不包括在整个宽度中。您必须使用box-sizing来使用给定的宽度作为外部宽度（包括填充和边框宽度）。

请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

CSS-固定div元素的最大宽度不适用于填充

1 个答案: