CSS3 calc()函數使用

時間 2019-11-11

標籤 css3 css calc 函數使用欄目 CSS 简体版

原文原文鏈接

本文轉載於:猿2048網站CSS3 calc()函數使用php

一、calc是什麼？html

calc是英文單詞calculate(計算)的縮寫，用於動態計算長度值。瀏覽器

calc()函數支持 "+", "-", "*", "/" 運算；
+ 和 - 運算符的兩邊必須始終要有空白符。好比 calc(50% -8px) 會被解析成爲一個無效的表達式：一個百分比後跟一個負數長度值。而 calc(8px + -50%) 會被解析成爲一個長度後跟一個加號再跟一個負百分比。
* 和 / 運算符不須要空白符，但考慮到統一性，仍然推薦加上空白符。
能夠使用百分比、px、em、rem等單位；

二、瀏覽器兼容性函數

http://caniuse.com/#search=calc佈局

三、calc使用網站

calc()主要應用在流體佈局上，能夠經過calc()計算獲得元素的寬度。spa

calc()根據給定百分比、em、px和rem單位值計算出其寬度或者高度，好比說「width:calc(50% + 2em)」，這樣一來你就不用考慮元素DIV的寬度值究竟是多少，而把這個煩人的任務交由瀏覽器去計算。

code

四、示例代碼htm

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>CSS3 calc()函數應用</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            .test {
                width: calc(100% - 50px);
                border: 1px solid red;
            }
        </style>
    </head>

    <body>
        <div class="test">個人寬度爲100% - 50px</div>
    </body>

</html>