css3 中給我們提供了一個很有意思的函數 calc(),此函數可以讓瀏覽器在解析CSS時,對元素的長度,寬度,以及其它的屬性進行加,減,乘,除的計算。它的應用不是很廣泛,但一般在自適應類型的網頁中會經常看到它的身影。

css calc() 計算函數

calc():函數用于動態計算。

語法:

calc(expression)

參數:

国产视频appexpression:為一個計算的表達式

說明:

1、任何長度值都可以使用calc()函數進行計算;

国产视频app2、calc()函數支持 "+", "-", "*", "/" 運算;

3、calc()函數使用標準的數學運算優先級規則;

4、需要注意的是,運算符前后都需要保留一個空格,例如:width: calc(100% - 10px);

css calc() 計算函數的用法

例1:利用 css 的 calc() 屬性計算元素的長和寬

国产视频apphtml+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>