CSS3 calc()

什么是calc()?

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

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


语法

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


兼容性使用

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


结合相对于绝对单元的用法

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


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


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

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


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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,172评论 1 92
  • 1. 什么是calc()? 其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用...
    yzr_0802阅读 290评论 0 0
  • sass里可以进行计算,比如宽度,高度等,类似下面的语法 element{ width: 100px + 50px...
    avery1阅读 530评论 0 0
  • 1、calc是什么? calc是英文单词calculate(计算)的缩写,用于动态计算长度值。 calc()函数支...
  • 如何写好作文? 1、好的文章源于生活,写你的所见、所闻;写你的亲身体会;写出你的真情实感,这样的文章,才会生动感人...
    刘婧_阅读 416评论 4 2

友情链接更多精彩内容