0

我从网站上找到了以下内容：http: //www.htmlgoodies.com/html5/tutorials/learn-css3-from-az-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%。

请帮忙。

谢谢

4

1 回答 1

0

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

.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

于 2013-08-28T01:25:23.463 回答