Question

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

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

是否有任何引擎可以读取这些规则，然后执行类似：grid_6 - （p8 + p16），然后将元素的新宽度设置为，在这种情况下，为456px，以保持总宽度为480px ？

我看过CSS calc（），但无法弄清楚如何制作像我正在尝试的东西...... 使用PHP当然是一种解决方案，但它会是内联css，这是不好的做法......

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

任何人都知道吗？

Answer 1

使用`box-sizing`

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

.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 as this fiddle shows。无需复杂的计算。

Answer 2

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

使用box-sizing