CSS calc：DIV，任何其他类给出的宽度，减去 px答案

【问题标题】：CSS calc: DIV with any width given from some other class, minus pxCSS calc：DIV，任何其他类给出的宽度，减去 px
【发布时间】：2021-03-30 19:00:18
【问题描述】：

我有一个这样的 div：

<div class="w25 box">...</div>

.w25 将宽度设置为父级的 25%。但我也有 .w33、.wXX ...

.box 应该使该 div 看起来像一个盒子，并且与没有 .box 类的空白 div 相比，该盒子在视觉上需要一些水平的额外边距。但是增加的边距使盒子比 25% 更宽，所以它比非盒子 div 更早地换行。

所以我想这样做：

.box { width: calc( AnyWidthItGotFrom_wXX – 20px ); margin: 0 10px; }

另一种选择是不仅创建 .wXX 类，还创建独立完成工作的 .boxXX 类，但创建和维护更多的 CSS ...

（替代方法：我正在尝试实现 box-sizing: margin-box; 如果存在的话，可以水平执行）

【问题讨论】：

能否分享完整的代码！另外，试试box-sizing: border-box;
只需将.w25 css 类的宽度设置为width: calc(25% - 20px) 给你的.box 元素总是有margin: 0 10px;？ jsfiddle.net/k6tsaevL
您可以设置内边距而不是边距，因此您无需进行宽度计算。

标签： css

【解决方案1】：

我建议使用 .wxx 类来定义设置宽度的 CSS 变量，并在定义边距变量的 .box 类中使用该变量

.w25 { --width: 25%; }
.w33 { --width: 33%; }
.w50 { --width: 50%; }

.box {
   --margin: 10px;
   width: calc(var(--width, 100%) - (var(--margin, 0) * 2));
   margin: 0 var(--margin, 0);
   border: 1px #ccc dashed;
}

<div class="w25 box">25%</div>
<div class="w33 box">33%</div>
<div class="w50 box">50%</div>
<div class="box">100% by default</div>

这样做.wxx 类仍然负责定义width 的值，但这实际上是在.box 元素上设置的。

【讨论】：

这太棒了！我不知道我可以在一个类中设置一个变量，然后在另一个分配给同一个 html 节点的类中使用它！为了澄清我的问题：我想要的是使具有相同宽度类（以及响应和所有）的 .box- 和非盒子 div 的宽度相等，但使盒子看起来稍微小一点，并增加边距。有了这些变量，我现在可以做到这一点，它就像一个魅力。