css cacl

作者：╭ァ你不懂的悲殇发布日期:2026-03-13 浏览:95

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

.item {
  height: calc(50vh - 20px); /* 高度为视口高度的 50% 减去 20px */
  margin: 10px;
  background-color: lightcoral;
}

解释说明：

calc() 是 CSS 中的一个函数，用于在样式规则中进行动态计算。
在上面的示例中，.container 的宽度被设置为父元素的 100% 减去 20px，这样可以确保 .container 的左右两边各留出 10px 的空间。
.item 的高度被设置为视口高度的 50% 减去 20px，确保其高度不会超出视口的一半，并且上下各留出 10px 的空间。

上一篇：css单行省略号

下一篇：css图片平铺