500元 倍投方案 稳赚:css3中的calc函数浅析

北京快三走势图 www.mxld9.cn   发布时间:2018-07-10 15:56:37   作者:奔跑的小前端   我要评论

calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分。但它却是就是css3的一部分,下面这篇文章主要给大家介绍了关于css3中calc函数的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

前言

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

简介

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

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

正文:

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

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

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

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

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

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

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

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

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

支持版本:CSS3

兼容性:(开头说了)

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

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

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

总结

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

相关文章

  • 巧用CSS3的calc()宽度计算做响应模式布局的方法

    本篇文章主要介绍了巧用CSS3的calc()宽度计算做响应模式布局的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-22
  • CSS3 calc()会计算属性详解

    这篇文章主要介绍了CSS3 calc()会计算属性详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-27
  • 详解CSS 3 中的 calc() 方法

    这篇文章主要介绍了详解CSS 3 的 calc() 方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-01-12
  • 浅谈css3中calc在less编译时被计算的解决办法

    这篇文章主要介绍了浅谈css3中calc在less编译时被计算的解决办法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-04
  • CSS3 Calc实现滚动条出现页面不跳动问题

    calc是css3的一个新功能,用来指定元素的长度,calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。接下来脚本之家小编给大家分享CSS3 Calc实现滚动
    2017-09-14
  • CSS3的calc()做响应模式布局的实现方法

    这篇文章主要介绍了 CSS3的calc()做响应模式布局的实现方法,需要的朋友可以参考下
    2017-09-06
  • CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)

    这篇文章主要介绍了如何使用CSS3代码更好实现js中效果,clac Counters Tooltip等功能使得代码更为简洁明了,需要的朋友可以参考下
    2017-08-15
  • 使用CSS3中的calc()属性来以算式表达尺寸数值

    calc()的用法十分巧妙,可以像我们在学校做数学应用题那样列式子来计算长度宽度等值,从而一定程度上实现自适应布局,下面我们就来介绍如何使用CSS3中的calc()属性来以算式表
    2016-06-06
  • 浅析CSS中calc()的使用

    这篇文章主要介绍了浅析CSS中calc()的使用的相关资料,需要的朋友可以参考下
    2016-05-10
  • 初探CSS3中的calc()功能

    这篇文章主要初步介绍了CSS3中的calc()功能,作者写作此文时提及了注意各浏览器的支持情况,需要的朋友可以参考下
    2015-07-14

最新评论

  • 世界杯还可以这样看 日媒:中国AI产品抢眼亚洲电子展} 2018-12-19
  • 广东万金油轰19+11展全能身手 连续两场得分王无愧核心 2018-12-19
  • 把市场经济说成计划经济是不是痴呆病? 2018-12-18
  • 山西省重要党务政务信息新闻发布会——黄河新闻网 2018-12-17
  • 黄坤明会见澳门新闻界高层访京团 2018-12-16
  • 你把我抱紧 我帮你扶伞 2018-12-16
  • 最高人民法院首次发布禁毒工作白皮书 2018-12-15
  • 高考背后,他们默默付出(组图)【3】 2018-12-15
  • 一家人写14万字介绍白云山花草 2018-12-14
  • 正定--河北频道--人民网 2018-12-14
  • 北京工业大学:突出‘京味’、体现‘京韵’,加快世界一流大学和一流学科建设 2018-12-13
  • 把握和传承好“变则通”思想(大家手笔) 2018-12-12
  • 英国歌手世界杯开幕比不雅手势 恐遭逮捕并罚款5万 2018-12-11
  • 一图到底3分钟读懂上合峰会医疗保障,为何青睐这里 2018-12-11
  • 白岩松康辉撒贝宁欧阳夏丹 揭秘央视主播成功秘诀 2018-12-10
  • 248| 370| 717| 153| 39| 907| 116| 338| 185| 411|