知識文章CSS 的 calc

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;
}

 

這是正常的結果~

HTML 元素 calc - 宙思設計 ZEUS // Design Studio

 

然後藉由上一篇所介紹的方式使用 .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;}

 

嗯,立馬就達到我們想要的成果囉!

HTML 元素 calc - 宙思設計 ZEUS // Design Studio

 

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

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

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

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

 

疑!!? 怎麼了!!? 為什麼變成換行了!?

HTML 元素 calc - 宙思設計 ZEUS // Design Studio

 

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

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

為何啊!!!

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

HTML 元素 calc - 宙思設計 ZEUS // Design Studio

 

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

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

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

最好 box 可以擠得下去!!

 

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

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

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

可是那要怎麼寫呢!?


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

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

 

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

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

 

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

HTML 元素 calc - 宙思設計 ZEUS // Design Studio

 

延伸題 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);}

 

是不是簡單靈巧呢!? ^ ^

HTML 元素 calc - 宙思設計 ZEUS // Design Studio

 

延伸題 3,那麼不就可以進階運用做出 RWD 的元素!?

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

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

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

 

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

HTML 元素 calc - 宙思設計 ZEUS // Design Studio

 

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

HTML 元素 calc - 宙思設計 ZEUS // Design Studio

 

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

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