CSS 值作为数学表达式答案

【问题标题】：CSS value as mathematical expressionCSS 值作为数学表达式
【发布时间】：2012-08-04 05:02:22
【问题描述】：

无论如何我可以将 css 值写成数学表达式吗？示例：

div{
    height: 50% + 30px;
    width: 40em - 5px;
   }

如果有，那就完美了。
PS：我不想用 JS 或 JQuery 来做。

【问题讨论】：

我正在尝试使其适用于任何类型的窗口大小。如果我打算在 js 上写它，我应该写 .ready() 和 .resize() 两个我不想做的函数。

标签： html css

【解决方案1】：

你不能用 CSS 做到这一点，但你可以（以及更多）使用 CSS 预处理器，比如 LESS、SASS 或我最喜欢的 Stylus。最终输出是普通的旧 CSS，但必须先编译。

【讨论】：

我不知道。看起来很有用。
我想到的第一个是 less 但是，如果元素的大小取决于内容，那么 less 将无法猜测正确的大小，从而在某些特定情况下呈现无效，其他除此之外，这将是一个完美的解决方案。但是对于这一点，CSS3 是更好的恕我直言。

【解决方案2】：

padding 和 margin 都可用于添加对象的尺寸。我建议你阅读box model。

HTML:

<div id="container">
    <div class="wrapper">
        <div>...</div>
    </div>
</div>

CSS：

.wrapper { 
    width: 40em;
    height: 50%;
    padding: 15px 0; /* Top and bottom padding of 15px */ }

/* Block-level element will take up 100% of the 
  container width, minus {margin_right} + {marign_left} */
.wrapper > div { margin: 0 0 0 5px; }

【讨论】：

【解决方案3】：

看看 CSS 中的calc() 函数。希望浏览器对此的支持会增加。

【讨论】：

【解决方案4】：

您可以使用 css3 calc() 实现此目的。像这样写：

div{
    width: 40%;
    width: -webkit-calc(40% - 5px);
    width: -moz-calc(40% - 5px);
    width: calc(40% - 5px);
    height:50%;
    height: -webkit-calc(50% + 50px);
    height: -moz-calc(50% + 50px);
    height: calc(50% + 50px);
    background: green;
    color: white;
    position:absolute;
}

检查这个http://jsfiddle.net/3QUw6/

查看此讨论以了解更多Is it possible to make a div 50px less than 100% in CSS3?

【讨论】：

这就是我要找的。span>
但问题是你为什么要使用这个？
另外，不兼容 caniuse.com/#search=calc
@Wex 这就是我在上面定义 CSS3 的原因。
@Wex 我们已经为我们的用户推荐了 Chrome，所以没有问题。另外我解释了为什么我不喜欢使用上面的js。