css函数——calc()和attr()
2024-08-31 19:19:42
css也有函数?好吧,我孤陋寡闻了。这里记录一下学习情况。
calc()函数
定义:用于动态计算长度值
支持版本:css3
- 运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
- 任何长度值都可以使用calc()函数进行计算
- 支持"+","-","*","/"运算,使用标准的数学运算优先级规则
支持浏览器:
函数 | 谷歌 | edge | 火狐 | safari | o |
calc() |
26.0 19.0 -webkit- |
9.0 |
16.0 4.0 -moz- |
7.0 6.0 -webkit- |
15.0 |
举例代码:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}
attr()函数
定义:返回选择元素的属性值
支持版本:css2
支持浏览器:
函数 | 谷歌 | edge | 火狐 | safari | o |
attr() | 2.0 | 3.0 | 1.0 | 3.0 | 9.0 |
举例代码:
a:after {
content: "(" attr(href) ")";
}
参考教程:
最新文章
- poj 2892
- [原创]java WEB学习笔记101:Spring学习---Spring Bean配置:IOC容器中bean的声明周期,Bean 后置处理器
- 点击datagrid弹出ldhdialog,点击弹出框的按钮,关闭且刷新datagrid
- 获取root权限
- DXT纹理压缩
- 快递查询API接口(trackingmore)
- js 统计字符串中出现次数最多的字符?
- 降kipmi0的CPU
- DAG最短路算法
- Eclipse用法和技巧二十四:当git遇上eclipse
- BZOJ1668: [Usaco2006 Oct]Cow Pie Treasures 馅饼里的财富
- poj1200Crazy Search (哈希)
- Android 应用开发推荐书单
- PSU 离11.2.0.3.0 -&;gt; 11.2.0.3.11 如果解决冲突的整个
- 【 D3.js 进阶系列 — 5.0 】 直方图
- C:\Users\用户名\AppData里面的文件可以删除吗
- Executors线程池
- axios + mock.js模拟数据实现前后端分离开发的实例代码
- [C#]设计模式-简单工厂-创建型模式
- laravel 查询数据返回的结果