css 计算属性

作者：迷失未来发布日期:2025-07-02 浏览:18

/* 示例代码：使用 CSS 计算属性 */

.container {
  /* 定义一个宽度为视口宽度的 50%，减去 100px */
  width: calc(50vw - 100px);

  /* 定义一个高度为父元素高度的 80%，加上 50px */
  height: calc(80% + 50px);

  /* 定义一个边距，左边为 20px，右边为视口宽度的 10% */
  margin: 0 calc(10vw) 0 20px;
}

/* 解释说明：
- `calc()` 函数允许我们在 CSS 中进行数学计算。
- 可以在 `calc()` 中使用加法 (`+`)、减法 (`-`)、乘法 (`*`) 和除法 (`/`)。
- 单位之间可以混合使用，例如像素 (`px`) 和百分比 (`%`) 或视口单位 (`vw`、`vh`)。
- `calc()` 的表达式中必须有空格，例如 `calc(50vw - 100px)` 而不是 `calc(50vw-100px)`。 */

上一篇：css相对定位和绝对定位

下一篇：css一条线带箭头