css计算

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

/* 基本的calc()函数示例 */
.container {
  width: calc(100% - 20px); /* 容器宽度为父元素的100%减去20px */
}

/* 使用calc()进行复杂的计算 */
.item {
  margin: calc(100% / 12); /* 外边距为父元素宽度的1/12 */
  padding: calc(5% + 10px); /* 内边距为父元素高度的5%加上10px */
}

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

解释说明：

• calc() 函数：用于在CSS中执行简单的数学运算，支持加法（+）、减法（-）、乘法（*）和除法（/）。它可以帮助你动态地计算尺寸、位置等属性。

• width: calc(100% - 20px)：设置容器的宽度为父元素的100%减去20px，确保容器不会超出父元素的边界，同时留出20px的空白。

• margin: calc(100% / 12)：将外边距设置为父元素宽度的1/12，适用于需要根据父元素宽度自适应的情况。

• padding: calc(5% + 10px)：内边距为父元素高度的5%加上10px，确保即使父元素高度变化，内边距也能保持一定的最小值。

• 媒体查询中的 calc()：可以在媒体查询条件中使用 calc() 来创建更灵活的响应式设计。例如，@media (max-width: calc(768px - 40px)) 表示当屏幕宽度小于等于728px时应用特定样式。