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的大小
  • 相关阅读:
    站立会议(2)
    站立会议(1)
    学习进度条
    四则运算2
    学习进度条
    IDEA用maven创建springMVC项目和配置
    Itellij Idea全局搜索
    Spring各个jar包作用
    IDEA一定要改的八条配置
    Nio使用Selector客户端与服务器的通信
  • 原文地址:https://www.cnblogs.com/snowhite/p/14323656.html
Copyright © 2011-2022 走看看