CSS 的 calc

繼上次分享 HTML 元素並排 後，我們來思考個簡單延伸題！

如果說有個版要切分成兩個區塊，分別是各佔一半的面積，你會怎麼寫？

以這段程式碼為例子：

<div class='box'>
  <div class='a'>This is A</div>
  <div class='b'>This is B</div>
</div>

.box {
  border: 1px solid red;
  width: 300px;
}
.a, .b {
  display: inline-block;
  width: 100px;
  height: 50px;
  border: 1px solid red;
}

這是正常的結果～

然後藉由上一篇所介紹的方式使用 .clearfix 以及 float: left 來處理

<div class='box clearfix'>
  <div class='a'>This is A</div>
  <div class='b'>This is B</div>
</div>

.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: 100px;
  height: 50px;
  border: 1px solid red;
  float: left;}

嗯，立馬就達到我們想要的成果囉！

那接著進入今天主題，我若是想切各半？ 怎麼辦？

聰明的你一定想到辦法囉，那就是使用 50%！

也就是說在 a、b 的 width 改寫成 50%

.a, .b {
  display: inline-block;
  width: 50%;  height: 50px;
  border: 1px solid red;
  float: left;
}

疑！！？ 怎麼了！！？ 為什麼變成換行了！？

其實你若是將網頁放大看 細細的數一數.. 你會發現.. a、b 的寬是 152px..

照理說 box 的寬是 300px，那 a、b 的寬應該各是 150px 才對呀！！

為何啊！！！

使用瀏覽器 console 檢視一下元素你會發現...

其實前端網頁元素的寬、高，是指不包含 padding、border-width 的數值

那麼 a、b 因為 border-width 是 1px，所以左右加起來就是 2px，所以整體就會是 152px

那兩塊元素都是 152px，那加起來不就 304px..

最好 box 可以擠得下去！！

故！ 就必須要改一下 code 囉！

那需要改多少？ 50% - 2px ?

沒錯！ 我們就是要讓 a、b 的寬都是 50% 完之後，再減去 2px

可是那要怎麼寫呢！？

這就要進入今天的重點 calc 不過要注意，他可能有瀏覽器版本限制喔！

不過應該都差不多有支援了啦ＸＤ

簡單說，就是寫 calc(50% - 2px) 即可啦！！！

.a, .b {
  display: inline-block;
  width: calc(50% - 2px);  height: 50px;
  border: 1px solid red;
  float: left;
}

如此一來 就成功的將兩個元素並排、填滿囉！

延伸題 2，如果我想要固定一邊 a 的寬 50px，而 b 我想要讓它填滿 box 呢？！

那一樣的活用我們的 calc

.a, .b {
  display: inline-block;
  height: 50px;
  border: 1px solid red;
  float: left;
}
.a {
  width: calc(50px - 2px); // 減 2px 是因為 border-width}
.b {
  width: calc(100% - 50px - 2px);}

是不是簡單靈巧呢！？ ^ ^

延伸題 3，那麼不就可以進階運用做出 RWD 的元素！？

沒錯！！ 如果你將 box 的寬設成 100%，如此一來 box 寬就會滿版

這樣裡面的元素又會填滿 box，這就是一個簡單的 RWD 的元素

.box {
  border: 1px solid red;
  width: 100%;
}

拉動一下你的視窗寬，或者啟動瀏覽器 console 看一下

就會發現 a 的寬固定在 50px，而 b 則是順應著瀏覽器的寬變動！

以上就是簡單 RWD 以及 calc 的說明應用！