详解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() 方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
calc()对大家来说，或许很陌生，不太会相信calc()是css中的部分。但它却是就是css3的一部分，下面这篇文章主要给大家介绍了关于css3中calc函数的相关资料，文中通过示例代2018-07-10
本篇文章主要介绍了巧用CSS3的calc()宽度计算做响应模式布局的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-22
这篇文章主要介绍了CSS3 calc()会计算属性详解的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-27- 这篇文章主要介绍了浅谈css3中calc在less编译时被计算的解决办法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-04
calc是css3的一个新功能，用来指定元素的长度，calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。接下来脚本之家小编给大家分享CSS3 Calc实现滚动2017-09-14- 这篇文章主要介绍了 CSS3的calc()做响应模式布局的实现方法,需要的朋友可以参考下2017-09-06
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
这篇文章主要介绍了如何使用CSS3代码更好实现js中效果，clac Counters Tooltip等功能使得代码更为简洁明了,需要的朋友可以参考下2017-08-15- 数学表达式calc()是CSS中的函数，主要用于数学运算。这篇文章给大家介绍了CSS中的数学表达式calc()的相关知识，感兴趣的朋友一起看看吧2020-01-19
最新评论