admin管理员组

文章数量:1794759

【CSS基础】calc() 函数

【CSS基础】calc() 函数

CSS calc() 函数 实例

使用 calc() 函数计算<div>元素的宽度:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob)</title> <style> #div1 { position: absolute; width: calc(100% - 100px); border: 1px solid black; background-color: yellow; text-align: center; } </style> </head> <body> <p>创建一个横跨屏幕的div</p> <div id="div1">一些文本...</div> </body> </html> 代码效果

定义与用法

calc() 函数用于动态计算长度值

  • 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)
  • 任何长度值都可以使用calc()函数进行计算
  • calc()函数支持 “+”, “-”, “*”, “/” 运算
  • calc()函数使用标准的数学运算优先级规则
语法（参数）

calc(expression)

本文标签： 函数基础csscalc

版权声明：本文标题：【CSS基础】calc() 函数 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686973634a124209.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。