知識文章好用的 CSS box-sizing

好用的 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 的結果!

好用的 CSS box-sizing - 宙思設計 ZEUS // Design Studio

 

學前端切版,我覺得是工欲善其事先利其器

其實很多時候瀏覽器都提供了非常多的工具可以使用

像是 mobile device 的檢視、Safari 的 iPhone debug.. 等

都有很多功能可以幫助處理問題!

 

Box Model,是網頁元素架構的整體架構圖

好用的 CSS box-sizing - 宙思設計 ZEUS // Design Studio

由圖中你可以清楚看到,在瀏覽器繪畫出畫面時的元素單位數值

基本上由外向內分別就是 marginborderpaddingcontent

這四種控制寬、高的名詞,對於切版攻城獅可是非常之重要啊!!

一般來說 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

好用的 CSS box-sizing - 宙思設計 ZEUS // Design Studio

 

那是因為多了 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 了!

好用的 CSS box-sizing - 宙思設計 ZEUS // Design Studio


這項規則其實常常都會造成網頁切版時的一項小困擾

尤其是不愛數學的 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

好用的 CSS box-sizing - 宙思設計 ZEUS // Design Studio

 

由圖可以知道

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-sizing - 宙思設計 ZEUS // Design Studio

張貼者:吳政賢發佈。
瀏覽人數:103 人