CSS 常用的计算方法和函数

原创已于 2026-03-06 10:46:49 修改 · 466 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#css #前端

于 2025-06-27 11:28:11 首次发布

Millia‘s study 专栏收录该内容

7 篇文章

订阅专栏

在 CSS 中，计算相关的方法和函数非常丰富，可以帮助创建更加灵活和响应式的布局。

兼容性注意事项

calc()、var()：所有现代浏览器支持，IE 不支持。
min()、max()、clamp()：Chrome 79+、Firefox 75+、Safari 13.1+ 支持。
数学函数（如 sin()）：目前仅部分浏览器实验性支持。

var() 函数

作用：自定义属性（css变量）的引用

/* 定义变量（全局生效，推荐写在 :root 里） */
:root {
  --primary-color: #0088ff; /* 主题色 */
  --font-size: 16px;        /* 基础字号 */
  --title-size: calc(var(--font-size) * 2); /* 32px */
}

/* 用 var() 引用变量 */
.button {
  color: var(--primary-color); /* 取 --primary-color 的值：#0088ff */
  font-size: var(--font-size); /* 取 --font-size 的值：16px */
}


/* 假设 --text-color 这个变量没定义 */
.text {
  /* 因为 --text-color 不存在，会使用备用值 #333 */
  color: var(--text-color, #333);
}

.box {
  /* 如果 --box-width 存在，用它的值；否则用 300px */
  width: var(--box-width, 300px);
}


h1 {
  font-size: var(--title-size); /* 最终是 32px */
}


/* 自适应 */

:root {
  --container-width: 1200px;
}
/* 小屏幕下修改变量值 */
@media (max-width: 768px) {
  :root {
    --container-width: 100%;
  }
}
.container {
  width: var(--container-width); /* 大屏1200px，小屏100% */
}

calc() 函数

作用：用于执行基本的数学运算，可以在任何长度值中使用。
支持的运算：+（加法）、-（减法）、*（乘法）、/（除法）。

.element {
  width: calc(100% - 20px); /* 宽度为父元素宽度减去20px */
  margin-left: calc(50% + 10px); /* 左外边距为父元素宽度的一半加上10px */
  height:calc(100vw * 457 / 1920); /*元素高度与窗口宽度成457/1920（大约是 23.8%）的比例*/
}

/*注意：运算符两侧必须有空格（如 100% - 20px），否则会失效。*/

min() 函数

作用：从多个值中选择最小的值作为属性值。

.element {
  width: min(500px, 50%); /* 宽度取500px和父元素宽度50%中的较小值 */
}

/*常用于设置元素的最大宽度，防止其在大屏幕上过大。*/

max() 函数

作用：从多个值中选择最大的值作为属性值。

.element {
  font-size: max(16px, 2vw); /* 字体大小取16px和视口宽度2%中的较大值 */
}

/*常用于设置元素的最小尺寸，防止其在小屏幕上过小。*/

clamp() 函数

作用：将值限制在一个最小值和最大值之间（即 min ≤ value ≤ max）。
语法：clamp(最小值, 首选值, 最大值)

.element {
  font-size: clamp(1rem, 3vw, 2rem); /* 字体大小最小1rem，最大2rem，首选视口宽度的3% */
}

/*常用于响应式字体大小或元素尺寸，确保在不同屏幕尺寸下都有良好表现。*/

attr() 函数

作用：获取元素的 HTML 属性值并用于 CSS。

/* HTML: <div data-width="200">内容</div> */
div::before {
  content: attr(data-width); /* 显示为 "200" */
}

/*注意：通常用于 content 属性，也可结合变量用于其他属性。*/

CSS 变量

作用：定义可重用的值，通过 var() 引用，支持计算。

:root {
  --base-spacing: 16px;
}
.element {
  padding: calc(var(--base-spacing) * 2); /* 32px */
}

/*优势：便于统一管理和修改值，提高代码可维护性。*/

fit-content() 函数

作用：使元素的宽度适应其内容，但不超过指定的最大值。

.element {
  width: fit-content; /* 宽度等于内容宽度，但不超过父元素 */
}

/*类似值：min-content（最小内容宽度）、max-content（最大内容宽度）。*/

minmax() 函数

作用：在网格Grid或弹性Flex 布局中定义项目的最小和最大尺寸。

.grid-container {
  display: grid;
  grid-template-columns: minmax(200px, 1fr); /* 列宽最小200px，最大占满剩余空间 */
}

单位换算

相对单位：em、rem、vw、vh、% 等可用于动态计算。
示例：1rem 通常等于根元素（<html>）的字体大小。
绝对单位：px、cm、mm 等固定单位。

数学函数

部分浏览器支持：如 sin()、cos()、tan()、sqrt()、pow() 等。

.element {
  transform: rotate(calc(10deg * sin(3.14))); /* 旋转角度计算 */
}

/*部分浏览器支持：如 sin()、cos()、tan()、sqrt()、pow() 等。*/

示例综合应用

/*--gap只在container包含的内容中生效*/
.container {
  --gap: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 25%, 300px), 1fr));
  gap: var(--gap);
  padding: calc(var(--gap) * 2);
  max-width: min(1200px, 90%);
  margin: 0 auto;
}


/*
自适应列数（auto-fill）
每列宽度在 200px 到 300px 之间，且不超过父元素宽度的 25%
间距和内边距使用变量计算
容器最大宽度为 1200px 或视口宽度的 90%（取较小值）

--gap：-- 声明变量 gap变量名 16px赋值

*/


/*更多定义*/
.FullScreenSwiper{--slide-width:1200px;--slide-height:420px;height:var(--slide-height);--half-slide-width:calc(var(--slide-width) / 2);--button-offset:calc(var(--half-slide-width) + 2vw);}
.FullScreenSwiper .rightMark,.FullScreenSwiper .leftMark{width:50%;height:100%;position:absolute;top:0;background:rgba(0,113,239,0.5);z-index:1;}
.FullScreenSwiper .rightMark{right:0;margin-right:calc(-1 * var(--half-slide-width));}
.FullScreenSwiper .leftMark{left:0;margin-left:calc(-1 * var(--half-slide-width));}
.FullScreenSwiper .swiper-slide{width:var(--slide-width);height:var(--slide-height);position:relative;display:flex;justify-content:center;}
.FullScreenSwiper .swiper-slide img{width:100%;height:100%;object-fit:cover;}
.FullScreenSwiper .swiper-button-next{right:50%;margin-right:calc(-1 * var(--button-offset));}
.FullScreenSwiper .swiper-button-prev{left:50%;margin-left:calc(-1 * var(--button-offset));}

/*
定义css变量
--slide-width:1200px;
--slide-height:420px;
引用及引用计算
height:var(--slide-height);
--half-slide-width:calc(var(--slide-width) / 2);
--button-offset:calc(var(--half-slide-width) + 2vw);

取负值
margin-right:calc(-1 * var(--half-slide-width));
margin-left:calc(-1 * var(--button-offset));
*/