好用的 CSS box-sizing
每次切版都被 width、padding、border 搞的寬、高多少都不知道嗎?
這一篇要介紹的就是如何優雅的解決這問題!
延續 上次 我們遇到的 width 寬值問題來進階討論
一般來說 width 如果設定 100px 時候,那該元素寬會是 100px
.box { width: 100px; background-color: #cccbff; }
<div class='box'>Box</div>
這是使用 Google Chrome 的開發工具檢視 Box Model 的結果!
學前端切版,我覺得是工欲善其事先利其器
其實很多時候瀏覽器都提供了非常多的工具可以使用
像是 mobile device 的檢視、Safari 的 iPhone debug.. 等
都有很多功能可以幫助處理問題!
Box Model,是網頁元素架構的整體架構圖
由圖中你可以清楚看到,在瀏覽器繪畫出畫面時的元素單位數值
基本上由外向內分別就是 margin、border、padding、content
這四種控制寬、高的名詞,對於切版攻城獅可是非常之重要啊!!
一般來說 width、height 都是指 content
而整體元素寬、高是指 margin、border、padding、content 的總和
尤其是可見的寬是 border、padding、content 的總和,margin 是外擠的XD
當你設定 width: 100px; 再設定 border: 1px solid red;
.box { width: 100px; background-color: #cccbff; border: 1px solid red;}
接著檢視 Box Model,會發現整體元素的寬會是 100px + 1px + 1px
那是因為多了 border-width 的左右各 1px,所以整體元素會變成 102px
如果說同時也加入了 padding-left: 5px; 的話
.box {
width: 100px;
background-color: #cccbff;
border: 1px solid red;
padding-left: 5px;}
整體的寬則會變成 100px + 1px + 5px +1px 所以就是 107px 了!
這項規則其實常常都會造成網頁切版時的一項小困擾
尤其是不愛數學的 RD、或需要長期維護時,都會很麻煩.. QQ
所以啦,今天要推薦一項小訣竅!
box-sizing - http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
這項 CSS 語法的出現,讓攻城獅在計算寬、高上,有了很方便的結果!
其預設值是 content-box,意思就是寬、高只採計 content!
這個 CSS 語法支援度其實也已經很廣泛了,支援可以到 Can I use 查詢~
那如果一樣的例子,我們在 box 內加入 box-sizing 的語法
並且給 border-box 的值,接著再檢視 Box Model 的結構!
.box {
width: 100px;
background-color: #cccbff;
border: 1px solid red;
padding-left: 5px; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box}
這時候會發現原本設 width: 100px 的 content 變成了 93px!
由圖可以知道
content + padding-left + border-left-width + border-right-width = 93px + 5px + 1px + 1px 也就是 100px
由此可以得知
box-sizing: border-box; 其實就是令該元素的寬、高去採計 content、padding、border 的總和
結論,當你設定了 box-sizing: border-box; 的元素,那它的 width 設定了多少,元素的寬就是多少
不過當然的 margin 不採計在內喲!
如此一來,以後切版就不用再一直考慮、計算元素的寬要再減去多少 padding、border-width
是不是! 多 方 便 啊!!
那當然要進階運用一下!
通常我會在 css 一開頭就寫
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
也就是說,該頁下所有元素皆採用 box-sizing: border-box; 的方式!
這樣後面在切版就無後顧之憂啦!
接著我們回到前幾天討論的一篇文章 CSS 的 calc
文中提到要將 box 內的 a、b 填滿,因為網頁瀏覽器預設的 box-sizing 是 content-box
所以需要將 a、b 的 width 各 50% 再減去border-width 的 2px
.a, .b {
display: inline-block;
width: calc(50% - 2px); height: 50px;
border: 1px solid red;
float: left;
}
因為要解決 content-box 所造成的寬不準確的問題
因此才需要將 width 則需寫成 calc(50% - 2px);
此時,是我的話,便會覺得麻煩!
不過今天學會了 box-sizing: border-box; 後
就知道其實可以在 CSS 一開始加上 box-sizing: border-box;
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
如此一來 a、b 的寬就不用再去計算寬、高
因為你不用再考慮 border-width、padding,只要 直接設定 a、b width: 50%; 即可!
以下是程式碼:
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .clearfix { *zoom: 1; } .clearfix:after { content: ""; display: table; line-height: 0; clear: both; } .box { border: 1px solid red; width: 300px; } .a, .b { display: inline-block; width: 50%; height: 50px; border: 1px solid red; float: left; }
HTML code
<div class='box clearfix'> <div class='a'>This is A</div> <div class='b'>This is B</div> </div>
其產生的 a 寬就是 50px 啦!!
- CSS Box Modelhttp://www.w3schools.com/css/css_boxmodel.asp
- 關於 box-sizing 屬性http://zh-tw.learnlayout.com/box-sizing.html
- CSS3 box-sizing Propertyhttp://www.w3schools.com/cssref/css3_pr_box-sizing.asp
- CSS 的 calchttp://www.zeusdesign.com.tw/article/4-CSS 的 calc
- Can I usehttp://caniuse.com/#search=box-sizing