-
在我们想要实现一个完美的宽度自适应输入框之前，这对前端技术是一个挑战，类似的普通场景是100%个宽边框容器，在这种情况下，我们必须小心，因为各种浏览器的性能可能不一致。
现在，Firefox和WebKit支持calc（）的功能，一个接一个，我们也可以学习。
Calc（）是什么
钙（）这个词的缩写计算，一个新的CSS3长度单位的功能，可用于简单的数学计算。
嗯，CSS3越来越先进。
操作规则
计算器（）使用一般的数学运算规则，但也提供更智能的功能：
使用；；；；；；；；四个操作；
你可以使用百分比，PX，EM，REM和其他单位。
可用于多种计算单位。
实例uff1a
让我们看几个小例子来了解函数的作用。
CSS代码将内容复制到剪贴板。
{ border: 1px solid。箱# DDD；宽度：钙（100% 2PN）}
容器的宽度加上边框的宽度仅为100%。
CSS代码将内容复制到剪贴板。
。箱{宽度：钙（10em + 20px）}
宽度，10em加20px。
CSS代码将内容复制到剪贴板。
。箱{ margin-left: 20px；宽度：钙（100% / 3-20px）；}
。盒：nth-child（3N）{保证金左：0；}
3列布局宽度。
浏览器支持
Firefox 4 +已经支持钙（）函数，但-moz钙（）的私有财产，Chrome也开始支持私人WebKit的钙（）从19开发版。IE9已被迫一次不支持这样做。歌剧似乎不支持。
因此，如果我们想使用这个属性，记得要带来各种浏览器的兼容性。
Eric Meyer提到了W3C规范的说明（也在评论中提到）：
注意语法要求各地' + '二进制空间；；、；+；；；
也就是说，；两个符号必须在边缘上有空格，而且符号是没有必要的。
然后我们可能要写这个：
CSS代码将内容复制到剪贴板。
宽度：钙（100% / 3 - 2 * 2 * 1em 1px）；
也可以写这个：
CSS代码将内容复制到剪贴板。
宽度：钙（100% / 2 * 2 * 1em 1px）；
但是写这个是不对的：
CSS代码将内容复制到剪贴板。
宽度：钙（100% / 2×1em-2 * 1px）；
很容易出错，幸运的是现在没有太多的浏览器支持。我会继续观察并保持更新。