css - 响应式设计中的 CSS 填充疑难解答

Question

这个简单的 HTML5 布局旨在在左侧有一个导航栏，正文文本浮动在它旁边（使用百分比而不是像素来实现流畅的响应式设计 - 计算在 CSS 中的注释中。）

'page' div 内元素的宽度加起来正好是 100%。我想为某些元素添加填充，在这种情况下是导航。如果我删除所有填充，它们会正确浮动，但超过 1 或 2 个像素的填充（无论它指定的单位是什么）并且它会中断。我不明白为什么这会破坏布局，因为它是填充，所以肯定不应该改变块的整体大小？

我错过了什么？

更新 - 解决方案： http ://www.wturrell.co.uk/stackoverflow/20110615-02.html

（元素显示宽度 = 宽度加边框加内边距。导航应标称总共 200 像素，右侧 20px 内边距，因此对于流畅设计，宽度 = 180/900*100 或 20%，内边距 = 20/900*100 或 2.222 % 和正文保持 700/900*100 或 77.777%。）

score 7 · Accepted Answer

首先，您需要添加一个文档类型来触发标准模式。如果没有这个，您的页面将使用Quirks Mode ，这将在特别是 Internet Explorer 中导致严重的问题。

添加为您的第一行：

<!DOCTYPE html>

接下来，@Alex Ciminian 对盒子模型的回答是正确的（padding不被认为是其中的一部分width）。您可以减少的width数量padding，或者：

您可以将其添加到您希望padding将包含在计算中的任何元素中width：

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

有关这方面的更多详细信息，请参阅：http ://css-tricks.com/box-sizing/

浏览器对此属性的支持很好：http ://caniuse.com/css3-boxsizing - 除了 IE6/7 之外的所有地方。

score 6 · Accepted Answer

在CSS 盒子模型中，padding被添加到width以获得盒子的整体大小。在您的情况下，如果宽度百分比加起来为 100%，即使 1px 也意味着内容溢出。

尝试以百分比设置填充，并在添加它们时将其考虑在内，或者在边缘保留 1% 或 2% 的缓冲区，并以像素为单位添加小填充。

score 3 · Accepted Answer

@williant; 亚历克斯是正确的padding & border添加width到一个元素。因此，width根据padding.

CSS：

#page nav {
    clear: both;
    display: inline;
    float: left;
    padding: 0 10% 0 0;
    width: 12.2222%;
}

score 1 · Accepted Answer

您可以尝试使用box-sizing: border-box;或设置max-width:100%和/或max-height:100%;。

如果您想尝试保持兼容性，则 max-width 和 max-height css 选项与旧版本的 IE 兼容。

编辑：

使用下面的代码在浏览器中使用 box-sizing：

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

4 回答 4