• calc()使用用法


    calc()是css3的一个新增的功能,用来指定元素的长度。

    它是动态设置元素值,可由加减乘除算法得到最后计算值。

    比如说“calc(50% + 5em)”

    在使用less解析中calc运算会忽略单位出现:“calc(50% - 5em)” 解析为 “calc(45%)”的情况

    修改方法:calc(~"50% - 5em")

    运算规则

    使用“+”、“-”、“*” 和 “/”四则运算;

    可以使用百分比、px、em、rem等单位;

    可以混合使用各种单位进行计算;

    表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(50%+5em)"这种没有空格的写法是错误的;

    表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。

    运算百分比

    除了基本的px,%,em等,还有:

    vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)

    vh:视窗高度的百分比

    vmin:当前 vw 和 vh 中较小的一个值

    vmax:当前 vw 和 vh 中较大的一个值

    兼容性:

    桌面 PC
    Chrome:自 26 版起就完美支持
    Firefox:自 19 版起就完美支持
    Safari:自 6.1 版起就完美支持
    Opera:自 15 版起就完美支持
    IE:自 IE10 起(包括 Edge)到现在还只是部分支持(不支持 vmax,同时 vm 代替 vmin)

    移动设备
    Android:自 4.4 版起就完美支持
    iOS:自 iOS8 版起就完美支持

    附加:(flex垂直居中)

    垂直居中三部曲:放父元素
    display: flex;
    justify-content: center;
    align-items: center;

  • 相关阅读:
    一道比较有趣的题
    笑话两则
    时钟
    组策略 简单介绍
    网页乱码问题ASP.NET
    同性恋的公鸡
    SQL中CASE函数_可解决编程中空表检索的一些问题
    百万网?
    黑客 故事
    word有趣问题集锦
  • 原文地址:https://www.cnblogs.com/zhaozhou/p/9928197.html
Copyright © 2020-2023  润新知