分享 4 个你需要了解的 CSS 函数

155dea7fdbdbee9393c1fa2982c5def6.png

英文 | https://modernweb438.medium.com/css-functions-learn-about-css-function-2022-2c00c2d270aa

CSS 函数

CSS 函数用作各种 CSS 属性的值。所以基本上我们用它来评估一些 CSS 值。让我们看看其中的一些功能。

1、attr()

此函数用于访问元素属性的值。让我们通过例子来理解它。

47b9b7498b251a09f4fee11fad45dd07.png

df3a8feb5a9f450b7247bd68f5618162.png

你可以看到我们有一个“div”和一个“data-bg”自定义属性,现在我可以使用 attr() 在 CSS 中访问它的值。所以,这就是你可以做很多有趣的事情的方式。

所以输出将是这样的。

a8ad59f61c4deecb06697e086a81b29e.png

2、calc() 

在 attr() 之后我们有 calc()。顾名思义,它有助于执行 CSS 值的计算。当我们想要进行精确计算时,这可能很有用。

5c97cc5018d6a715799dba69d306ecb0.png

在上面的代码中,我使用 calc() 来设置 div 的宽度和高度。

1e4f366d51b36eb35df2f801370fc759.png

3、max()

然后我们有 max(),它需要两个值并使用该 CSS 属性的最大值。这对于制作响应式宽度和高度很有用。

be85fa5e2dc7d163e4b678b6d1326b78.png

在这种情况下,div 将具有最大可能的宽度和高度,如果 50% 大于 500px,则其宽度将为 50%,否则为 500px,高度也是一样。

4、 min()

最后但并非最不重要的一点是,我们有 min(),它需要两个值并使用该 CSS 属性的最小值。这与 max() 正好相反。

debf95bfbf097dc5f7ee422f1c5a479c.png

所以,这个输出将与我们的 max() 完全相反。它将其宽度和高度设置为最小值。

写在最后

以上就是我今天跟你分享的内容,如果您有任何疑问,请随时在留言区给我留言,最后,感谢你的阅读,祝编程愉快!

学习更多技能

请点击下方公众号

493ba67bdd197a136362189db6bb3b67.gif

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值