详解CSS 3 中的 calc() 方式

下面1段编码给大伙儿详细介绍css3中的calc()方式，实际內容以下所示：

<div style="width:100px; height:50px; background:red;">
  <div style="width:100%; height:20px; margin:5px; background:green;"></div>
</div>

[Ctrl+A 所有挑选 提醒：您可先改动一部分编码，再按运作]

如上编码，预览能够看出鲜红色框超过了，由于在规范的 CSS 中，width 是不包括 margin 的（老 IE 中 width 是包括 margin 的）。

以便做到上述实际效果，大家1般会在正中间再套1层 div（有人说，并不是把 width:100% 取了便可以了么？理智，大家是举例，具体一些状况下，不可以撤销 width:100%。）

有木有更便捷的呢？用 calc() 吧。

<div style="width:100px; height:50px; background:red;">
  <div style="width:calc(100% - 10px); height:20px; margin:5px; background:green;"></div>
</div>

 [Ctrl+A 所有挑选 提醒：您可先改动一部分编码，再按运作]

应用表明

• 适用：+、-、*、/，适用混用
• 适用：%、px、em、rem 等
• +、- 前后左右务必要有时间格，例如：calc(100%⑴0px) 是有误的，应当改成：calc(100% - 10px)
• *、/ 前后左右能够不必空格，但提议有。
   

适用性

流行的桌面上访问器都适用。听说手机上访问器基本上不适用。

总结

以上所述是网编给大伙儿详细介绍的CSS 3 中的 calc() 方式，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！