css 動態計算功能


以前以為需要動態調整寬度或高度時都會需要javascript,剛好看到這個方法就記錄起來,在部分情況下就可以只用css來進行處理。

方法

calc可以用來計算距離,css中使用的單位(em,px,%等等)都能用這種方法來計算,對於確定其他物件寬高或是要預留固定空間的情況就可以不使用javascript來達到想要的效果。
記得計算符號左右必須要有空白

left: calc(50% - 100px);

參考資料

https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc

Tags : css