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-

相关推荐
LaughingZhu23 分钟前
PH热榜 | 2025-04-26
前端·数据库·人工智能·mysql·开源
萌萌哒草头将军6 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
小彭努力中7 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊8 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
LinDaiuuj8 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝8 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3118 小时前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion8 小时前
数组转树:数据结构中的经典问题
前端
呼Lu噜8 小时前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf
珠峰下的沙砾8 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css