初探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 相关文章推荐
CSS3弹性盒模型开发笔记(二)
Apr 26 HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
Jun 16 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
CSS实现聊天气泡效果
Apr 26 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
基于HTML5 FileSystem API的使用介绍
Apr 24 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 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 身份验证方面的函数
2009/10/11 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
php去掉文件前几行的方法
2015/07/29 PHP
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
Python复制目录结构脚本代码分享
2015/03/06 Python
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
python模拟表单提交登录图书馆
2018/04/27 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
给酒店员工的表扬信
2014/01/11 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
租房协议书范本
2014/04/09 职场文书
爱国演讲稿400字
2014/05/07 职场文书
老龄工作先进事迹
2014/08/15 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
Redis集群的关闭与重启操作
2021/07/07 Redis