• CSS/CSS3 变量var()使用 以及 calc()函数计算的使用

    最近新喜欢上了css中的var以及calc()函数,这可以在不使用less或者scss的情况下实现变量以及函数的使用,在此记录一下
    var变量的定义语法 : - -变量名 两个短横线加上变量名
    var变量的使用 : var(- -变量名)
    我们可以在root或者任何一个我们想要使用的变量语法的层级中定义var()变量并进行使用
    例如

    body{
	--fontSize: 18px;
	--color: #000000;
}
//定义
:root {
        --background-color: #000;
        --font-color: #fff;
}
// 使用
.box1 {
        height: 100px;
        width: 100px;
        background-color: var(--background-color);
        color: var(--font-color);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    :root{}
    可以在一个CSS文件中定义全局变量，供多个属性引用。

    var()
    var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。
    calc函数的使用

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

    <style>
body {
        --winW: 500px;
        --winH: 500px;
        background-color: blueviolet;
      }
      .box {
        width: var(--winW);
        height: calc(var(--winH) - 200px);
        background-color: red;
      }
</style>
  <body>
    <div class="box">
      <div class="box1">测试css中的var</div>
      <div class="box2">正常的</div>
    </div>
  </body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    在这里插入图片描述

  • 相关阅读:
    C语言题解 | 去重数组&&合并数组
    2022开源大数据热力报告总结
    JAVA后端工程师笔试题-避坑公司
    Linux系统编程笔记--系统（文件）I/O操作
    力扣——第298场周赛
    fluentmybatis
    星闪：咫尺之间，联接智能世界
    Java线程池进阶
    基于区块链技术的域名系统设计与实现
    编辑器的缩略图实现原理
  • 原文地址：https://blog.csdn.net/weixin_42343307/article/details/125474703