您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“如何通過css3的calc()方法去動態(tài)獲取寬高值”,內容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“如何通過css3的calc()方法去動態(tài)獲取寬高值”這篇文章吧。
web前端相比于程序,幾乎是沒有任何邏輯運算的,以至于我們在做前端的時候 有時候明明可以復用的東西,卻不能復用,可以運算的確要寫死。
不能復用,后來出了less 使得css可以定義變量,不能計算后來,css3提供了calc()方法。
calc()從字面我們可以把他理解為一個函數(shù)function。其實calc是英文單詞calculate(計算)的縮寫,是css3的一個新增的功能,用來指定元素的長度。
calc()能做什么?
calc()能讓你給元素的做計算,你可以給一個div元素,使用百分比、em、px和rem單位值計算出其寬度或者高度,比如說“width:calc(50% + 2em)”,這樣一來你就不用考慮元素DIV的寬度值到底是多少,而把這個煩人的任務交由瀏覽器去計算。
calc()語法
calc()語法非常簡單,就像我們小時候學加 (+)、減(-)、乘(*)、除(/)一樣,使用數(shù)學表達式來表示:
width: calc(expression);
其中”expression”是一個表達式,用來計算長度的表達式。
calc()的運算規(guī)則
calc()使用通用的數(shù)學運算規(guī)則,但是也提供更智能的功能:
使用“+”、“-”、“*” 和 “/”四則運算;
可以使用百分比、px、em、rem等單位;
可以混合使用各種單位進行計算;
表達式中有“+”和“-”時,其前后必須要有空格,如”widht: calc(12%+5em)”這種沒有空格的寫法是錯誤的;
表達式中有“*”和“/”時,其前后可以沒有空格,但建議留有空格。
以上是“如何通過css3的calc()方法去動態(tài)獲取寬高值”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。