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

【问题标题】：css calculate width based on classes applied to an elementcss根据应用于元素的类计算宽度
【发布时间】：2014-05-23 00:52:11
【问题描述】：

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

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

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

我查看了 CSS calc()，但不知道如何制作像我正在尝试做的事情...... 使用 PHP 当然是一种解决方案，但它会是内联 css，这是不好的做法......

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

有人知道吗？

【问题讨论】：

标签： css

【解决方案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，而不影响widthas this fiddle shows。无需复杂的计算。

【讨论】：

【解决方案2】：

尝试使用 SASS：http://sass-lang.com/

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

【讨论】：