css的calc()函数、浅谈及了解

calc():用于动态计算元素的宽度、高度等数值。

注意:运算符的前后都要有空格,运算符是“+”,“-”,“*”,“/”

例如:

加空格的样子:width: calc(100% - 100px)

不加空格的样子:width: calc(100%-100px)

css代码:


html:


谈一下兼容性:

在IE678是不支持的,IE9可以正常运行

在谷歌浏览器的效果:


在IE9及以上效果:


在IE678的效果:


总结:

    1.可以进行加减乘除的运算;

    2.在高版本浏览器及IE9以上,可以正常运行;

    3.在IE678中,识别不了此属性,没有效果,宽度为0px;

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 很多时候跟着书和不系统的视频学习,会发现没有方向,学了很多却不知道自己能够做出什么成绩。 学习要有一个清晰的职业学...
    PHP9年架构师阅读 773评论 0 2
  • 一、初识jQuery.js jQuery.js是一款优秀的JS类库,其本质就是在一个立即执行的匿名函数中的闭包,j...
    刘远舟阅读 648评论 1 0
  • 1 场景 css的样式中,存在动态计算长度的需求。 2 方案 使用css中的calc函数动态计算css中的长度值。...
    水煮鱼又失败了阅读 5,411评论 0 1
  • 这篇文章你将学到以下内容: CSS 变量 CSS 常用函数 iPhone X 系列机型适配 CSS At-rule...
    越前君阅读 3,472评论 0 9
  • 浏览器是如何工作的? (工作原理) sublime text 3 快捷键大全以及配置编译环境 socket 变量声...
    沿溪行阅读 857评论 0 2