css之calc,初探CSS3中的calc()功能

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

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

calc()是干嘛的？

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

嗯，CSS3越来越高级了。

运算规则

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

使用“+”“-”“*”“/”四则运算；

可以使用百分比、px、em、rem等单位；

可以混合使用各种单位进行计算。

实例：

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

CSS Code复制内容到剪贴板

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

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

CSS Code复制内容到剪贴板

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

宽度，10em加20px。

CSS Code复制内容到剪贴板

.box{margin-left:20px;width:calc(100%/3-20px); }

.box:nth-child(3n){margin-left:0; }

3栏等宽布局。

浏览器支持

firefox 4.0+已经开支支持calc()功能，不过要使用-moz-calc()私有属性，chrome从19 dev版，也开始支持私有的-webkit-calc()写法，IE9这次则牛逼了一次，原生支持标准的不带前缀的写法了。Opera貌似还不支持～～

所以如果我们要用这个属性的话，要记得带上各浏览器的兼容性。

eric meyer提到w3c规范的一条备注(评论里面的同学也有提到)：

Note that the grammar requires spaces around binary ‘+’ and ‘-’ operators. The ‘*’ and ‘/’ operators do not require spaces. via CSS3 Values and Units specification

也就是说，”+”、”-“两个符号边上必须要有空格，而”*”、”/”符号则不是必须的。

然后我们可能要这样写：

CSS Code复制内容到剪贴板

width: calc(100%/3 - 2*1em - 2*1px);

这样写也是可以的：

CSS Code复制内容到剪贴板

width: calc(100% / 3 - 2 * 1em - 2 *1px);

但是这样写就是错的：

CSS Code复制内容到剪贴板

width: calc(100%/3-2*1em-2*1px);

嗯，这样很容易写错啊。还好现在支持的浏览器还不太多，我会继续观望并保持更新~~

css之calc,初探CSS3中的calc()功能相关推荐

css3 中的calc用法
定义与用法 calc() 函数用于动态计算长度值. 1.需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 2.任何长度值都可以使用calc()函数 ...
[css] 举例说明在css3中怎么实现背景裁剪？
[css] 举例说明在css3中怎么实现背景裁剪? background-clip: border-box(默认,背景延伸至边框外沿,但是在边框的下层) padding-box(背景延伸至paddin ...
[css] 你有用过sass中的Mixin功能吗？它有哪些作用？
[css] 你有用过sass中的Mixin功能吗?它有哪些作用? 1.混合用法 2.函数用法1. @mixin ellipsis-one {overflow: hidden;text-overflow ...
CSS3中的calc()函数以及在less中的使用
1. calc()函数在CSS3中我们可以通过calc()函数来动态计算长度值,如: #div {width: calc(100% - 100px); } 它的语法是 calc(expression ...
css3中使用calc()计算宽高
calc()是什么? 是CSS3中新增的一个函数,calculate(计算)的缩写.用于动态计算宽/高,你可以使用calc()给元素的各个属性设置值[margin.border.padding.fon ...
CSS3中的calc( )属性
作用: calc() 函数用于动态计算长度值其实,calc()这个形式看起来就很容易让人想到Javascript里的函数,当然他不是js里的函数,但是他有着类似函数的功能,可以用来计算,括号里是一个 ...
css3中的calc()
1.什么是calc()? calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.padi ...
CSS3中使用calc()设置浏览器宽度和高度减去固定值的写法
设置宽度:width:calc(100vw - 123px); 说明:1.vw是width of view(port)的缩写: 2.100vw表示百分之百的视图宽度: 3.123px是需要减去的宽度: ...
css中变形,css3中变形处理
transfrom功能在css3 中可以使用transfrom功能实现文字或图像的旋转,缩放,倾斜,移动等变形处理 deg是css3中使用的一种角度单位. 旋转: 使用rotate方法,在参数中加入 ...

css之calc,初探CSS3中的calc()功能

css之calc,初探CSS3中的calc()功能相关推荐

最新文章

热门文章