详解CSS 3 中的 calc() 方式

2020-10-16 08:49 jianzhan

下面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() 方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!