设计进度条.计算宽度

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%，但内部框的填充量为10 2px (左右)，边框为2 2px。这使得它的实际宽度为其父宽度的100% +20 2px(两侧10 2px边距)+ 4px (两侧为2px边框)。

如何修复它

你可以用不同的方法修复它。最简单的方法是使用box-sizing值为border-box

宽度和高度属性包括填充和边框，但不包括边距。

代码将如下所示(注意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>

​