CSS 函数

辛-夷

已于 2024-12-03 17:23:16 修改

阅读量1k

点赞数 37

分类专栏： css 文章标签： css 前端

于 2024-12-03 17:16:03 首次发布

本文链接：https://blog.csdn.net/weixin_65450681/article/details/144214556

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、介绍

本节内容，我们来讲解一下CSS当中的函数，众所周知函数我们只有在JS当中使用最多，那么你有了解过css函数吗？CSS函数是一种在CSS样式表中使用的特殊语法结构，用于处理和计算样式属性的值。它们可以接受输入参数，并根据这些参数返回不同的值。那么接下来我们就来学习一下css当中的函数吧！

二、var（）函数

var() css函数可以插入一个自定义的属性（有时也被成为css变量），用来替代非自定义属性中的任何部分，它允许我们在样式表中定义可重用的值，并且在多个地方引用他们。这种机制提高了代码的可维护性和灵活性，还使得动态更新样式成为可能。

1.语法

var(--custom-property-name,fallback-value);
/*
--custom-property-name:必需的，表示自定义属性的名称，名称前必须有两个连字符（-）
fallback-value：可选，表示当前自定义属性没有定义时使用的回退值

*/

2.声明

自定义属性（css变量）可以在任何地方声明，但是通常建议在:root伪类选择器中进行全局声明，来请确保他们可以在整个文档中都可以进行使用。（:root选择器匹配文档树的根元素，在HTML中通常是元素）

:root{
--main-color:red;/*--main-color、--border-color就是自定义属性*/
--border-color:blue;
}

3.使用

