CSS3 calc方法

CSS3有一个calc()方法，应该是calculate的简称，语法

calc(expression)

【国内直连ChatGPT 29元起】
国内直连ChatGPT，Plus会员每月29元起，支持最新o1模型探索更多领域，无需注册OpenAI账号。

里面是一个表达式，CSS一直不能做加减运算，这也是CSS不够灵活的地方，但在calc就可以做一些简单的运算

看看W3C对表达式的描述

Required. A mathematical expression. The result will be used as the value
The following operators can be used: + - * /

很明显，这个表达式可以用加减乘除

/*
 * Nichoals Lee www.qttc.net
 */
#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
  text-align: center;
}

表示宽度百分百再减去100像素

你也使用非像素单位，如

/*
 * 琼台博客 www.qttc.net
 */
#div1 {
  position: absolute;
  left: 50px;
  width: calc(90% + 2rem);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
  text-align: center;
}

以上例子就是宽度百分之九十加上2rem长度