Question

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

<!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>

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

Answer 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>个，每个会跨越您网页的三分之一，您可以将其设置为：

<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-box代替将填充物放在元素的内部，使每个元素保持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 explanation

Paul Irish's suggestion for *{box-sizing:border-box}

CSS Tricks box-sizing

Hong Kiat box-sizing in CSS3

希望有所帮助！

box-sizing和height预期行为

1 个答案: