什么是calc:

  calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。

calc()可以解决问题

  元素宽度为100%时,若再设置margin、padding、border,元素将会撑破父元素,溢出。虽然CSS3属性中的box-sizing在一定程度上可以解决这样的问题,但是calc()函数功能实现该效果更简单。

  calc()能让元素做计算,你可以给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度,比如说“width:calc(50% + 2em)”,这样一来你就不用考虑元素DIV的宽度值到底是多少,而把这个计算的任务交由浏览器去计算。

calc()语法:

  calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:

  .elm {
  width: calc(expression);
  }

    其中"expression"是一个表达式,用来计算长度的表达式。

   calc()的运算规则:

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

  1. 使用“+”、“-”、“*” 和 “/”四则运算;
  2. 可以使用百分比、px、em、rem等单位;
  3. 可以混合使用各种单位进行计算;
  4. 表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;
  5. 表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。

  浏览器的兼容性:

  浏览器对calc()的兼容性还算不错,在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持,同样需要在其前面加上各浏览器厂商的识别符,不过可惜的是,移动端的浏览器还没仅有“firefox for android 14.0”支持,其他的全军覆没。

最新文章

  1. hibernate关联映射
  2. Data组件的JSON数据格式
  3. asp.net大文件上传与上传文件进度条问题
  4. 第一次使用Git心得体会
  5. 【POJ】【2601】Simple calculations
  6. SQL Server 阻止了对组件 'xp_cmdshell' 的 过程'sys.xp_cmdshell' 的访问
  7. Vis.js图表插件
  8. qt 操作word
  9. Java 处理图片 base64 编码的相互转换
  10. innobackupex 简单使用笔记
  11. Redis其他常用操作
  12. 04-HTML-图片标签
  13. Python入门-三级菜单
  14. 使用ssh tunnel 来做代理或跳板
  15. sqlmap的使用
  16. redis 启动
  17. iOS,Android,WP, .NET通用AES加密算法
  18. SpringBoot和SpringCloud配置
  19. 网络虚拟化中的 offload 技术:LSO/LRO、GSO/GRO、TSO/UFO、RSS、VXLAN
  20. linux文件系统命令(1)---概述

热门文章

  1. Java常考面试题整理(四)
  2. 【学习】mysql 时间戳与日期格式的相互转换
  3. TCP定时器 之 FIN_WAIT_2定时器
  4. MySQL定时任务实现方法
  5. Vue.js---配置开发环境
  6. jenkins部署java项目
  7. 使用Android自带的资源
  8. Elasticsearch 6.2.3版本 filtered 报错问题 no [query] registered for [filtered]
  9. Maven 安装 / 常用配置 / 阿里maven中央仓库
  10. 将JSON字符串反序列化为指定的.NET对象类型