CSS3: calc计算属性
2016-04-30 11:23
615 查看
前言
正如其名,calc是css3中新增的计算属性,让很多属性增加了一个表达式的说法;标准的写法:
.class{ /* area: expression; */ width:calc(); padding:calc(); margin-top:calc(); ... }
兼容性
基本理论
calc可以做用于任何具有大小的东东,比如border、margin、pading、font-size和width等属性设置动态值支持的运算单位: rem , em , percentage , px
计算优先级别和数学一致
注意点:
calc 内部的表达式,在使用运算符号时,两遍必须加上空格(虽然乘除可以无视,但还是建议带上)!!!!!,不然会解析错误!!,看演示写法
width:calc(10 * 10px); width:calc(50% - 50px); width:calc(50% + 5em); width:calc(10% / 1rem);
小demo
仅仅作为演示,响应伸缩代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 Calc</title> <style type="text/css" media="screen"> html{ font-size:62.5%; } .wrapper{ width:100%; border:5px solid #f00; margin:10px ; box-sizing:border-box; height:200px; clear:b; } .items{ height:calc(100% - 40px); display:inline-block; border:1px solid #f70; text-align:center; } .w1 .items{ float:left; margin-top:calc( 5 * 4px ); border:3px solid #0F16C6; width:calc(100% / 3 - 6px) } .w2 .items{ float:left; margin-top:calc(200px - 20px * 9); width:calc(100% / 3 - 2px) } .w3 .items{ float:left; width:calc(100% / 3 - (3 * 6px)); margin:calc(2px * 4 ); } .w3 .items:first-child{ padding:calc(5 * 1rem - 3rem); box-sizing:border-box; } </style> </head> <body> <div class="wrapper w1"> <div class="items">margin-top:calc( 5 * 4px );</div> <div class="items">margin-top:calc( 5 * 4px );</div> <div class="items">margin-top:calc( 5 * 4px );</div> </div> <div class="wrapper w2"> <div class="items">margin-top:calc(200px - 20px * 9);</div> <div class="items">margin-top:calc(200px - 20px * 9);</div> <div class="items">margin-top:calc(200px - 20px * 9);</div> </div> <div class="wrapper w3"> <div class="items">width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 );<br>padding:calc(5 * 1rem - 3rem);</div> <div class="items";>width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</div> <div class="items";>width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</div> </div> </body> </html>
总结
calac 和flexbox搭配,用来写流式布局非常好;相关文章推荐
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- 新时代编辑神器:Atom
- 局域网与广域网接口标准
- 如何使用CSS3画出一个叮当猫
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- web标准知识——从p开始,循序渐进
- 网页打开新窗口target=_blank不符合标准
- jQuery CSS3相结合实现时钟插件
- 对C语言编程标准以及声明的基本理解
- XHTML标准的版本