使用 calc() 打造更聰明的 CSS 版面配置
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
想建立優質的 CSS 版面配置,第一步就是為網頁應用程式中的所有內容指定尺寸。其中一項眾所期盼的功能,就是能夠混用各種尺寸單位來指定尺寸。舉例來說,如果可以保留 50% 的面積和固定空間 (例如 10 像素),就適合。您可以使用 calc()
屬性立即進行這項作業。這項功能可用於任何使用長度或數字的位置,因此也可以用於定位內容,或是用於 rgb()
色彩值,因此在樣式表中有許多絕佳用途。
calc() 的用途
calc()
屬性可用於樣式表中任何 CSS 長度或數字的位置。
提供兩個讓版面配置更有彈性的主要功能:
將百分比與絕對單位混合
讓我們來看看混合百分比和絕對單位的範例。假設你想將 50% 可用區域分配給以小於固定像素量的像素,那麼我們可以按照以下方式撰寫:
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
如果背景是綠色,看起來會像這樣:
如果縮小父項大小,看起來會像這樣:
值得一提的是,我們始終知道內容的右側邊緣與所在區域的左邊緣 100 像素。以這種方式組合不同的值類型,可讓網頁應用程式處理不同尺寸裝置的版面配置,而且控制幅度比以往大。
混合單位
另一個棒的是,能夠結合單位與不同的測量結果來取得結果大小。舉例來說,您可以混用「em」和「px」單位,設定與目前字型大小相關的大小。
#bar {
height: calc(10em + 3px);
}
如需合併值的相關實用範例,請參閱這裡和這裡。
立即體驗
透過 calc()
,您可以使用 +、-、* 和 / 進行加減、乘除和除法,讓各種可能性。凡是可以使用 CSS 長度或數字的任何位置,都可以使用 calc()
。我們也正努力盡快為角度和頻率屬性新增 calc()
。Chrome 19 (開發人員版) 目前提供長度的 calc()
屬性,方法是在 Firefox 中使用 -webkit-calc
屬性,自第 8 版起 (自第 9 版起採用 -moz-calc
資源),在 Internet Explorer 中則是從第 9 版移除前置字元。請在下方留言,分享你的想法。
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2012-03-28 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2012-03-28 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2012-03-28 (世界標準時間)。"]]