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;
}

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

我不确定这些列的含义是不会并排显示的？这听起来像预期的是两列之间的分界线会消失或类似的东西 - 我不确定。我有这个示例代码来试验：

http://jsfiddle.net/hE8UZ/

我根本没有看到任何影响。除了不确定为什么跨度元素没有占据250px，因为宽度被提到50％的身体。

请帮忙。

由于

Answer 1

如果你有任何宽度为500px的容器和1px边框的子容器，10px填充，100％宽度并将边框大小设置为框大小，那么如果你将box-sizing设置为内容框然后宽度将是500px将是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

css3需要帮助理解盒子大小

1 个答案: