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盒模型中，填充是可添加的。如果您的框width是100％，则对其padding应用的框将增加宽度。该width因此将计算在数量大于你设置的大小width属性。

我建议使用box-sizingCSS中的属性，如下所示：

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

宽度：100％+填充：0 2em，等于大于100％。通过box-sizing在样式表中使用该 属性，您将告诉浏览器将填充内容作为总宽度的一部分。