现在浏览器支持的CSS高级用法

CSS 变量

• 概念：
  自定义属性（有时候也被称作CSS变量或者级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由var() 函数来获取值（比如： color: var(--main-color);）

•  定义作用域：

  • 全局作用域：定义在根伪类 :root

    :root {
      --main-bg-color: brown;
    }
    
    div{
      background-color: var(--main-bg-color);
    }

     

• 注意：自定义属性名是大小写敏感的，--my-color 和 --My-color 会被认为是两个不同的自定义属性。

CSS 数学函数

　　参考：https://juejin.cn/post/7096302108084961310

• calc()
  此函数允许在声明 CSS 属性值时执行一些计算。

  {
      width: calc(100% - 80px);
  }

  需要注意点：
  
  • + 和 - 运算符的两边必须要有空白字符。比如，calc(50% -8px) 会被解析成为一个无效的表达式，必须写成calc(8px + -50%)
  • 用 0 作除数会使 HTML 解析器抛出异常
  • calc() 函数支持嵌套，但支持的方式是：把被嵌套的 calc() 函数全当成普通的括号。（所以，函数内直接用括号就好了。）
  • calc() 支持与 CSS 变量混合使用
    
    
• min()
  从一个逗号分隔的表达式列表中选择最小的值作为属性的值。

  .container {
      width: min(100%, 500px);
      height: 100px;
      background: #000;
  }

• max()
  从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值
  
  
• clamp()
  把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用