html - 为什么我们在 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% 小 10px。否则你会怎么做？

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

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

Answer 2

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