css calc函数

作者：冷月魄发布日期:2025-11-30 浏览:55

/* 使用 calc 函数动态计算宽度 */
.container {
  width: calc(100% - 20px); /* 宽度为父元素的 100% 减去 20px */
}

/* 使用 calc 函数结合其他单位 */
.item {
  margin-left: calc(2rem + 10px); /* 左边距为 2rem 加上 10px */
}

/* 使用 calc 函数进行多属性计算 */
.box {
  padding: calc(5% + 10px); /* 内边距为父元素宽度的 5% 加上 10px */
}

/* 使用 calc 函数在媒体查询中 */
@media (max-width: 768px) {
  .element {
    font-size: calc(14px + 2vw); /* 字体大小为 14px 加上视窗宽度的 2% */
  }
}

解释说明：

calc() 函数允许你在 CSS 中进行数学运算，支持加法 (+)、减法 (-)、乘法 (*) 和除法 (/)。
calc() 可以混合使用不同的单位（如像素 px、百分比 %、视窗单位 vw 等），并在计算后返回一个最终值。
calc() 常用于动态调整元素的尺寸、位置或样式，使其更具灵活性和响应性。

上一篇：css动画库

下一篇：css居中对齐