为什么我们在width属性中写calc？宽度：100％ - 80px; =宽度：计算（100％ - 80px）;

Question

为什么我们在width属性中写calc？ 宽度：100％ - 80px; = 宽度：计算（100％ - 80px）; 这里有HTML  <div>any text here</div>
和css在这里

div{
background:#f00;
width:calc(100% - 10px);
padding:30px;

}

Answer 1

您的示例代码告诉我们您的div宽度比其容器的100％低10％。你怎么会这样做？

如果你的父容器是100％宽（你不知道它实际上有多宽（在流体设计中））但是你知道你希望它比它的父容量小10px。

要回答你的问题，为什么？有许多*不同的原因，为什么每个人都会对哪些“为什么”更重要有意见。最好调查它是如何使用的，并决定何时使用它。

Answer 2

因为旧的浏览器可以将“100％ - 10px”视为“100％”或以不寻常的方式失败。使用calc（）旧浏览器将更加正确地失败并确保兼容性。这是典型的css / html ...我们总是在与过去作斗争。