国产视频app在HTML頁面的DIV布局中,如果我們把DIV的寬度當做一個計算公式,讓瀏覽器去自動去計算它們的值是不是很有意思呢?那么今天就說一下,CSS中的一個關于計算的函數 calc() 

calc() 函數介紹

calc():英文單詞calculate(計算)的縮寫,是 css3 新增加的一個功能。它可以動態的設置元素樣式中border、margin、pading以及 width 等屬性的值。

calc() 函數定義

国产视频app1、calc() 函數可以計算任何長度的值

2、calc() 函數支持 "+", "-", "*", "/" 運算;

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

4、特別要注意的是,運算符前后都需要一個空格。

5、現代瀏覽器都支持 calc() 函數

calc() 函數的語法

calc(expression)

国产视频appexpression:一個數學表達式,會返回表達式所計算出的值

示例:

width: calc(100% - 10px);

calc() 函數用法示例

示例1:

<html>
<head>
    <meta charset="utf-8">
    <title>飛鳥慕魚博客</title>
    <style>
        .div{
            width: 100px;
            height: 100px;
            position: relative;
            background-color: bisque;
        }
        .div2{
            width: 20px;
            height: 20px;
            background-color: blueviolet;
            position: absolute;
            /*計算結果:60px*/
            top: calc(100% - 40px) ;
            /*計算結果:50px*/
            left: calc(100% - 50px) ;
        }
    </style>
</head>
<body>
    <!--飛鳥慕魚博客-->
    <div class="div">
        <div class="div2"></div>
    </div>
</body>
</html>

運行結果如下圖:

CSS calc() 函數的介紹與使用方法

CSS代碼解釋:

top: calc(100% - 40px) ;
left: calc(100% - 50px) ;

相當于

top: 60px; 
left: 50px;

示例2:

<html>
<head>
    <meta charset="utf-8">
    <title>飛鳥慕魚博客</title>
    <style>
        .div{
            width: 200px;
            height: 100px;
            position: relative;
            background-color: bisque;
        }
        .div2{
           width:50px;
           height: 100px;
           background-color: aqua;
           display: inline-block;
        }
        .div3{
           width: calc(100% - 60px);
           height: 100px;
           background-color: brown;
           display: inline-block;
           float: right;
        }
    </style>
</head>
<body>
    <!--飛鳥慕魚博客-->
    <div class="div">
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
</body>
</html>

運行結果如下圖:

CSS calc() 函數的介紹與使用方法

css代碼解釋:

width: calc(100% - 60px);

相當于

width: 140px;