CSS - width: calc(100% - 100px)

简介

在 Web 开发中，经常需要按照比例将元素的宽度设置为屏幕宽度减去一定的像素，这时就可以使用 calc() 函数。

calc() 函数是 CSS3 中引入的一个函数，可以用于在 CSS 属性值中进行数学计算。它支持加、减、乘、除四则运算，还可以使用百分比、 em、rem 等单位。使用 calc() 函数可以更加灵活地控制元素的大小和位置。

语法

width: calc(expression);

其中，expression 是 calc() 函数的表达式，可以包括加、减、乘、除四则运算，以及其他支持的单位。表达式中可以使用括号，以控制优先级。

示例

将一个元素的宽度设置为屏幕宽度减去 100px：

.box {
  width: calc(100% - 100px);
}

将两个元素并排摆放，并且宽度占据一半：

.col-50 {
  width: calc(50% - 10px); /* 减去两个元素之间的间距 */
  float: left;
  margin-right: 20px;
}

/* 最后一列去除右边距 */
.col-50:last-child {
  margin-right: 0;
}

注意事项

• 在 calc() 函数中使用运算符时，运算符前后必须有空格，否则会报错。
• calc() 函数中不允许使用 px 和 % 之外的单位，例如 calc(1em * 2) 是合法的，但 calc(1px * 2) 是不合法的。
• calc() 函数中不允许除数为 0，否则会导致计算错误。