html - CSS:100% 大于页面宽度？

Question

我正忙于一个新网站。对于菜单栏，我将宽度设置为 100% 以在此处显示:

font-family: 'Champagne';
    font-size:20px;
    display: block;
    z-index: 1000;
    bottom: 0;
    width: 100%;
    background: #0193CF;
    text-align: right;
    padding: 0 2em;
    margin: 0;
    text-transform: capitalize;

但由于某些奇怪的原因，菜单栏的宽度实际上比页面的其余部分长。请查看底部的屏幕截图。

有没有人有这方面的经验？

Answer 1

问题是 width 和 padding 属性的组合。在典型的 CSS 盒子模型中，填充是附加的。如果您的框 宽度 为 100%，则应用到它的 padding 将添加到宽度。因此，width 的计算结果会大于您在 width 属性中设置的大小。

我建议在您的 CSS 中使用 box-sizing 属性，如下所示:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

width: 100% + padding: 0 2em, 等于大于 100%. 通过在样式表中使用 box-sizing 属性，您将告诉浏览器将填充作为总宽度的一部分。