Html 需要一个快速的CSS提示吗？

所以我想做点什么。我正在建立一个快速响应的网站，我遇到了一个有趣的问题

我有一个#包装器，背景是#FFF。在里面，为了满足显示需要，我放置了一个标题，其中包含一些内容和一个主体，每个标题都有不同的背景，因此很容易看到放置在哪里的内容

对于我的包装，我给它一个100%的宽度，这样它就可以与浏览器窗口展开和收缩。但限制它的最大宽度为750像素，因为我不希望网站比这更宽

#wrapper {
position:relative;
margin:20px auto;
padding:0px 20px;
width:100%;
max-width:750px;
background:#FFF;
}

注意我在上面放了一个0像素20像素的填充。这就是我的问题所在。当您重新调整浏览器窗口的大小时，包装器会随之收缩，但由于某些原因，它会忽略右侧的填充。我想确保不会发生这种情况，因为无论浏览器窗口大小如何，我都希望左右两侧有20像素的空间

有什么想法、提示、教训吗

---

谢谢

您需要在尺寸定义中包含填充。添加

框大小：边框框

到包装器元素。

添加

框大小：边框框

为我修复了它（Chrome 26，FF 19，IE9/10）。这将导致在宽度计算中包含填充

例如：

它为什么有效？ 当您调整浏览器窗口的大小时，包装器会收缩 但由于某种原因，它忽略了右边的填充

要明确的是，您的原始版本并不仅仅隐藏了正确的填充区域。它隐藏了右填充区域+20px，即左填充区域的宽度。这是因为您告诉框必须100%宽加上任何填充或边框

因此，你的盒子是100%+40px宽

添加

框大小：边框框

指示浏览器在宽度计算中包括填充和边框。它对于基于百分比的值非常方便

---

如果将

框尺寸：边框框

添加到

#包装

中，则填充将包含在

宽度

中

您可能希望现在将

最大宽度：790px

设置为在窗口较宽时显示相同

支持

框大小调整

在IE7及以下版本中不受支持。如果您想支持IE7，那么您需要在

#wrapper

中放置一个内部包装

---

只需删除宽度，即可在修复问题的同时保持扩展功能：

#wrapper {
    position:relative;
    margin:20px auto;
    padding:0px 20px;
    max-width:750px;
    background:#FFF;
}

---

如果你在包装css的宽度后面加上填充物，会发生什么情况？@dannymcc:你为什么不试试看呢？CSS属性与顺序无关。同样的问题。没什么变化，我现在在玩。我的印象是最低的CSS属性超过了较高的CSS属性。不知道我从哪里弄来的@dannymcc这是真的，但只适用于相同的属性。不管在列表中的位置如何，不同的属性都应用相同。有趣的是，太糟糕了，它似乎在FireFox中失败了。@ipxel-好的捕获，添加了

-moz-

前缀，它可以工作。忘记在FF中仍然需要它。请注意，

框大小调整

在IE7中不受支持，请参阅我的答案以了解IE7的备选方案。是的，我为IE7备选方案向您推荐了一个。请确保标记此问题的解决方案，以便其他人可以找到它。

#wrapper {
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

#wrapper {
    position:relative;
    margin:20px auto;
    width:100%;
    max-width:750px;
}
#inner {
    padding:0px 20px;
    background:#FFF;
}

#wrapper {
    position:relative;
    margin:20px auto;
    padding:0px 20px;
    max-width:750px;
    background:#FFF;
}