zoukankan      html  css  js  c++  java
  • CSS3 calc()

    什么是calc()?

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

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


    语法

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


    兼容性使用

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


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

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


     

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


     

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


     

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


     

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

  • 相关阅读:
    CCF CSP 201509-1 数列分段
    CCF CSP 201503-1 图像旋转 (降维)
    CCF CSP 201412-1 门禁系统
    CCF CSP 201409-1 相邻数对
    CCF CSP 201403-1 相反数
    CCF CSP 201312-1 出现次数最多的数
    Win10环境下 HTTP 错误 500.19
    牛客网 整数拆分 (动态规划)
    牛客网 放苹果
    LeetCode9 回文数
  • 原文地址:https://www.cnblogs.com/runhua/p/9566246.html
Copyright © 2011-2022 走看看