码迷,mamicode.com
首页 > Web开发 > 详细

CSS3 calc()

时间:2018-08-31 17:12:39      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:空格   混合   图片   tps   alt   添加   需要   自己   运算符   

什么是calc()?

    calc()是CSS3的一个新功能,能够动态地计算长度值,任何长度值都可以使用calc()来计算。你可以给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度,比如“width:calc(50% + 2em)”,这样一来你就不用考虑元素DIV的宽度值到底是多少,而把这个烦人的任务交由浏览器去计算。

(在使用的时候应当注意运算符前后都应该保留空格,尽管*和/这两个运算符并不需要保留空格,但是为了习惯最好加上。)

 

技术分享图片
语法

    除了移动端的浏览器之外,目前大多数的浏览器都对calc()有较好的兼容性,但是依旧要在前面添加前缀,例如:

 

技术分享图片
兼容性使用

    在calc()中,我们可以混合绝对单元与相对单元,比如:

 

技术分享图片
结合相对于绝对单元的用法

    使用calc()时,计算值是表达式自己,而非表达式的结果,当使用CSS预处理器做数学运算时,给定值为表达式的结果。

 

技术分享图片
 

    然后浏览器解析的calc()的值为真实的calc()表达式

 

技术分享图片
 

    我们可以使用calc()来实现元素的垂直居中

技术分享图片
 

    而典型的解决方法是使用负外边距移动自身距离高与宽的一半

 

技术分享图片
 

    实际上calc()还有很多的实际用法,这里只是举一下例,欢迎补充

 

CSS3 calc()

标签:空格   混合   图片   tps   alt   添加   需要   自己   运算符   

原文地址:https://www.cnblogs.com/runhua/p/9566246.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!