《CSS3教學》calc讓CSS單位也可用加、減、乘、除

梅問題-《CSS3 Calc》讓CSS單位也可用加、減、乘、除
  今天在設計網頁時,都會使用CSS來設定版型, 好處就是版面靈活好修改,同時完全不用動到HTML的網頁架構,雖然說透過CSS來設計網頁版型,相當的方便,但每當版面有多個區塊組合起來時,就得一一的計算出每個區塊大小,以及每個區塊的間距,才不會造成版型跑位的問題, 且當今天若在設計自適應的網頁時,就要算半天,但現在有個更方便的CSS3屬性可用,那就是calc透過這個屬性後,可讓CSS的單位支援加減乘除,如此一來就就不用每次算半天啦!至於怎麼用,現在就一塊來看看吧!!

CSS3-calc:
支援瀏覽器:IE10+、Firefox4+、Chrome19+、Safari6+
支援運算:+ - * /
支援單位:px、em、rem、%
計算單位: 可混用計算

以前當要把div三等分時,就會在width上輸入33.3%,但現在只要在width後方加入calc(100%/3),這時每個div區塊就會變成33.3%。
梅問題-《CSS3 Calc》讓CSS單位也可用加、減、乘、除
這時可看到每個區塊,就會變成33.3%,若要把區塊5等分時,只要將calc修改成calc(100%/5),這樣就會變成5等分了。
梅問題-《CSS3 Calc》讓CSS單位也可用加、減、乘、除
calc有趣的是,單位可混用,剛剛是透過百分比將區塊三等分,接著利用像素單位,將每個區塊扣除5px,這時它就會自動作計算,相當的方便。
梅問題-《CSS3 Calc》讓CSS單位也可用加、減、乘、除
這時區塊就會自動變成33%,再扣除5px。
梅問題-《CSS3 Calc》讓CSS單位也可用加、減、乘、除
而calc不只限用於width,只要是數值單位的都可使用,像是margin、padding都可用,因為每個區塊都縮小5px,但中間的間隔只有2個,所以這時就可以用5px乘3再除2,這樣每個間距就是7.5px,完全不用再計算機算半天了。
梅問題-《CSS3 Calc》讓CSS單位也可用加、減、乘、除
像這樣每個區塊間,就會自動的計算出每個區塊的邊界。
梅問題-《CSS3 Calc》讓CSS單位也可用加、減、乘、除
範例預覽

相關文章

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。