css3 calc()功能小窥

前，我们想要实现一个完美的宽度自适应的输入框好麻烦，曾经也被作为对前端技术的一个挑战。类似的常见场景还有100%宽+边框的容器等。遇到这些情况，我们不得不分外小心，因为各个浏览器的表现可能不一致。

现在，firefox和webkit相继支持calc()功能了，我们也可以学习下了。

calc()是干嘛的？

calc()是单词calculate(计算)的缩写，是css3的一个新的长度单位功能，可以使用简单的数学运算。

嗯，CSS3越来越高级了。

运算规则

calc()使用通用的数学运算规则，但是也提供更智能的功能：

使用“+”“-”“*”“/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算。

实例：

我们来看几个小例子来理解下calc()功能吧：

.box<span style="color:#00AA00;">{</span> <span style="font-weight:bold;">border</span><span style="color:#00AA00;">:</span><span style="color:#993333;">1px</span> <span style="color:#993333;">solid</span> <span style="color:#CC00CC;">#ddd</span><span style="color:#00AA00;">;</span> <span style="font-weight:bold;">width</span><span style="color:#00AA00;">:</span>calc<span style="color:#00AA00;">(</span><span style="color:#993333;">100%</span><span style="color:#993333;">-2px</span><span style="color:#00AA00;">)</span> <span style="color:#00AA00;">}</span>

.box{ border:1px solid #ddd; width:calc(100%-2px) }

容器宽度加上边框宽度正好100%。

1
2
3

.box<span style="color:#00AA00;">{</span> <span style="font-weight:bold;">width</span><span style="color:#00AA00;">:</span>calc<span style="color:#00AA00;">(</span><span style="color:#993333;">10em</span><span style="color:#993333;">+20px</span><span style="color:#00AA00;">)</span> <span style="color:#00AA00;">}</span>

.box{ width:calc(10em+20px) }

宽度，10em加20px。

.box<span style="color:#00AA00;">{</span> <span style="font-weight:bold;">margin-left</span><span style="color:#00AA00;">:</span><span style="color:#993333;">20px</span><span style="color:#00AA00;">;</span> <span style="font-weight:bold;">width</span><span style="color:#00AA00;">:</span>calc<span style="color:#00AA00;">(</span><span style="color:#993333;">100%</span>/<span style="color:#CC66CC;">3</span><span style="color:#993333;">-20px</span><span style="color:#00AA00;">)</span><span style="color:#00AA00;">;</span> <span style="color:#00AA00;">}</span> <span style="color:#6666FF;">.box</span><span style="color:#3333FF;">:nth-</span>child<span style="color:#00AA00;">(</span>3n<span style="color:#00AA00;">)</span><span style="color:#00AA00;">{</span> <span style="font-weight:bold;">margin-left</span><span style="color:#00AA00;">:</span><span style="color:#CC66CC;">0</span><span style="color:#00AA00;">;</span> <span style="color:#00AA00;">}</span>