登录  /  注册
首页 > web前端 > css教程 > 正文

CSS3中新属性calc()的详细介绍

黄舟
发布: 2017-11-01 10:30:37
原创
2196人浏览过

一、前言

  calc()看起来像是javascript中的一个函数,而事实上它是用在Css中的,可以用它来计算长度(宽度或高度),能够自动根据不同尺寸的屏幕自动调接数值,从而很轻松的实现自适应布局展示在不同尺寸屏幕下。项目中常常碰到要始终居中的元素,当然想到的第一个就是使用margin:0 auto;或者使用定位和margin结合的这种简单的方法,当同事告诉我让我去研究研究calc的时候才真正的深入了解这个Css3中的新东西。

二、使用方法

  calc()中的参数是一个计算公式,通过这个计算公式把计算宽度和数值的任务扔给不同尺寸下的浏览器,让页面能够自己得出宽度或数值的结论,这些计算公式也都是很简单的加( + )减( - )乘( * )除( / )运算。

p{
    width: calc(15px + 15px);//30px
    width: calc(15px - 10px);//5px
    width: calc(15px*2);//30px
    width: calc(15px/3);//5px}
登录后复制

  从上面的例子中可以看出,加( + )减( - )运算中需要计算的数值与运算符之间是有空格的,并且这空格是不能省略的,而乘( * )除( / )运算里的空格是可以省略的。

  calc()中的表达式是可以使用百分比、px、em、rem等单位进行计算的,并且单位可以混在一起计算:

p{
    width: calc(3em + 5px);//53px}
登录后复制

三、calc()嵌套

  calc()是一个函数,那么函数是可以支持嵌套的,可以通过不同的公式来算出最后的结果。

p{
    --widthA: calc(10px + 190px);
    --widthB: calc(var(--widthA) / 2);
    --widthC: calc(var(--widthB) / 2);
    width: var(--widthC);//50px
}
登录后复制

四、简单的居中

  calc()可以计算宽度以后,居中显示的实现就可以有很多方法,padding或者margin,但它的原理都是一样的。

p{
    padding: 0 calc((100% - 1024px)/2);
}
登录后复制

  假设中间的内容是固定宽度1024px,那么获取父级的宽度或者窗口的宽度100%,然后减去内容的宽度后剩下的就是需要分配给内容左右两边的宽度,将它们一分为二(/2)就可以实现中间1024px宽度的内容一直居中了。

五、兼容性

  calc()的兼容性已经很高了,IE9+、FF4.0+、Chrome和Safari6+都已经支持calc()的应用,但还是要加上不同浏览器的前缀。

div{
    -moz-calc(expression);
    -webkit-calc(expression);
    calc(expression);
   //expression为计算公式}
登录后复制

以上就是CSS3中新属性calc()的详细介绍的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号