css3中的calc()
2016-03-11 18:16
441 查看
1.什么是calc()?
calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能。用来指定元素的长度。比方说,你能够使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。
calc()最大的优点就是用在流体布局上。能够通过calc()计算得到元素的宽度。
2.calc()能做什么?
calc()能让你给元素的做计算。你能够给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度。比方说“width:calc(50% + 2em)”,这样一来你就不用考虑元素div的宽度值究竟是多少,而把这个烦人的任务交由浏览器去计算。
3.calc()语法
calc()语法很easy。就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:
4.calc()的运算规则
calc()使用通用的数学运算规则,可是也提供更智能的功能:
使用“+”、“-”、“*” 和 “/”四则运算;
能够使用百分比、px、em、rem等单位。
能够混合使用各种单位进行计算;
表达式中有“+”和“-”时。其前后必需要有空格,如"widht: calc(12%+5em)"这样的没有空格的写法是错误的。
表达式中有“*”和“/”时,其前后能够没有空格,但建议留有空格。
5.浏览器的兼容性
浏览器对calc()的兼容性还算不错,在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持,相同须要在其前面加上各浏览器厂商的识别符,只是可惜的是,移动端的浏览器还没仅有“firefox for android 14.0”支持,其它的全军覆没。
大家在实际使用时。相同须要加入浏览器的前缀
calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能。用来指定元素的长度。比方说,你能够使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。
calc()最大的优点就是用在流体布局上。能够通过calc()计算得到元素的宽度。
2.calc()能做什么?
calc()能让你给元素的做计算。你能够给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度。比方说“width:calc(50% + 2em)”,这样一来你就不用考虑元素div的宽度值究竟是多少,而把这个烦人的任务交由浏览器去计算。
3.calc()语法
calc()语法很easy。就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:
.elm { width: calc(expression); }当中"expression"是一个表达式,用来计算长度的表达式。
4.calc()的运算规则
calc()使用通用的数学运算规则,可是也提供更智能的功能:
使用“+”、“-”、“*” 和 “/”四则运算;
能够使用百分比、px、em、rem等单位。
能够混合使用各种单位进行计算;
表达式中有“+”和“-”时。其前后必需要有空格,如"widht: calc(12%+5em)"这样的没有空格的写法是错误的。
表达式中有“*”和“/”时,其前后能够没有空格,但建议留有空格。
5.浏览器的兼容性
浏览器对calc()的兼容性还算不错,在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持,相同须要在其前面加上各浏览器厂商的识别符,只是可惜的是,移动端的浏览器还没仅有“firefox for android 14.0”支持,其它的全军覆没。
大家在实际使用时。相同须要加入浏览器的前缀
.elm { /*Firefox*/ -moz-calc(expression); /*chrome safari*/ -webkit-calc(expression); /*Standard */ calc(expression); }
相关文章推荐
- 根据你的目的和意图来选择按钮样式
- [DIV/CSS] 纯CSS制作各种图形(多图预警)
- CSS控制<a>标签样式
- DIV+CSS左右两列自适应高度的方法
- 为select 设置样式
- CSS 的导入方式 (link or import ?)
- css两行文字超出显示省略号
- css3 media媒体查询器用法总结
- css中元素的水平居中
- css3缩放功能实现0.5px的边框
- CSS网页布局模型
- CI框架整合Smarty模板时包含css,js文件的解决方法
- CSS选择器优先级
- 10030---CSS圆角效果
- CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
- CSS布局中HTML标签元素分类
- css 动画 transition及animation
- CSS布局属性
- js、css、img等浏览器缓存问题的2种解决方案
- css优化篇