css中新增的属性calc()可以计算使用
2024-09-04 20:07:45
什么是calc:
calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。
calc()可以解决问题:
元素宽度为100%时,若再设置margin、padding、border,元素将会撑破父元素,溢出。虽然CSS3属性中的box-sizing在一定程度上可以解决这样的问题,但是calc()函数功能实现该效果更简单。
calc()能让元素做计算,你可以给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度,比如说“width:calc(50% + 2em)”,这样一来你就不用考虑元素DIV的宽度值到底是多少,而把这个计算的任务交由浏览器去计算。
calc()语法:
calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:
.elm {
width: calc(expression);
}
其中"expression"是一个表达式,用来计算长度的表达式。
calc()的运算规则:
calc()使用通用的数学运算规则,但是也提供更智能的功能:
- 使用“+”、“-”、“*” 和 “/”四则运算;
- 可以使用百分比、px、em、rem等单位;
- 可以混合使用各种单位进行计算;
- 表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;
- 表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。
浏览器的兼容性:
浏览器对calc()的兼容性还算不错,在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持,同样需要在其前面加上各浏览器厂商的识别符,不过可惜的是,移动端的浏览器还没仅有“firefox for android 14.0”支持,其他的全军覆没。
最新文章
- hibernate关联映射
- Data组件的JSON数据格式
- asp.net大文件上传与上传文件进度条问题
- 第一次使用Git心得体会
- 【POJ】【2601】Simple calculations
- SQL Server 阻止了对组件 'xp_cmdshell' 的 过程'sys.xp_cmdshell' 的访问
- Vis.js图表插件
- qt 操作word
- Java 处理图片 base64 编码的相互转换
- innobackupex 简单使用笔记
- Redis其他常用操作
- 04-HTML-图片标签
- Python入门-三级菜单
- 使用ssh tunnel 来做代理或跳板
- sqlmap的使用
- redis 启动
- iOS,Android,WP, .NET通用AES加密算法
- SpringBoot和SpringCloud配置
- 网络虚拟化中的 offload 技术:LSO/LRO、GSO/GRO、TSO/UFO、RSS、VXLAN
- linux文件系统命令(1)---概述
热门文章
- Java常考面试题整理(四)
- 【学习】mysql 时间戳与日期格式的相互转换
- TCP定时器 之 FIN_WAIT_2定时器
- MySQL定时任务实现方法
- Vue.js---配置开发环境
- jenkins部署java项目
- 使用Android自带的资源
- Elasticsearch 6.2.3版本 filtered 报错问题 no [query] registered for [filtered]
- Maven 安装 / 常用配置 / 阿里maven中央仓库
- 将JSON字符串反序列化为指定的.NET对象类型