Question

所以我理解如何处理以下问题，但我真的很想理解为什么背后的基本逻辑。

此方案假设您有2个浮动div（一个在左侧，一个在右侧），每个占用页面的50％。如果你这样设置它们：

.left {
    background-color: #CCFFCC;
    width: 50%;
    float: left;
}

.right {
    background-color: #FFFFCC;
    width: 50%;
    float: right;
}

div正好相邻，占据了总页数的100％。

但是，如果你这样设置：

.left {
    background-color: #CCFFCC;
    width: 50%;
    float: left;
    padding: 10%;
}

.right {
    background-color: #FFFFCC;
    width: 50%;
    float: right;
    padding: 10%;
}

右边的元素在左边的元素下滑动。

我知道有几种方法可以解决这个问题，包括盒子大小调整属性，但我真的喜欢知道这是为什么会发生这种情况。

根据盒子模型，填充被添加到div的 inside （我认为这会使div的整体大小与以前相同），但添加填充实际上正在增加div的整体大小。

任何帮助都会非常感激！

修改我现在看到实际宽度=

width + padding + border = actual width of an element

（感谢NewsletterPoll！）

我想我对如何应用填充有一个基本的误解。我的直观反应是假设填充基本上会从内容区域中减去，但这不是它的工作方式，我现在看到了。

这可能是没人能回答的问题，但为什么它的构建如此不直观呢？基本上宽度= / =实际宽度，这似乎令人困惑。我想知道是否可以追溯当天填充作为事后补充，或者是否可能只是以这种方式创建它？

这可能更多地是对CSS整体的批评以及它是如何开发的，并且可能没有任何实际的推理背后。但是如果 IS 是一个没有减去内容区域的原因，那么这可能是有趣的或有助于了解。

Answer 1

这是因为box-sizing的默认值为content-box。在此框大小调整模式下，宽度计算为：

actual width = width + padding + border

所以你的元素具有CSS属性

width: 50%;
padding: 10%;

结束时宽度为70％（10 + 50 + 10）。

| 10% |    50%    | 10% |

和2个70％宽的元素彼此不相邻。

来自MDN : box-sizing：

内容框

这是CSS标准指定的默认样式。测量宽度和高度属性仅包括内容，但不包括填充，边框或边距。注意： 填充，边框和＆amp;保证金将在框外，例如IF .box {width：350px};那么你应用{border：10px solid black;} RESULT {在浏览器中呈现} .box {width：370px;}

您的原始陈述实际上是正确的：

＆＃34;根据盒子模型，填充被添加到div的内部＆＃34;

div中的填充 IS ，但width中的box-sizing:content-box CSS属性告诉浏览器内容区域的宽度是什么＆＃39 ;里面的div应该是。然后实际的div是填充，边框和内容区域的组合。（换句话说，你说内容区域是50％宽，而不是div是50％宽）

浮动元素中的相对填充：为什么它以这种方式工作？

1 个答案: