10.CSS3的calc函数

CSS3calc 函数

经典真题

  • CSS 的计算属性知道吗?

CSS3 中的 calc 函数

calc 是英文单词 calculate (计算)的缩写,是 CSS3 的一个新增的功能。

MDN 的解释为可以用在任何长度、数值、时间、角度、频率等处,语法如下:

css 复制代码
/* property: calc(expression) */
width: calc(100% - 80px);

可以用常见的 + - * / 符号来进行运算,但需要注意的是 + 和 - 必须用空格隔开,原因很简单,如果 - 号和计算的数字挨在一起,则浏览器在解析时会认为这可能是一个负值。

例如:

css 复制代码
width: calc(100% -8px); /* 这样会出错,结果为0 */
css 复制代码
width: calc(100% - 8px); /* 当 + -  符号用空格隔开时,运算成功 */

接下来我们来看一下 calc 函数的具体使用示例,如下:

html 复制代码
<div class="container">
  <div class="item"></div>
</div>
css 复制代码
* {
  margin: 0;
  padding: 0;
}

.container{
  width: 500px;
  height: 250px;
  background-color: skyblue;
  margin: 10px;
  position: relative;
}
.item{
  width: 100px;
  height: 100px;
  background-color: pink;
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
}

效果:

更多关于 calc 函数信息可以参阅:https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc()

真题解答

  • CSS 的计算属性知道吗?

参考答案:

calc( ) 函数,主要用于指定元素的长度,支持所有 CSS 长度单位,运算符前后都需要保留一个空格。

比如: width: calc(100% - 50px);

-EOF-

相关推荐
火柴盒zhang几秒前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil2 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录9 分钟前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户8122199367229 分钟前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端
万少14 分钟前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者3 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile3 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639973 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊3 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge