css - css根据应用于元素的类计算宽度

Question

有没有一种方法可以创建某种 CSS 逻辑来读取应用于元素的 CSS 类并计算新宽度？

假设我有一个 div 元素，宽度为“grid_6”类 - 宽度为 480 像素。
然后我添加了几个其他的类，比如；pl8 和 pr16 - 左侧为 8px 填充，右侧为 16px 填充。

是否有任何引擎可以读取这些规则，然后执行以下操作：grid_6 - (p8+p16)，然后将元素的新宽度设置为，在本例中为 456px，以保持总宽度为 480px？

我看过 CSS calc()，但不知道如何制作像我想要做的事情......使用 PHP 当然是一个解决方案，但它会是内联 css，这是不好的做法...

我知道我可以只有一个子元素并在它们上设置填充/边距/边框以确保我不超过总宽度。但希望有一个更聪明的解决方案......

有人知道吗？

score 3 · Accepted Answer

采用`box-sizing`

Scott Cranfill 在评论中将此作为“解决方案”，但我不确定他为什么不将其作为解决方案发布。该box-sizing属性更改宽度计算的完成方式。因此，只需添加以下内容：

.grid_6 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

或更一般地，对于所有网格元素：

[class^=grid] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;    
}

让我们padding通过其他类添加，而不是width 像这个小提琴显示的那样影响。不需要复杂的计算。

score 1 · Accepted Answer

它允许您对 CSS 规则的变量进行计算和支持。