常用的Css函数

1. attr()

用来选择元素的属性值,用法:attr(html元素的属性名),正常搭配css content一起使用

复制代码
html: 

<p><a href="http://a.b.c" name="attr">十</a></p>
<p><a href="http://d.f.e" name="我是谁">九</a></p>

css:
a:after{content:'('attr(href) '/' attr(name) ')'}

结果:
十(http://a.b.c / attr)
九(http://d.f.e / 我是谁)









复制代码

 

2. calc()

用于动态计算长度值 calc(数学表达式)

复制代码
运算符前后需要有空格
不管什么长度都可以用calc计算
calc() 支持 '+','-','*','/' 等运算
calc() 使用标准的数学运算优先级规则

语法:

width: calc(70% - 60px)
height: calc(70% / 2 * 12 + 66px)

复制代码

 

posted @   银河游鱼  阅读(347)  评论(0编辑  收藏  举报
编辑推荐:
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
阅读排行:
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用
点击右上角即可分享
微信分享提示