CSS3 中的 calc 函数

  1. calc 是英文单词 calculate（计算）的缩写，是 CSS3 的一个新增的功能；

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

    /* property: calc(expression) */
width: calc(100% - 80px);

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

    width: calc(100% -8px); /* 这样会出错，结果为 0 */

width: calc(100% - 8px); /* 当 + -  符号用空格隔开时，运算成功 */

  4. 更多 calc 函数信息

案例

  1. calc 函数的具体使用示例，如下：

    html
    css
    <div class="container">
  <div class="item"></div>
</div>

    * {
  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);
}

  2. 效果：

面试题

CSS 的计算属性知道吗？

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

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

打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. CSS3 中的 calc 函数
  2. 2. 案例
  3. 3. 面试题
    1. 3.1. CSS 的计算属性知道吗？