Question

有什么方法可以让类向元素添加像素？例如：

.block {
  height: 100px;
  width: 100px;
  background-color: red
}

.wider {
  width: calc(width + 100px);
}

<div class="block wider"></div>

那么，.wider使.block元素的宽度扩大到100px，我该如何以正确的方式做到这一点？

Answer 1

您可以尝试使用CSS variables和var()函数。通过在--width选择器中定义一个.block变量，然后将.wider选择器的width属性设置为calc(var(--width) + 100px，可以实现使框更宽的类。请注意，为了使其正常工作，您必须向每个更改宽度的css选择器添加一个额外的--width属性。

div {
    width: var(--width, 100%);
}
.block {
  height: 100px;
  --width: 100px;
  background-color: red
}
.wideblock {
  height: 100px;
  --width: 200px;
  background-color: blue
}

.wider {
  width: calc(var(--width) + 100px);
}

<p>Div with just block:</p>
<div class="block"></div>
<p>Div with block and wider:</p>
<div class="block wider"></div>
<p>Div with wideblock:</p>
<div class="wideblock"></div>
<p>Div with wideblock and wider:</p>
<div class="wideblock wider"></div>

编辑：应{{3}}的请求将width: --width添加到所有div中

在CSS中添加像素

1 个答案: