详解CSS 3 中的 calc() 方法

互联网   发布时间:2018-01-12 15:03:14   作者:佚名   我要评论

这篇文章主要介绍了详解CSS 3 的 calc() 方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下

下面一段代码给大家介绍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 的)。

为了达到上述效果,我们一般会在中间再套一层 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%-10px) 是不正确的,应该改为:calc(100% - 10px)
  • *、/ 前后可以不要空格,但建议有。
     

支持性

主流的桌面浏览器都支持。据说手机浏览器几乎不支持。

总结

以上所述是小编给大家介绍的CSS 3 中的 calc() 方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • CSS3 calc()会计算属性详解

    这篇文章主要介绍了CSS3 calc()会计算属性详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-27
  • 浅谈css3中calc在less编译时被计算的解决办法

    这篇文章主要介绍了浅谈css3中calc在less编译时被计算的解决办法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-04
  • CSS3 Calc实现滚动条出现页面不跳动问题

    calc是css3的一个新功能,用来指定元素的长度,calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。接下来脚本之家小编给大家分享CSS3 Calc实现滚动
    2017-09-14
  • CSS3的calc()做响应模式布局的实现方法

    这篇文章主要介绍了 CSS3的calc()做响应模式布局的实现方法,需要的朋友可以参考下
    2017-09-06
  • 使用CSS3中的calc()属性来以算式表达尺寸数值

    calc()的用法十分巧妙,可以像我们在学校做数学应用题那样列式子来计算长度宽度等值,从而一定程度上实现自适应布局,下面我们就来介绍如何使用CSS3中的calc()属性来以算式表
    2016-06-06
  • 浅析CSS中calc()的使用

    这篇文章主要介绍了浅析CSS中calc()的使用的相关资料,需要的朋友可以参考下
    2016-05-10
  • 初探CSS3中的calc()功能

    这篇文章主要初步介绍了CSS3中的calc()功能,作者写作此文时提及了注意各浏览器的支持情况,需要的朋友可以参考下
    2015-07-14
  • 巧用CSS3的calc()宽度计算做响应模式布局的方法

    本篇文章主要介绍了巧用CSS3的calc()宽度计算做响应模式布局的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-22

最新评论