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>