初探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实现Material Design效果
Mar 09 HTML / CSS
CSS3 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
CSS 左边固定宽右边自适应的6种方法
May 15 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编程之高级技巧——利用Mysql函数
2006/10/09 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
Python日期时间Time模块实例详解
2019/04/15 Python
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
《最大的“书”》教学反思
2014/02/14 职场文书
企业趣味活动方案
2014/08/21 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
在职员工证明书
2014/09/19 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技