zoukankan      html  css  js  c++  java
  • 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;

  • 相关阅读:
    [SQL Basics] Indexes
    [DS Basics] Data structures
    [Algorithm Basics] Search
    [Algorithm Basics] Sorting, LinkedList
    [Java Basics] multi-threading
    [Java Basics] Reflection
    [Java Basics] Collection
    SSH basics
    纯css实现三角形
    2015年百度实习生前端笔试题上海卷a
  • 原文地址:https://www.cnblogs.com/zhaozhou/p/9928197.html
Copyright © 2011-2022 走看看