Question

我想在CSS中添加负填充，我写了一个小的电池充电单元代码。我想要的是，如果我输入负值（如-1px），则单元格颜色应移至左侧，而div应保持居中。

.cell {
  width: 100px;
  height: 30px;
  border: 1px solid black;
}

.padding {
  background-color: #3D9970;
  width: 10px;
  float: left;
  height: 30px;
  position: absolute;
  left: 55px;
  padding-right: 1px;
}

<div class="cell">
  <div class="cell1"></div>
  <div class="padding"></div><span style="display: inline;">	
    </div>

请帮助我。

Answer 1

你不能。

请参见the specification：

与边距属性不同，填充值不能为负。

Answer 2

我认为使用伪元素可以达到相同的效果：

.cell{
  display:block;
  width: 100px;
  height: 30px;
  position:relative;
}
.cell:before{
  content:'';
  background-color: #3D9970;
  width: 10px;
  top:0;
  left:calc(50% - 5px);
  height: 100%;
  position: absolute;
}
.cell:after{
  content:'';
  border: 1px solid black;
  width:100%;
  height:100%;
  display:block;
  top:0;
  left: 0px;
  position: absolute;
}

<div class="cell">

</div>

“左”属性可能为负，因此，如果更改它，则可以将绿色矩形的位置移动到块的中间（.cell：before）和边框本身（.after）

Answer 3

最简单的方法是相对于父节点使用绝对定位。这里的父节点将是电池的“外壳”。

因此，您可以将rot div的position CSS值设置为relative，然后将费用1设置为absolute。实际上，根据MDN Webdocs：

absolute ：[...]相对于最接近的定位祖先（如果有）定位。

然后，您只需要使用left和width CSS属性。对于“中间”情况，我选择显示一个边框。

下面的代码段正常工作。只需点击“开始收费变化”按钮即可开始播放。

var chargeElement = document.getElementById("charge");

// To set a charge to the battery, simply call: setCharge(percentage)

function setCharge(percentage) {

  var left;
  var width;

  if (percentage > 100) percentage = 100;
  if (percentage < 0) percentage = 0;
  
  chargeElement.setAttribute("data-value", percentage);

  // If the charge is 50%, simply draw a line
  if (percentage == 50) {
    chargeElement.className = "middle";
  } else {
    chargeElement.className = "";
  }

  // Otherwise, adjust left and width values
  if (percentage >= 50) {
    left = 50;
    width = percentage - left;
  } else {
    left = percentage;
    width = 50 - left;
  }

  // Then update the charge style.
  chargeElement.style.left = left + "%";
  chargeElement.style.width = width + "%";

}

// A simple function to add / remove some charge

function addCharge(percentage) {
  var value = parseInt(chargeElement.getAttribute("data-value"));
  value += percentage;
  setCharge(value);
}

// Here just some stuff for illustration.
// You don't need those functions to set the charge.

function letsBeginTheShow(buttonElement) {
  buttonElement.disabled = true;
  setNextCharge(10);
}

function setNextCharge(increment) {
  var percentage = parseInt(chargeElement.getAttribute("data-value"))
  percentage += increment;
  if (percentage > 100) {
    percentage = 100;
    increment = -5;
  }
  if (percentage < 0) {
    percentage = 0;
    increment = 5;
  }
  setCharge(percentage);
  setTimeout(function() {
    setNextCharge(increment);
  }, 50);
}

setCharge(50);

.battery {
  position: relative;
  width: 100px;
  height: 30px;
  border: 1px solid black;
  /* Below : only for aestethic reasons */
  float: left;
  margin-right: 30px;
  /* End of aesthethic stuff */
}

#charge {
  height: 100%;
  position: absolute;
  background-color: #3D9970;
  border-color: #3D9970;
}

.middle {
  border-left: 1px solid;
}

<div class="battery">
  <div id="charge" data-value="50" class="middle"></div>
</div>

<button onclick="letsBeginTheShow(this)">Begin the charge variation</button>

如何在CSS中使用负填充

3 个答案: