初探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动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
利用CSS3的定位页面元素
Aug 29 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
HTML5新标签兼容——> 的两种方法
Sep 12 HTML / CSS
Css预编语言及区别详解
Apr 25 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
May 21 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
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
详解node中创建服务进程
2017/05/09 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
python进阶教程之词典、字典、dict
2014/08/29 Python
Python编程之多态用法实例详解
2015/05/19 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
python实现扫雷游戏的示例
2020/10/20 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
性能测试工程师的面试题
2015/02/20 面试题
大专生工程监理求职信
2013/10/04 职场文书
刊首寄语大全
2014/04/11 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
稽核岗位职责
2015/02/10 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
SQL基础的查询语句
2021/11/11 MySQL