zoukankan      html  css  js  c++  java
  • CSS3动态计算公式——calc()的坑

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

    需要注意的是,运算符前后都需要保留一个空格,例如: calc(100% - 10px);
    任何长度值都可以使用calc()函数进行计算;
    calc()函数支持 "+", "-", "*", "/" 运算;
    calc()函数使用标准的数学运算优先级规则;
    注意:

    calc(100%-100px);——无法起作用

    calc(100% - 100px);——可以使用了

    calc()计算中的两个值必须同运算符号之间存在空格,否则不会起作用

    解决在less中无法正确计算的问题  加~

    calc(~"100% - 100px")  有时候%也不会起作用可以用vh代替即:

    calc(~"100vh - 100px") 

    在讲calc之前先说一下 vh  vw:
        vw  相对于视口的宽度。视口被均分为100单位的vw
       vh  相对于视口的高度。视口被均分为100单位的vh
       vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
       vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
    calc(100vh - 10px)  表示整个浏览器窗口高度减去10px的大小
    calc(100vw - 10px)   表示整个浏览器窗口宽度减去10px的大小
  • 相关阅读:
    Spring配置多个数据源
    虚拟机内存结构
    Java中sleep,wait,yield,join的区别
    Java的四种引用方式
    Java 中的泛型详解-Java编程思想
    Java RTTI和反射
    linux 分析java 线程状态
    小容量的byteBuffer 读取大文本
    @Conditional 原理
    替换字符串占位符
  • 原文地址:https://www.cnblogs.com/snowhite/p/14323656.html
Copyright © 2011-2022 走看看