初探CSS3中的calc()功能


Posted in HTML / CSS onJuly 14, 2015

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

现在,firefox和webkit相继支持calc()功能了,我们也可以学习下了。
calc()是干嘛的?

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

嗯,CSS3越来越高级了。
运算规则

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

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

实例:

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

CSS Code复制内容到剪贴板
  1. .box{ border:1px solid #dddwidth:calc(100%-2px) }  

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

CSS Code复制内容到剪贴板
  1. .box{ width:calc(10em+20px) }  

宽度,10em加20px。

CSS Code复制内容到剪贴板
  1. .box{ margin-left:20pxwidth:calc(100%/3-20px); }    
  2. .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复制内容到剪贴板
  1. width: calc(100%/3 - 2*1em - 2*1px);  

这样写也是可以的:

CSS Code复制内容到剪贴板
  1. width: calc(100% / 3 - 2 * 1em - 2 * 1px);  

但是这样写就是错的:

CSS Code复制内容到剪贴板
  1. width: calc(100%/3-2*1em-2*1px);  

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

HTML / CSS 相关文章推荐
详解CSS样式中的 !important * _ 符号
Mar 09 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 HTML / CSS
HTML5 input元素类型:email及url介绍
Aug 13 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 #HTML / CSS
CSS3中HSL和HSLA的简单使用示例
Jul 14 #HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 #HTML / CSS
使用CSS3制作响应式导航菜单的方法
Jul 12 #HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 #HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 #HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 #HTML / CSS
You might like
php图片加中文水印实现代码分享
2012/10/31 PHP
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
提高网站信任度的技巧
2008/10/17 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
python的绘图工具matplotlib使用实例
2014/07/03 Python
python修改字典内key对应值的方法
2015/07/11 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
python实现多层感知器
2019/01/18 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
python跨文件使用全局变量的实现
2020/11/17 Python
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
2015学生会文艺部工作总结
2015/04/03 职场文书
张丽莉观后感
2015/06/16 职场文书
电工实训心得体会
2016/01/14 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