CSS3 可以用 calc() 方式做數值運算

屬於前端工程師一定要會的function calc(),

calc() 是作用於屬性設定是數值的時候可以進行加減乘除的運算,

CSS3 calc function

有時使用width:100% 但因為視窗大小其實在某些計算上 有時產生1px差異,

造成版面的block 有誤差,

所以可以使用width:calc(100% – 1px),此種方式來減少誤差,

最重要的關鍵是,加減乘除符號與前後數值一定要空白,如果直接使用無空白,

寫成這樣width:calc(100%-1px),在瀏覽器上將會無效數值。

 

Reference

https://www.w3schools.com/cssref/func_calc.asp

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *