calc | SDT 攻城獅區 https://sdt.hameba.tw 由Steven, Der, Ted 三位高級打字員所組成，是三位工程師(攻城獅)所維護的技術分享平台，或許偶爾會分享一些日常，有任何問題或是錯誤的部分，歡迎留言告訴我們！ Thu, 27 Feb 2020 16:33:37 +0800 zh-TW hourly 1 https://wordpress.org/?v=5.3 https://sdt.hameba.tw/wp-content/uploads/2020/02/hameba_favicon-150x150.png calc | SDT 攻城獅區 https://sdt.hameba.tw 32 32 CSS3 可以用 calc() 方式做數值運算 https://sdt.hameba.tw/487/?utm_source=rss&utm_medium=rss&utm_campaign=css3-%25e5%258f%25af%25e4%25bb%25a5%25e7%2594%25a8-calc-%25e6%2596%25b9%25e5%25bc%258f%25e5%2581%259a%25e6%2595%25b8%25e5%2580%25bc%25e9%2581%258b%25e7%25ae%2597 https://sdt.hameba.tw/487/#respond Sat, 25 Jan 2020 10:14:59 +0000 https://sdt.hameba.tw/?p=487 屬於前端工程師一定要會的function calc()， calc() 是作用於屬性設定是數值的時候可以進行加 …

閱讀全文〈CSS3 可以用 calc() 方式做數值運算〉

The post CSS3 可以用 calc() 方式做數值運算 first appeared on SDT 攻城獅區.]]> 屬於前端工程師一定要會的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

The post CSS3 可以用 calc() 方式做數值運算 first appeared on SDT 攻城獅區.]]> https://sdt.hameba.tw/487/feed/ 0