logo标签列表

CSS：100％比页面宽度大吗？

htmlcss
5

我正在忙于一个新网站。对于菜单栏，我将宽度设置为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;

但是出于某种奇怪的原因，菜单栏的宽度实际上比页面其他部分要长。请看下面的截图。

有人有这方面的经验吗？

100% is to large...

13
填充？你试过去掉它吗？或者看看box-sizing:border-box。 - Paulie_D
2
如果你使用边框，还需要添加 box-sizing: border-box。 - Abhitalks
2
有人对这个有经验吗？- 是的，这种烂事经常发生。使用浏览器开发者（F12）工具并检查元素。您可以检查其大小和父元素，并查看为什么它太宽。 - James
4个回答
12
问题在于width和padding属性的组合。在典型的CSS盒子模型中，填充是累加的。如果您的盒子width为100％，则应用于它的padding将会添加到宽度上。因此，width计算出来的数字将大于您在width属性中设置的尺寸。
我建议在CSS中使用box-sizing属性，如下所示：
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

宽度为100% + padding为0 2em的和大于100%。 通过在样式表中使用box-sizing属性，您可以告诉浏览器将padding包括在总体宽度中。

将问题倒置并不是解决方案。比如我想要一个足够大的元素来容纳600像素的图像，但它还有一个5像素的边框，突然间"为什么我的图像溢出了容器，而容器应该是适合它的正确尺寸？？？" - Niet the Dark Absol
@NiettheDarkAbsol 我不确定我理解你的意思。在你的例子中，你可能根本不会设置宽度。你会让图片相应地拉伸盒子。 - Michael Giovanni Pumo
我认为这更多是因为你在包含图像的div上设置了一个精确的宽度。在这种情况下，你不需要这样做。请参考这个分支，http://jsfiddle.net/9MZ38/，其中包含图像的盒子具有自动宽度。这样它就可以适应任何图像，无论是否使用box-sizing。 - Michael Giovanni Pumo
@NiettheDarkAbsol 更容易吗？我不确定是否同意。将该类添加到多个元素中最多是繁琐的，尤其是当应用于所有元素时确实没有问题。您上面发布的图像问题可以通过在img上简单设置max-width：100％轻松解决，这是响应式图片的最低要求。任何其他更直观的响应式图像解决方案也将解决此问题。http://jsfiddle.net/HvYf4/抱歉，但border-box根本不会产生任何问题，这些问题都不会被您应该执行的操作所解决。 - Michael
1
如果您希望在响应式布局中使图像框占据整个宽度，那么.w336类的宽度无论如何都将是100％，在这种情况下，再次强调，没有问题。 - Michael
显示剩余6条评论
3

box-sizing:border-box的意思是在计算元素大小时会考虑到margin和padding。

关于盒模型的更详细解释可以参见这个链接：

http://css-tricks.com/box-sizing/

另一个应对大多数跨浏览器问题的方法是尝试使用重置样式表将所有元素重置为“开始”状态。

许多浏览器会在特定元素上添加自己的内边距和间距，因此通常使用重置样式表将浏览器重置至“起点”。

这里是其中一个比较流行的重置样式表：

http://meyerweb.com/eric/tools/css/reset/

但是这个网站评论了许多重置样式表：

http://www.css-reset.com/

哇，我从来没有听说过这个，它被广泛使用吗？ - James
1
大部分答案都是废话。在这里，box-sizing:border-box才是最重要的。 - Niet the Dark Absol
非常重要的是，不要陷入并犯下全面性错误的 * { margin:0; padding:0; }，因为它可能会带来更多的伤害而不是好处。最终，你应该自己判断你需要什么。 - Phlume
如果box-sizing让操作员陷入困境，那么重置也可能对他们有帮助...当我们发现操作员从未意识到这个问题时，感谢这篇“废话”文章，我们就找到了解决方案。 - Phlume
1
如果box-sizing不能解决这个问题，检查你的CSS的顶层 - 我曾经发现一个流氓的width:100%用于<body> CSS。
我调试这些问题的技巧是打开开发者工具，并逐个删除页面块（例如主要的<div>）：如果删除其中任何一个会导致布局恢复正常，则表示刚刚删除的那个是导致问题的原因。
这是一个有用的调试技巧。 - Peter Out
0

width 属性设置内容的宽度，不包括内边距和外边距。

尝试移除内边距或更改盒子模型。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接