CSS中的计算函数

前言


🎯大家好我是一溪风月一名普普通通的前端开发,做前端两年多了,但是自己反思了一下,在这两年多的时间,在对技术的追寻上一直都是追求新与多在这个道路上往往忽略了前端最本质的东西,那就是前端究竟在做什么,前端的价值和意义在什么地方,前端的基础,经过自己的思考决定从头学习下前端的知识,让自己沉下心来查漏补缺,放弃追逐新东西,寻找自己,了解自己。

一.什么是CSS中的函数?


😊我们知道在CSS中有很多类似于rgb rgba rotate scale等等,其实这些就是CSS中的函数,就像rgb在颜色中应该没有一个颜色叫做rgb吧,其实这些都是CSS提供给我们的函数供我们传入一些数据让引擎来进行计算,返回给我们具体的颜色值,这样做的好处是比较灵活,今天我们就在这些内容的基础上学习一些CSS中常见且好用的CSS计算函数。

  1. var:使用CSS定义的变量。
  2. calc:计算CSS的值,通常用于计算元素的大小和位置。

二.var函数的使用


🤡我们在日常的开发中可能会遇到这样的场景,在页面中有很多相同的颜色值,这样的话我们就需要一次一次的去复制粘贴对应的颜色,但是可能有时候我们需要直接把这些相同的颜色全部更换成某个颜色,那么我们就老老实实的一个一个的修改,会很多麻烦,也可能容易出现错误,所以CSS就提供了var函数,用来使用CSS定义的变量,那么CSS是如何定义变量的哪?

😶‍🌫️CSS定义变量的方式如下,需要在定义的变量名前面加上--表示这是自定义的变量。

css 复制代码
--main-color:red

🎯我们使用自定义变量的方法很简单,就是使用我们所说的var函数来使用它。

css 复制代码
:root {
  --main-color: red;
}
/* :root 选中的就是html标签 */

.main-box {
  color: var(--main-color);
}

🔔变量的定义位置建议定义在html当然我们可以使用:root来代替,因为定义变量的使用规则就是只有它的子节点可以使用,所以一般我们都会定义在全局中,这点跟JS中的作用域比较相似,可以类比理解。

三.calc函数的使用


👽calc的使用场景是进行一些简单的数学运算,假如有一个大盒子中套了两个小盒子,一个盒子宽度固定,我们想要另一个盒子将剩余的内容占满,其实这个需求很简单哪,我们直接使用flex布局就可以了,但是如果我们不使用这个布局的方式该如何进行实现哪?

css 复制代码
.main-box {
  width: 700px;
  height: 100px;
  background-color: aquamarine;
}

.main-box>div:first-child {
  display: inline-block;
  width: 300px;
  height: 100%;
  background-color: antiquewhite;
}

.main-box>div:last-child {
  display: inline-block;
  width: calc(700px - 400px);
  height: 100%;
  background-color: blueviolet;
}

🔔注意:当我们在进行calc的计算的时候运算符左右两边需要空格,否则会没有反应。


相关推荐
訾博ZiBo8 小时前
【Vibe Coding】001-前端界面常用布局
前端
IT_陈寒8 小时前
《Redis性能翻倍的7个冷门技巧,90%开发者都不知道!》
前端·人工智能·后端
歪歪1008 小时前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架
知识分享小能手8 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
ZYMFZ9 小时前
python面向对象
前端·数据库·python
长空任鸟飞_阿康9 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·vue.js·人工智能
lapiii3589 小时前
快速学完React计划(第一天)
前端·react.js·前端框架
苏打水com9 小时前
从 HTML/CSS/JS 到 React:前端进阶的平滑过渡指南
前端·javascript·html
一枚前端小能手9 小时前
🔐 单点登录还在手动跳转?这几个SSO实现技巧让你的用户体验飞起来
前端·javascript