框大小:没有声明的高度/宽度的边框 [英] box-sizing: border-box with no declared height/width

问题描述

我试图了解 box-sizing:border-box 在以下代码中的工作方式.设置高度或宽度(不填充)时，它会按预期工作(边框显示在div内).但是，如果仅使用填充来创建div的尺寸，则它将不起作用.有人可以解释为什么吗?这是演示:

  div.test {背景颜色:红色；框大小:border-box；显示:inline-block;边框:5px实线；文本对齐:居中；内边距:50px;垂直对齐:中间；//高度:100像素；//宽度:100px;}div.test:first-of-type {边界:无；}  

 < div class ="test"> aa</div>< div class ="test"> aa</div>  

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

换句话说，边界框仅在 padding + border<宽度/高度，因为仅在这种情况下，我们仍有缩小的内容.

这是一个带有较大边框的更好的插图，您将看到我们有3个状态.(1)当两者都有收缩的内容时(2)当只有一个人收缩的内容时(3)当两者都没有收缩的时候:

  div.test {背景颜色:红色；框大小:border-box；显示:inline-block;垂直对齐:顶部;边框:30px实线；文本对齐:居中；内边距:5px；宽度:100px;高度:100px;动画:pad 10s无限线性交替；}div.test:first-of-type {边框:无；}@keyframes垫{0％{padding:5px}33％{padding:20px}66％{padding:50px}100％{padding:100px;}}.change:{之后内容:"";动画:更改10s无限线性交替；}@keyframes更改{0％，33％{内容:(1):尺寸和固定宽度/高度都应相同"33.1％，66％{content:(2):第二个框没有更多内容要收缩，它开始增长(固定的高度/宽度和边框没有作用)"}66.1％，100％{content:(3):两个盒子都没有缩小的内容，但是它们会继续增长，但是第二个盒子的边界更大，因此尺寸更大"}}  

 < p class ="change">我们处于状态</p>< div class ="test"> aa</div>< div class ="test"> aa</div>  

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

I'm trying to understand how box-sizing: border-box work in the code below. When the height or width is set (no padding), it works as intended (border appears inside the div). But if you only use the padding to create the dimension of the div, it does not work. Can someone explain why? Here's the demo:

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

解决方案

TL;DR

An idea is to keep border for both. Instead of none simply make the color transparent so that the size (including border + padding) will always be the same for both.

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>

---

Why?

When setting height/width you explictly define that both sould have fixed size and this size will include border, padding and content. As we can read in the documentation:

border-box

tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width.

And

Here the dimensions of the element are calculated as: width = border + padding + width of the content, and height = border + padding + height of the content.

Now, suppose you include a padding of 45px with the 5px border. In this case both box will be equal but you will notice that the one with border will have a height/width 0 for the content because we already reached 100px with padding and border (45px*2 + 5px*2 = 100px) but the other box will still have some space for content:

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>

Now if we start increasing the padding, the first box still have some content to shrink (10px) but the second one no! In this case, border-box and the fixed width/height will have no effect because border + padding exceeded the 100px (46px*2 + 5px*2 = 102px). That's why starting from 45px of padding we see a difference between both boxes and strating from 50px of padding both box will have no content to shrink BUT the second box has more border which will logically make its size bigger. It also become useless to define width or height.

In other words, border-box only applies when padding + border < width/height because only in this case we still have content to shrink.

Here is a better illustration with bigger border and you will see that we have 3 states. (1) when both have content to shrink (2) when only one has content to shrink (3) when both have no content to shrink:

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>

In order to avoid this, we keep the same padding/border for both elements like we initially said.

这篇关于框大小:没有声明的高度/宽度的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！