19

反正我可以写一个css值作为数学表达式吗？例子：

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

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

4

4 回答 4

28

您可以使用 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/

检查此讨论以获取更多信息是否可以在 CSS3 中使 div 50px 小于 100%？

于 2012-08-07T08:16:58.123 回答
3

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

于 2012-08-07T08:02:29.900 回答
2

两者padding和margin都可用于添加对象的尺寸。我建议你阅读盒子模型。

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; }
于 2012-08-07T08:04:21.020 回答
2

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

于 2012-08-07T08:14:50.043 回答