4

我试图了解box-sizing: border-box下面的代码是如何工作的。当设置了高度或宽度（无填充）时，它会按预期工作（边框出现在 div 内）。但是如果你只使用 padding 来创建 div 的维度，它是行不通的。有人可以解释为什么吗？这是演示：

div.test {
  background-color: red;
  box-sizing: border-box;
  display: inline-block;
  border: 5px solid;
  text-align: center;
  padding: 50px;
  vertical-align: middle;
  // height: 100px;
  // width: 100px;
}

div.test:first-of-type {
  border: none;
}
<div class="test">aa</div>
<div class="test">aa</div>

https://codepen.io/anon/pen/bxaBER

4

2 回答 2

4

TL;博士

一个想法是border为两者保留。而不是none简单地制作颜色transparent，以便两者的大小（包括边框+填充）始终相同。

div.test {
  background-color: red;
  box-sizing: border-box;
  display: inline-block;
  border: 5px solid;
  text-align: center;
  padding: 50px;
}

div.test:first-of-type {
  border-color: transparent;
}
<div class="test">aa</div>
<div class="test">aa</div>

为什么？

在设置height/时width，您明确定义两者都具有固定大小，并且该大小将包括边框、填充和内容。正如我们在文档中看到的：

边框

告诉浏览器在您为元素的宽度和高度指定的值中考虑任何边框和填充。如果您将元素的宽度设置为 100 像素，则该 100 像素将包括 您添加的任何边框或填充，并且内容框将缩小以吸收 额外的宽度。

和

这里元素的尺寸计算为：宽度=边框+填充+内容的宽度，高度=边框+填充+内容的高度。

现在，假设您包含一个45px带5px边框的填充。在这种情况下，两个框将相等，但您会注意到带边框的框将具有0内容的高度/宽度，因为我们已经100px使用填充和边框（45px*2 + 5px*2 = 100px）到达，但另一个框仍然有一些内容空间：

div.test {
  background-color: red;
  box-sizing: border-box;
  display: inline-block;
  border: 5px solid;
  text-align: center;
  padding: 45px;
  height:100px;
  width:100px;
  vertical-align:middle;
}

div.test:first-of-type {
  border:none;
}
<div class="test">aa</div>
<div class="test">aa</div>

在此处输入图像描述

现在如果我们开始增加内边距，第一个盒子仍然有一些内容要缩小（10px）但第二个没有！在这种情况下，border-box固定的宽度/高度将不起作用，因为边框 + 填充超出了100px( 46px*2 + 5px*2 = 102px)。这就是为什么从45px填充开始，我们看到两个盒子之间的差异，从50px填充开始，两个盒子都没有内容可以缩小，但是第二个盒子有更多的边框，这在逻辑上会使其尺寸更大。定义宽度或高度也变得无用。

换句话说，border-box只适用于padding + border < width/height因为只有在这种情况下我们还有要缩小的内容。

这是一个更好的插图，边框更大，你会看到我们有 3 个状态。(1) 两者都有内容要缩小时 (2) 只有一个内容要缩小时 (3) 两者都没有内容要缩小时：

div.test {
  background-color: red;
  box-sizing: border-box;
  display: inline-block;
  vertical-align:top;
  border: 30px solid;
  text-align: center;
  padding: 5px;
  width:100px;
  height:100px;
  animation:pad 10s infinite linear alternate;
}

div.test:first-of-type {
  border:none;
}

@keyframes pad {
 0%  {padding:5px}
 33% {padding:20px}
 66% {padding:50px}
 100% {padding:100px;}
}
.change:after {
  content:"";
  animation:change 10s infinite linear alternate;
}
@keyframes change {
 0%,33%  {content:" (1): same size for both and fixed width/height are respected "}
 33.1%,66% {content:" (2): The second box has no more content to shrink, it starts growing (fixed height/width and border-box has no effect)"}
 66.1%,100% {content:" (3): Both boxes has no more content to shrink, they will keep growing BUT the second one has more border so bigger size"}
}
<p class="change">we are at state </p>
<div class="test">aa</div>
<div class="test">aa</div>

为了避免这种情况，我们为两个元素保持相同的填充/边框，就像我们最初所说的那样。

于 2018-09-09T08:52:37.217 回答
0

假设这是页面上唯一的 css 渲染时框的宽度

.box{ Width: 100px; Height: 50px; Padding: 5px; Border: 1px solid red; Background-color: red;}
于 2020-12-20T09:39:52.857 回答