1

我最近遇到了一个问题，我似乎与box-sizing:border-boxcss 中的标签有非常不一致的行为。例如，下面的代码块似乎完全忽略了标签。 

<!DOCTYPE html>
<html>
<head>
<style>
.one {
margin-bottom:30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; 
margin-left:10px;
overflow:hidden; 
background-color:green; 
width:40px; 
height:40px;
}
.two {
height:30px; 
width:30px; 
background-color:black; 
}
</style>
</head>
<body>
<div class = 'two'></div>
<div class = 'one'></div>
<div class = 'two'></div>
</body>
</html>

我必须假设这是预期的行为，但我还没有看到任何文章明确谈论 box-sizing 不起作用的实例，并且通过实验我无法找到似乎影响它的 CSS 属性，除了基于像素的宽度/高度似乎与它配合不佳。有人愿意澄清这是仅适用于百分比还是仅适用于水平的属性？

4

1 回答 1

1

我不确定你是否理解box-sizing:border-box应该做什么。那个片段忽略标签怎么样？请解释您期望的行为以及这有何不同。

至于房产本身，我假设您已经环顾四周，您熟悉box-model。

例如，使用“普通”框模型向元素添加填充会将填充添加到元素的外部，但是，使用相同的填充box-sizing:border-box会将填充添加到元素的内部，这将保留您的原始大小.

这可以在下面的jsFiddle中说明。

<style>
.one {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 width:50px;
 height:50px;
 padding:10px;
 background-color:#3e3e3e;
}

.two {
 width:50px;
 height:50px;
 padding:10px;
 background-color:red;
}


<div class = "one">one1</div><div class = "one">one2</div><div class = "one">one3</div>
<div class = "two">two1</div><div class = "two">two2</div><div class = "two">two3</div>

这种情况需要确保您的数学是正确的，否则在不使用border-box 属性时可能会破坏您的样式。例如，如果您的<div>s 将跨越页面的三分之一，您可以这样设置：

<style>
.one {
    width:33%;
    background-color:#3e3e3e;
    float:left;
}
</style>

<div class = "one">one1</div>
<div class = "one">one2</div>
<div class = "one">one3</div>

http://jsfiddle.net/b4LNp/

这很好，但是不添加填充border-box会导致 div 的总大小超过 33%（在本例中为 33% 宽度 + 1em 填充）。这将破坏您创建的列，因为它们现在太宽而无法并排放置。

<style>
.one {
    width:33%;
    background-color:#3e3e3e;
    float:left;
    padding:1em;
}
</style>

<div class = "one">one1</div>
<div class = "one">one2</div>
<div class = "one">one3</div>

http://jsfiddle.net/u4w5B/

使用border-boxwill 代替将填充放在元素内部，将每个填充保持在 33% 并确保无论您如何间隔元素，它们都将保持您最初告诉它的宽度。这消除了对许多额外的、不必要的数学的需要。

<style>
.one {
    width:33%;
    background-color:#3e3e3e;
    float:left;
    padding:1em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}
</style>

<div class = "one">one1</div>
<div class = "one">one2</div>
<div class = "one">one3</div>

http://jsfiddle.net/u4w5B/1/

有关更多信息，请查看以下链接：

w3 box-model解释

Paul Irish 的建议*{box-sizing:border-box}

CSS 技巧 box-sizing

CSS3 中的 Hong Kiat 大小调整

希望有帮助！

于 2013-04-10T18:42:37.350 回答