为什么是边框尺寸：边框框；不工作？答案

【问题标题】：Why is border-sizing: border-box; not working?为什么是边框尺寸：边框框；不工作？
【发布时间】：2021-11-17 15:33:37
【问题描述】：

我想为 div 的宽度设置动画，从 0 开始。但由于填充，div 永远不会小于我设置的填充。我尝试使用border-sizing: border-box;，但它不起作用。

我在这里做错了什么？

Here 是我的笔。

font-size: 14px;
box-sizing: border-box;
color: #fff;
background: #E2001A;
position: absolute;
margin: 85px;
overflow: hidden;
padding: 8px 10px;
white-space: nowrap;
width: 2px;

【问题讨论】：

检查这个问题，这可能会帮助stackoverflow.com/a/22253627/10330372

标签： css padding border-box

【解决方案1】：

我发现并测试过的最有效的解决方案是这个：

.hotspotCaption {
  font-size: 14px;
  box-sizing: border-box;
  color: #fff;
  background: #E2001A;
  position: absolute;
  margin: 85px;
  overflow: hidden;
  padding: 0;
  white-space: nowrap;
  width: 0px;
  animation-duration: 1s; /* Change duration */
  animation-name: appear; /* Change its name */
  animation-iteration-count: 1; /* Change how many times it repeats */
  animation-direction: normal; /* Change its direction */
  animation-fill-mode: forwards; /* specifies a style when the animation stops */
}

@keyframes appear {
  from {
    padding: 0;
    width: 0;
  }
  to {
    padding: 8px 10px;
    width: 255px;
  }
}

&lt;div class="hotspotCaption"&gt;Consectetur Purus Fermentum Commodo&lt;/div&gt;

另外，这是我制作的一支笔：Link。

它不起作用，因为box-sizing: border-box; 不会以您想要的方式影响填充，并且首先没有应用transition 或animation。事情是制作一个动画，在其起始位置包含填充，并将其设为零。希望此解决方案对您有所帮助！

【讨论】：

【解决方案2】：

<style>
.hotspotCaption1 {
  width: 300px;
  height: 100px;  
  padding: 50px;
  border: 1px solid red;
   box-sizing: border-box;
}

.hotspotCaption2 {
  width: 300px;
  height: 100px;  
  padding: 50px;
  border: 1px solid red;
}
</style>

<div class="hotspotCaption1">Consectetur Purus Fermentum Commodo</div><br>

<div class="hotspotCaption2">Consectetur Purus Fermentum Commodo</div>

您的代码工作正常，但您为 div 提供了非常小的宽度，您可以意识到只需提供更大的宽度并创建两个不同的 div，一个具有 box-sizing，另一个没有 box-sizing。

【讨论】：

【解决方案3】：

将您的 div 包裹在另一个 div 中，并为父 div 的宽度设置动画。

.hotspotCaption {
  font-size: 14px;
  box-sizing: border-box;
  color: #fff;
  background: #E2001A;
  padding: 8px 10px;
  white-space: nowrap;
}

.outer-wrp {
  margin: 85px;
  width: 2px;
  overflow: hidden;
}

<div class="outer-wrp">
  <div class="hotspotCaption">
    Consectetur Purus Fermentum Commodo
  </div>
</div>

【讨论】：