css3 需要帮助来理解 box-sizing

Question

我从网站上找到了以下内容:http://www.htmlgoodies.com/html5/tutorials/learn-css3-from-a-z-getting-started-with-layouts-.html#fbid=Byc3E58e8v-

“这方面的 CSS3 代码非常简单。您只需添加以下属性来切换特定元素的模型。

#W3C-model {
box-sizing: content-box;
}

#traditional-model {
box-sizing: border-box;
}

了解了 box-sizing 的工作原理后，下一个问题是您可以在哪里使用它？嗯，当你有两个相等的列时它非常有用。如果你给它们每个 50% 的宽度并添加一些填充和边框，这些列将不会并排显示。这是一个理想的场景，您可以将 box-sizing 设置为 border-box 并愉快地将两个框的宽度设置为 50%。”

我不确定列不会并排显示是什么意思？听起来这里预期的是两列之间的分隔边界会消失或类似的东西 - 我不确定。我有这个示例代码来试验:

http://jsfiddle.net/hE8UZ/

我没有看到任何效果。除了不确定为什么 span 元素不占据 250px 因为宽度被提到为 body 的 50%。

请帮忙。

谢谢

Answer 1

如果您有任何宽度为 500px 的容器和具有 1px 边框、10px 填充、100% 宽度的子容器并将 box-sizing 设置为 border-box 那么宽度将为 500px 如果您将 box-sizing 设置为 content box 那么宽度将是 500px + 2x10px + 2x1px = 522px。

.container {
    display: block;
    width: 500px;
}

.one {
    display: block;
    padding: 10px;
    -webkit-box-sizing: border-box;
    width: 50%;
    border: 1px solid;
}

.two {
    display: block;
    padding: 10px;
    -webkit-box-sizing: content-box;
    width: 50%;
    border: 1px solid;
}

http://jsfiddle.net/Vaj5x/

编辑:

如果您想要拖列，请将它们添加到左侧。喜欢这里 http://codepen.io/Chovanec/pen/cuBpg