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+DIV实现漂亮的动画彩色标签
Jun 16 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 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
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
给ECShop添加最新评论
2015/01/07 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
Python语言的变量认识及操作方法
2018/02/11 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
python实现换位加密算法的示例
2018/10/14 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
python 实现简易的记事本
2020/11/30 Python
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
测控技术与仪器个人求职信范文
2013/12/30 职场文书
实验室的标语
2014/06/20 职场文书
全陪导游词
2015/02/04 职场文书
给numpy.array增加维度的超简单方法
2021/06/02 Python