DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS3實例教程:探索cal()功能
CSS3實例教程:探索cal()功能
編輯:CSS進階教程     

CSS3中有很多的隱藏的模塊與功能。在這裡我們將探索cal()功能;這個功能可能會改變你以前設計布局的方式,灰常的強悍~~

CSS3的cal()功能是用來計算長度(lengths),數字(numbers),角度(angles),過渡(transition)/動畫時間(animation times)或者聲音頻率(sound frequencies)。它將允許你使用混合計算類型—在CSS3中也是一個異常強大的概念。

假設一個網站的設計要包含2個浮動的元素,你想要用一個60px的水平線將其分成2個相同寬度的元素,聽起來似乎容易?如果頁面設計的是960px,那麼很容易,每個都是450px。

但是如果改元素是一個浮動框或者動態的布局怎麼辦?如果頁面設計的是600px,那麼大部分的設計者將會將水平線設置為10%,剩下的各45%,在寬屏或者方屏的浏覽窗口中將會變形或者有邊距!

幸運的是,新功能cal()功能允許women計算寬度。在上面的例子中,我們就可以將其設置為總寬度的50%-30px,例如:

#element1, #element2 { float: left; width: calc(50% - 30px); } #element2 { margin-left: 60px; }

如果你想讓水平線的大小是相對於字體大小兒定,如4em,沒問題:

#element1, #element2 { width: calc(50% - 2em); }

或者你想要在元素周圍放一個2px的border,也沒有問題:

#element1, #element2 { width: calc(50% - 2em - 4px); border: 2px solid #000; }

筆者建議盡量是計算簡潔些,但是復雜的計算是能夠實現的,例如:

#element1, #element2 { width: calc((50% + 2em)/2 + 14px); }

該元素的浏覽器支持情況:

Cla()功能是W3C推薦的功能,所以你會猜到哪個浏覽器會一直支持? 也許你的猜測錯了。在筆者寫這篇文章的時候,只有IE9支持,Firefox也支持(需要其特有的前綴):-moz-cla()。Webkit內核的浏覽器目前還沒有支持(如Chrome和Safari)或者是Opera,改功能很有用的,相信用不了多久這些浏覽器都會支持的。 幸運的是你可以在你的樣式表(CSS )中使用增強樣式: element1, #element2 { width: 45%; /* all browsers */ width: -moz-calc(50% - 30px); /* Firefox 4+ */ width: calc(50% - 30px); /* IE9+ and future browsers */ } 請謹記你需要添加相應的調整(以面對不同的浏覽器)。 #element2 { margin-left: 10%; /* all browsers */ margin-left: -moz-calc(60px); /* Firefox 4+ */ margin-left: calc(60px); /* IE9+ and future browsers */ } CSS3 的min() 和 max() 如果你喜歡cal()元素,你可能也會細化min()和max()功能,他們可以解釋2個或2個以上用逗號隔開的元素值並且能夠返回最大值或者最小值。 #myelement { width: max(300px, 30%, 30em); font-size: min(10px, 0.6em); } 這個功能在防止font過於大或者非常小的情況下很有用,但是不幸的是目前比較現代的浏覽器都不支持min()和max()功能,我們只能默默期待浏覽器們支持吧~~

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved