css计算宽度calc

作者：碎花洋裙的优雅发布日期:2025-04-12 浏览:76

/* 使用 calc() 计算宽度的示例 */

/* 设置一个 div 的宽度为视口宽度减去 20px */
div {
  width: calc(100vw - 20px);
  /* 100vw 表示视口宽度的 100%，20px 是固定的像素值 */
}

/* 设置一个容器的宽度为父元素宽度的 50% 加上 100px */
.container {
  width: calc(50% + 100px);
  /* 50% 表示父元素宽度的一半，100px 是固定的像素值 */
}

/* 设置一个按钮的宽度为 80% 减去两个 10px 的内边距 */
button {
  width: calc(80% - 20px);
  padding: 10px;
  /* 80% 是按钮宽度的 80%，20px 是两个 10px 内边距的总和 */
}

上一篇：css transition属性

下一篇：css color