calc()
是 CSS 中的一个函数,没错,css也能使用函数。其实css的上限很高,可以处理 很多逻辑,甚至有那种专门写css不写js的程序员。只是一般情况下都把逻辑写在js中
calc()
允许你在表示距离的值可计算的 CSS 值之间执行基本的数学运算。如,可以用于任何需要长度、宽度、高度 或其他尺寸的 CSS 属性值,例如 width
、height
、margin
、padding,使用方法如下:
.box{
width:100px;
}
.box .item{
width:calc(100% - 10px); //这个运算就表示宽度是父元素宽度的100%减去10像素,也就成了90像素
}
要注意的是,在使用 calc()
时需要确保数学表达式的每个部分包含在括号中,并必须用空格分隔,例如 calc(50% - 10px)
-------------------------------------------------------------------------------------
css常见的函数及作用:
函数 | 作用 |
calc() | 在长度、宽度、高度等属性值中执行基本的数学运算 |
rgb() | 使用红、绿、蓝三原色值设置颜色 |
rgba() | 使用红、绿、蓝三原色值设置颜色并添加透明度 |
hsl() | 使用色调、饱和度、亮度值设置颜色 |
hsla() | 使用色调、饱和度、亮度值设置颜色并添加透明度 |
url() | 设置背景图像或媒体资源的 URL |
var() | 设置 CSS 变量 |
translate() | 转换元素位置 |
rotate() | 转换元素旋转角度 |
scale() | 转换元素大小 |
skew() | 转换元素倾斜角度 |
cubic-bezier() | 创建控制动画速度和曲线的贝塞尔曲线 |
clamp() | 将元素样式限制为最小值、推荐值和最大值 |
min() | 选择两个值之间的较小值 |
max() | 选择两个值之间的较大值 |
attr() | 获取 HTML 元素的自定义属性值,并在 CSS 属性中使用 |
box-shadow() | 创建元素的投影效果 |
text-shadow() | 在文本中添加阴影效果 |
linear-gradient() | 创建线性渐变效果 |
radial-gradient() | 创建径向渐变效果 |
repeat() | 指定背景图像如何平铺 |
round() | 指定平铺效果的四个方向的圆角 |
space() | 指定平铺效果间隔 |
stretch() | 指定平铺效果拉伸 |
filter() | 调整图像的颜色和样式 |
transition() | 创建简单的过渡效果 |
animation() | 创建复杂的动画效果 |
这里只是简单列出并解释作用,具体用法可以自行百度或者查看官网,如果感觉以后有可能用到的话可以收藏一手,没毛病一点