一旦自定义属性被声明以后我们就可以使用var（）函数中引用他们的值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		:root{
			--main-color:red;
			--border-color:blue;
		}
		.box{
			width: 100px;
			height: 100px;
			background: var(--main-color);
			border: 5px solid var(--border-color);
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

在这里插入图片描述
运行结果如下：

4.回退值

在上面我们刚刚有说过，var函数中有两个参数，一个就是我们的自定义属性，另外一个是我们的回退值，当我们的自定义属性没有被声明时，我们就会启用备用的回退值，那么我们来看下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		:root{
			--main-color:red;
			--border-color:blue;
		}
		.box{
			width: 100px;
			height: 100px;
			background: var(--second-color,yellow);
			border: 5px solid var(--border-color);
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

在这里插入图片描述
运行结果：

大家可以这样理解，我们的var函数和自定义属性谈恋爱了，但是自定义属性并不想公布他们之间的关系，所以大家都不知道，var函数知道了以后，很不开心，就和回退值在一起了，回退值一直是var函数的一个备胎，有需要的时候就在，不需要的时候就等有需要的时候。

5.作用域

自定义属性的作用域是它们被定义的选择器及其后代选择器。如果需要在整个文档中使用某个变量，应将其定义在:root选择器中。

1）全局

在这里插入图片描述

两个style依旧生效

跨style文件会生效

2）局部

后代可以使用祖先的自定义属性但是祖先不能使用后代的自定义属性，如下代码所示：后代可以使用box盒子的自定义属性但是box盒子无法使用box2的自定义属性。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box{
			--main-color:red;
			width: 200px;
			height: 200px;
			border:1px solid var(--main-color);
			background: var(--box2-color);
			
		}
		.box2{
			--box2-color:green;
			width: 100px;
			height: 100px;
			background: var(--box2-color);
			border: 1px solid var(--main-color);
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="box2"></div>
	</div>
</body>
</html>

运行结果
在这里插入图片描述

6.优先级

如果同一个自定义变量在多个地方被定义时，优先级高的会生效，此优先级遵循css优先级（行内 > id > class > 标签 > 通配符）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		:root{
			--main-color:red;
		}
		.box{
			--main-color:blue;
			width:100px ;
			height: 100px;
			background: var(--main-color);
		}
		#box1{
			--main-color:green;
		}
	</style>
</head>
<body>
	<div class="box" id="box1">
		
	</div>
</body>
</html>

运行结果展示：
在这里插入图片描述

7.var函数配合calc()使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		:root{
			--main-width:200px;
		}
		.box{
			
			width:calc(var(--main-width)*1.5) ;
			height: 100px;
			background: red;
		}
	</style>
</head>
<body>
	<div class="box">
		
	</div>
</body>
</html>

运行结果：
在这里插入图片描述
我们打开调试窗口来看一下：
我们的自定义属性为200px,使用calc函数乘以1.5那么就是300px,那么calc()函数具体怎么用呢？我们继续往下看。

三、calc()函数

calc()函数允许在声明 CSS 属性值时用来动态地计算 CSS 属性值。它允许我们在指定 CSS 属性值时使用加法、减法、乘法、除法等基本运算，从而实现更灵活的布局和样式设计。

1.作为属性值使用：

.el{
font-size:calc(3vw + 2px);
width:calc(100% - 20px);
height:calc(100vh - 20px);
padding:calc(1vw + 20px);
......
}

2.calc() 常用的基本运算：

加法（+）：calc(3vw + 2px) 两个数字都需要有单位
减法（-）：calc(100% - 20px) 两个数字都需要有单位
乘法（*）：calc(50px * 2) 其中一个数字有单位即可
除法（/）：calc(50px / 2) 要求第二个数字没有单位
-取余（%）：calc(50px % 2) 要求第二个数字没有单位
括号（（））：calc((1+2) * 3)

使用标准的数学运算优先级法则，注意：calc()中的操作符前后必须保留空格，否则会导致计算失败，但是要小心calc()和左括号之间不要有空格。
calc()函数用于属性值的一部分，用于长度和其他数字，但是不能有字符串类型的值，如下图所示此种写法是错误的。
在这里插入图片描述

css当中有很多长度的单位数值等，都是可以进行混合使用的，
rem、em、px、in、mm、cm、pt、pc、ex、vh、vw、vmin、vmax…
注意：在媒体查询当中px、rem、vw都没有问题但是不可以和百分比进行混用，大家可以自行测试。

* {
  margin: 0;
}
.box {
  width: 200px;
  height: 200px;
  background: orange;
}
/* 
  max-width：最大的宽度
  500px + 1rem(16px) = 516px
  这段代码的意思就是：视口的宽度不能超过516Px，在516px范围内背景色是红色
*/
@media (max-width: calc(500px + 1rem)) {
  .box {
      background: red;
  }
}

3.calc()与自定义属性混合使用

calc()与自定义属性混合使用可以发挥出他最大的作用。

:root{
			--main-width:200px;
		}
		.box{
			
			width:calc(var(--main-width)*1.5) ;
			height: 100px;
			background: red;
		}

自定义属性还可以来自HTML,这时候就会非常的有用处，接下来我们来看下面的例子，如果要实现下面的效果你会怎么做：
在这里插入图片描述
首先我们来看不使用css函数的写法：
通过写一个动画，分别给每个盒子添加另外的类名，设置动画的延时时间最终实现这个效果，那么我们来看一下css函数是如何实现的。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box {
		    width: 100px;
		    height: 100px;
		    margin: 10px;
		    animation: play 1s  linear infinite;
		    background: orange;
		}
		.box2{
			 animation: play 1s 0.2s linear infinite;
		}
		.box3{
			 animation: play 1s 0.4s linear infinite;
		}
		@keyframes play {
		    from {
		        transform: translateX(0px);
		    }
		    to {
		        transform: translateX(300px);
		    }
		}
	</style>
</head>
<body>
	<div class="box box1"></div>
	<div class="box box2"></div>
	<div class="box box3"></div>
</body>
</html>

css函数实现：
这里我们给html标签当中添加了自定义属性，通过var（）函数与calc()函数的结合实现延时效果，使用我们的自定义属性–index乘0.2s那么每一个盒子都会延时不同的时间，减少了我们代码的体积并且维护起来也更为方便。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box {
		    width: 100px;
		    height: 100px;
		    margin: 10px;
		    animation: play 1s calc(var(--index, 1) * 0.2s) linear infinite;
		    background: orange;
		}
		@keyframes play {
		    from {
		        transform: translateX(0px);
		    }
		    to {
		        transform: translateX(300px);
		    }
		}
	</style>
</head>
<body>
	<div class="box" style="--index: 1;"></div>
	<div class="box" style="--index: 2;"></div>
	<div class="box" style="--index: 3;"></div>
</body>
</html>

4.calc（)函数与attr()函数无法混合使用

我们来看下面的例子：

.box {
  width: 100px;
  height: 100px;
  background: orange;
  color: attr(data-color);
}

<div class="box" data-color="red">1111</div>

如下图所示是不生效的：

四、attr（）函数

可以获取元素上的属性值，但是只支持伪元素上的content属性使用。

.box {
    width: 200px;
    height: 200px;
    background: orange;
    text-align: center;
    line-height: 200px;
    color: white;
}
.box::after {
    content: attr(data-content);
}

五、其他函数

1.min()函数

用来计算多个值中的最小值

.box{
width:min(300px,50%)
height:200px;
background:red;
}

2.max()函数

用来计算多个值中的最大值

.box{
width:max(300px,50%)
height:200px;
background:red;
}

六、结束语

看到这里希望大家都有所收获，本节css函数就到此结束了，欢迎大家留言评论，如果你也想继续学习前端知识的话，欢迎你加入我的社区（戳我进社区），社区会不定时更新有关前端的基础知识，期待你的加入，我们下一节内容再见~