第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

如風般魅影 · 更新于 2020-07-03

calc 計算屬性

calc 這個屬性可以達到什么效果呢？通過計算函數(shù)，可以在不刷新瀏覽器的情況下，實時的讓屬性值發(fā)生變化，我們一起看看 calc 的使用吧。

1. 官方定義

calc() 函數(shù)用于動態(tài)計算長度值。

2. 慕課解釋

  • calc()可以按照我們寫的公式，在瀏覽器中進行計算，使用的時候，要注意：運算符的前后都需要保留一個空格，例如：width: calc(100% - 20px)； 中，- 號前后要有一空格。
  • 它支持 “+”， “-”，“*”，“/” 運算；
  • calc() 函數(shù)使用標準的數(shù)學運算優(yōu)先級規(guī)則。

3. 語法

.demo{
    /* property: calc(expression) */
    width: calc(100% - 80px);
}

解釋：demo 的寬度 = 父元素總體寬度 - 80px 。

4. 兼容性

IE Edge Firefox Chrome Safari Opera ios android
11 12+ 16+ 19+ 6+ 15+ 6.1+ 81

5. 實例

  1. 讓 demo 的寬度比父級寬度小 200px。
.out-box{
    border:1px solid #ccc;
    width: 200px;
    height: 200px;
}
.demo{
    border:1px solid #ccc;
    height:100px;
    width: calc(100% - 20px);
}

效果圖：

圖片描述

寬度比父級寬度小 200px 效果圖
實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .out-box{
            border:1px solid #ccc;
            width: 200px;
            height: 200px;
        }
       .demo{
            border:1px solid #ccc;
            height:100px;
            width: calc(100% - 20px) ;
        }
    </style>
</head>
<body>
    <div class="out-box">
        <div class="demo">
            慕課網(wǎng)：計算函數(shù)學習
        </div>
    </div>    
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果
  1. 使 demo 的寬度、高度為父元素的 1/3。
.out-box{
    border:1px solid #ccc;
    width: 200px;
    height: 200px;
}
.demo{
    border:1px solid #ccc;
    height: calc(100% /3);
    width: calc(100% /3);   
}

效果圖：
圖片描述

寬度、高度為父元素的 1/3 效果圖
實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .out-box{
            border:1px solid #ccc;
            width: 200px;
            height: 200px;
        }
        .demo{
            border:1px solid #ccc;
            height: calc(100% /3) ;
            width: calc(100% /3) ;   
        }
    </style>
</head>
<body>
    <div class="out-box">
        <div class="demo">
            慕課網(wǎng)：計算函數(shù)學習
        </div>
    </div>    
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果
  1. 使 demo 的寬度、高度為父元素的 (100% + 200px) /3。
.out-box{
    border:1px solid #ccc;
    width: 200px;
    height: 200px;
}
.demo{
    border:1px solid #ccc;
    height: calc( (100% + 200px) /3);
    width: calc( (100% + 200px) /3);   
}

效果圖：
圖片描述

寬度、高度為父元素的 1/3 效果圖
實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .out-box{
            border:1px solid #ccc;
            width: 200px;
            height: 200px;
        }
        .demo{
            border:1px solid #ccc;
            height: calc( (100% + 200px) /3) ;
            width: calc( (100% + 200px) /3) ;   
        }
    </style>
</head>
<body>
    <div class="out-box">
        <div class="demo">
            慕課網(wǎng)：計算函數(shù)學習
        </div>
    </div>    
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

6. 經(jīng)驗分享

  1. calc 的用法非常簡單，它的出現(xiàn)給我們帶來了很多方便。它多用于在父級元素大小變動時候內部子元素的大小展示，例如上面的例子。
    在使用它的時候，如果遇到復雜的運算，我們可以人為的去先處理下，來減少內部的 （ ），例如 3 中 ：
calc( (100% + 200px) /3)

我們可以寫成 ：

calc( 100%/3 + 200px/3)
  1. 要注意，calc 中的運算符的前后都需要保留一個空格，這一點千萬不要忘記得了，如果遇到問題不要慌，打代碼調試器看看問題到底出在哪里了。