iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 20
0

簡言

Calc 是計算機英文單字「calculator」的縮寫,這個由微軟提出的 CSS 方法,真的是網頁開發的一大福音啊!我們竟然可以在網頁中直接做計算!?這真是太猛啦,從此我們再也不用在那邊絞盡腦汁的計算數學,或是想辦法用 JavaScript 來動態計算,我們可以很輕鬆的利用 calc() 這個「計算機」方法,來將百分比即時且動態的計算出實際要的什麼高度,真可謂劃時代的一個方法啊!但這個方法需要注意的是太過大量的使用的話,網頁效能會是比較差的,所以請審慎使用喔。

原理說明

calc 計算機,是一個可以讓我們動態在網頁中動態計算數值的一種 CSS 屬性『函式』的寫法,經常會用在百分比跟像素的計算,因為百分比是一個不確定的數值,而像素卻又是一個很明確的單位,這時候的計算就導致我們很困擾了,因為我們會需要依據父層的寬度或高度來做動態的計算,在這次的例子中 Amos 就是直接取父層 100% 高,再扣掉字身高度後,將這個數值除以 2 就是我需要的上方空間啦,計算原理很簡單,但是若是沒有 calc 這個特別的『函式』來協助我們的話,我們還真的是很麻煩阿,這時候 Amos 真心覺得應該好好感謝微軟阿。

原始碼

HTML

<div class="box">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

CSS

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
}
.content{
  width: 400px;
  background: #ccc;
  position: relative;
  top:calc((100% - 70px) / 2);
  margin:auto;
  height: 70px;
}

實際示範頁面

Line搜尋「@csscoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
本文同步發表於 CSS可樂部落格
CSS coke的Youtube直播頻道
歡迎點擊右側訂閱 CSS coke直播頻道
若有任何問題歡迎留言討論喔
謝謝各位


上一篇
使用 Display: table-cell 做網頁垂直置中
下一篇
使用相對定位 Relative + translateY 來做垂直置中
系列文
連續30天的超實務網頁設計的垂直置中教學30

尚未有邦友留言

立即登入留言