css calc() 进行计算的方法

发布时间：2022-12-31 19:41:28 来源：互联网

.

决定转身就不要频频回头，酷的人才会被记得久一些。早安！没什么可懊恼的，能被拆散的，其实都不是属于你的，继续下一个吧。早安！

css3 中给我们提供了一个很有意思的函数 calc()，此函数可以让浏览器在解析CSS时，对元素的长度，宽度，以及其它的属性进行加，减，乘，除的计算。它的应用不是很广泛，但一般在自适应类型的网页中会经常看到它的身影。

css calc() 计算函数

calc()：函数用于动态计算。

语法：

calc(expression)

参数：

expression：为一个计算的表达式

说明：

1、任何长度值都可以使用calc()函数进行计算；

2、calc()函数支持 "+", "-", "*", "/" 运算；

3、calc()函数使用标准的数学运算优先级规则；

4、需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

css calc() 计算函数的用法

例1：利用 css 的 calc() 属性计算元素的长和宽

html+css代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      .mochu{
          width:100px;
          height: 100px;
          background-color: blue;
      }
      .mm{
          width:calc(100% / 2);
          height: calc(100% / 2);
          background-color: brown;
      }
    </style>
</head>
<body>
    <!--无论外层的DIV如何变化，里面的DIV的长和宽始终是外层的一半-->
    <div class="mochu">
        <div class="mm">
        </div>
    </div>
</body>
</html>

运行结果：

css calc() 进行计算的方法

例2：calc() 计算位移元素的定位点

css + html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      .mochu{
          width:200px;
          height: 200px;
          position: fixed;
          left: calc(50% - 200px / 2);
          top: calc(50% - 100px / 2);
          background-color: coral;
      }
    </style>
</head>
<body>
    <!---->
    <div class="mochu">
        我要位于浏览器可视区域的正中央
    </div>
</body>
</html>

本文css calc() 进行计算的方法到此结束。勇敢的面对不一定成功，但你不面对就一定不成功。小编再次感谢大家对我们的支持！

以下您可能有感兴趣的文章:

标签： CSS CSS教程