css3中的calc函数浅析


Posted in HTML / CSS onJuly 10, 2018

前言

其实在之前学习CSS3的时候,我并没有注意到有calc()这个属性,后来在看一个大牛的代码的时候看到了这个,然后就引发了后来的一系列的查找、学习,以及这篇博客的诞生。好了,废话不多说了,来干正事。

简介

其实,calc()这个形式看起来就很容易让人想到Javascript里的函数,当然他不是js里的函数,但是他有着类似函数的功能,可以用来计算,括号里是一个表达式,通常用calc()来指定元素的长度,不管是width、height、border还是padding等都可以用他来指定。说白了,calc()就是css3的一个指定元素长度的属性,他的特殊之处在于他可以做计算,而且支持混合使用各种单位,比如%、px、em等。所以这个属性特别适用于那些自适应的布局。

兼容性:在IE9+、FF4.0+、Chrome19+、Safari6+都得到了较好支持(据说在使用时要加上供应商前缀,但是我测试了一下,不加也是可以用的),但是在移动端的支持不是很好。

正文:

最近在一次项目中我遇到一个很普通的问题,相信大家都会遇到过,我的需求是这样的,我的侧边栏的高度是百分百的,就像下面的例子一样:

css3中的calc函数浅析

这时我要在顶部导航栏上加一些需求,要实现的效果类似于这样,不过想很郁闷它出现了滚动条,效果如下:

css3中的calc函数浅析

我不想它出现滚动条,这个时候可能很多同学会说,我可以用绝对定位等等,但我的顶部导航栏本来就是绝对定位呀,于是乎我翻了一翻css3,发现了一个神奇的函数,calc!!!(啊尼路亚,啊尼路亚,啊尼路亚,啊尼路亚~~~)

下面是一些粗鄙的无聊的复制粘贴过来的函数说明:

calc() 函数用于动态计算长度值。

需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100vh - 10px);

任何长度值都可以使用calc()函数进行计算;

calc()函数支持 "+", "-", "*", "/" 运算;

calc()函数使用标准的数学运算优先级规则;

支持版本:CSS3

兼容性:(开头说了)

回到正事,了解了它的内容,接下来就要看看它能给你带来的好处,比如:消灭滚动条,当我把父级的高度设置成height: calc(100vh - '我的需求内容高度')时滚动条神奇的消失了,呈现了这样的效果:

css3中的calc函数浅析

登登登登~!!!是不是很神奇,为什么会这样呢?因为100vh就相当于window.innerHeight, 是浏览器的内部高度, 滚动条高度也计算在内。如果高只设置100%是可用高度, 就不包含滚动条的高度啦, 是不是非常好用的一个东西(说那么多大家走过路过应施舍点点赞给我,谢谢谢谢~)

其实不仅仅只有高,还有很多很多应用场景都是可以实现的,比如我们经常会给自己的ul li设置padding或者margin,当li的个数没有超过一定的数量时它是不会换到第二行的,但有时候就因为那么一点点padding或者margin就换行了,使得左边或者右边空白了一处很难看,大家都可以用calc这个函数去解决,我就不一一举例了哈,本人技术水平有限,就说到这了,如果有错的地方,希望大家可以多多指出,祝大家级别年年跳,薪资翻又翻。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

HTML / CSS 相关文章推荐
CSS3 制作绽放的莲花采用效果叠加实现
Jan 31 HTML / CSS
CSS3中的content属性使用示例
Jul 20 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
Jul 09 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
May 11 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 HTML / CSS
详解css3 object-fit属性
Jul 27 #HTML / CSS
CSS3对图片照片进行边缘模糊处理的实现
Aug 08 #HTML / CSS
详解CSS3伸缩布局盒模型Flex布局
Aug 20 #HTML / CSS
css3动画效果抖动解决方法
Sep 03 #HTML / CSS
微信小程序实现可实时改变转速的css3旋转动画实例代码
Sep 11 #HTML / CSS
CSS3 background-image颜色渐变的实现代码
Sep 13 #HTML / CSS
基于CSS3实现的几个小loading效果
Sep 27 #HTML / CSS
You might like
php 将excel导入mysql
2009/11/09 PHP
PHP操作数组相关函数
2011/02/03 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
PHP模块化安装教程
2016/06/01 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
Python常用的json标准库
2019/02/19 Python
python字符串循环左移
2019/03/08 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
Python中如何定义一个函数
2016/09/06 面试题
电气工程和自动化自荐信范文
2013/12/25 职场文书
我的求职计划书
2014/01/10 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
小学生期末评语
2014/04/21 职场文书
消防志愿者活动方案
2014/08/23 职场文书
2014年质检员工作总结
2014/11/18 职场文书
起诉离婚协议书样本
2014/11/25 职场文书