這篇文章主要為大家展示了“如何通過css3的calc()方法去動態(tài)獲取寬高值”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習一下“如何通過css3的calc()方法去動態(tài)獲取寬高值”這篇文章吧。

成都創(chuàng)新互聯(lián)服務(wù)項目包括嶗山網(wǎng)站建設(shè)、嶗山網(wǎng)站制作、嶗山網(wǎng)頁制作以及嶗山網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，嶗山網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到嶗山省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

web前端相比于程序，幾乎是沒有任何邏輯運算的，以至于我們在做前端的時候 有時候明明可以復(fù)用的東西，卻不能復(fù)用，可以運算的確要寫死。

不能復(fù)用，后來出了less 使得css可以定義變量，不能計算后來，css3提供了calc（）方法。

calc()從字面我們可以把他理解為一個函數(shù)function。其實calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。

calc()能做什么？

calc()能讓你給元素的做計算，你可以給一個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，比如說“width:calc(50% + 2em)”，這樣一來你就不用考慮元素DIV的寬度值到底是多少，而把這個煩人的任務(wù)交由瀏覽器去計算。

calc()語法

calc()語法非常簡單，就像我們小時候?qū)W加 （+）、減（-）、乘（*）、除（/）一樣，使用數(shù)學(xué)表達式來表示：

width: calc(expression);

其中”expression”是一個表達式，用來計算長度的表達式。

calc()的運算規(guī)則

calc()使用通用的數(shù)學(xué)運算規(guī)則，但是也提供更智能的功能：

1. 使用“+”、“-”、“*” 和 “/”四則運算；

2. 可以使用百分比、px、em、rem等單位；

3. 可以混合使用各種單位進行計算；

4. 表達式中有“+”和“-”時，其前后必須要有空格，如”widht: calc(12%+5em)”這種沒有空格的寫法是錯誤的；

5. 表達式中有“*”和“/”時，其前后可以沒有空格，但建議留有空格。

以上是“如何通過css3的calc()方法去動態(tài)獲取寬高值”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！