Question

我有以下代码：

.mod-prb {
  display: block;
  width: 250px;
  height: 35px;
  border: 2px solid #809097;
  border-radius: 8px;
  padding: 3px;
}
.mod-prb > div {
  display: block;
  height: 20px;
  height: 30px;
  border: inherit;
  border-radius: 8px;
  text-align: right;
  padding: 0 10px;
}

<div class="mod mod-prb">
  <div class="perc"></div>
</div>

问题是<div class="perc">可以升级到width:95%;。我将如何计算像素，以便我可以使用JS 1％-100％。澄清：我正在用JS添加宽度，所以这不是问题。

Answer 1

为什么会发生这种情况

发生此问题的原因是您将宽度设置为100％，但内部框的填充为10px（左右），边框为2px。这使得它的实际宽度为其父宽度的100％+ 20px（两侧10px边距）+ 4px（两侧边界为2px）。

如何修复

你可以用不同的方式修复它。最简单的方法是使用值border-box的{{3}}：

width和height属性包括填充和边框，但不包括边距。

代码看起来像这样（注意height也是如何变化的）：

.mod-prb {
  display: block;
  width: 250px;
  height: 35px;
  border: 2px solid #809097;
  border-radius: 8px;
  padding: 3px;
}
.mod-prb > div {
  display: block;
  height: 35px;
  width:100%;
  border: inherit;
  border-radius: 8px;
  text-align: right;
  padding: 0 10px;
  box-sizing:border-box;
}

<div class="mod mod-prb">
  <div class="perc"></div>
</div>

样式进度条 - 计算宽度

1 个答案: