CSS3

[CSS3] CSS 中使用變數 - var

CSS3 中多了一個好用的東西，可以讓我們設定變數以供其他地方使用，應用在如 color相關的 css 設定 特別好用。

這個好用的屬性就是  var ，顧名思義就是 variable 的意思

瀏覽器的支援度可參考這篇
https://www.w3schools.com/css/css3_variables.asp

 

變數的設定，通常是寫在 root 以作為全域的預設的變數，但也可以寫在任何 tag 裡面，如以下範例：

:root {
    --main-color: #ff0;
    --secondary-color: #f00;
}

h1 {
    color: var(--main-color);
}
p {
    color: var(--secondary-color, #000);
}

上面的例子中，我們建立了兩個變數

[CSS3] css也能計算！ - calc()

為了方便排版CSS3 引進了  flexbox 的用法，但使用上還是有些限制，

例如

  1. 同一個容器底下的五個子元素中，只有兩個需 flexbox 的效果，但又不想改變html結構時
  2.  一行 (row) 有三個元素，目標是space-between的排版，而容器中共有5個元素，第二行將無法與第一行對齊

上述第 2 點就會比較適用 calc() ，尤其是 calc 可以直接在 百分比與 像素之間直接進行計算

使用方法：

.item-container{
  margin-left:-10px;
  margin-right:-10px;
}

.my-item{
  width: calc((100% - 60px)/3);
  height:30px;
  padding:5px 10px;
  float:left;
  margin:0 10px 5px;
  box-sizing:border-box;
}

 

純CSS的Div置中

利用inline-block的等高特性，搭配:before 或 :after 來取得container的高度

可適用於未知高度的內容div

HTML：

<div class="container">
  <div class="content">內容</div>
</div>

CSS：

 .container{
  width:400px;
  height:400px;
  text-align:center;
  border:1px solid  #000;
}
.container:before{
  height:100%;
  display:inline-block;
  vertical-align:middle;
  content:'';
}
.content{
  display:inline-block;
  vertical-align:middle;
  padding:10px;
  background-color:#aaa;
}