使用calc()的CSS操作

Question

我一直在使用calc()CSS属性,我有一个疑问:

.main {
  display: block;
  margin-left: 4rem;
  width: (100% - nav);
  background: red;
}
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 4rem;
  height: 100vh;
  background: #292929;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

就像你在代码中看到的那样我试图减去100%- WIDTH它是rem响应模式的导航,但显然它不起作用,有什么方法可以做到这一点？

Answer 1

你不能在calc()参数中使用选择器,如果你想减去已经设置的nav's width减去nav' width:

.main {
  width: calc(100% - 4rem);
  /* mores styles */
}

该calc()CSS功能可以在任何地方使用<length>,<frequency>, <angle>,<time>,<number>,或者<integer>是必需的.

.....

表达式

表达式可以是使用标准运算符优先级规则组合以下运算符的任何简单表达式:

+ 加成.

- 减法.

* 乘法.至少有一个参数必须是a <number>.

/ 师.右边必须是a <number>.

表达式中的操作数可以是任何长度的语法值.如果您愿意,可以为表达式中的每个值使用不同的单位.您还可以在需要时使用括号来建立计算顺序.