排版歷史

在 css 的戰國時代裡，大部分在網路上找到的排版方法，大多是 float 跟 inline-block 這兩種，沒聽課的話還真的不知道排版的歷史：

• table
• float
• inline-block
• flex
• grid

之後會想來玩玩看 flex 跟 grid，反正是自己的部落格，IE8 以下的用戶就不好意思了。用 table 排版已經太舊太久遠就先不管。然而現在最常用的兩種排版方法 float 跟 inline-block ，還是會有一些問題存在：

閱讀全文

Viewport Percentage Lengths

Viewport Percentage Lengths 有四個不同的單位，分別如下：

• vh (viewport height): 瀏覽器高度百分比。
• vw (viewport width): 瀏覽器寬度百分比。
• vmin (viewport minimum length): vh 與 vw 中較小的值。
• vmax (viewport maximum length): vh 與 vw 中較大的值。

如果想要讓某個元素佔滿整個瀏覽器，就只要像下面這樣寫，很簡單的：

1
2
3
4

div {
  width: 100vw;
  height: 100vh;
}

閱讀全文

文字絕對置中

範例如下，div 內部的文字置中，h1 只有將字型放大的功能。

Html

1
2
3
4
5

<div class='abs-text-center'>
  <h1>
    Hello World!
  </h1>
</div>

Scss

• 垂直置中：讓 height 跟 line-height 的高度相同。
• 水平置中：讓 text-align 為 center。

1
2
3
4
5
6
7
8

$box-height: 100px;

.abs-text-center {
  height: $box-height;
  line-height: $box-height;

  text-align: center;
}

閱讀全文

絕對置中 absolute center

顧名思義就是水平置中加上垂直置中，讓內層的 div 會在外層的 div 的正中間。

Html

1
2
3
4

<div class='outer'>
  <div class='inner'>
  </div>
</div>

Scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.outer {
  position: relative;

  .inner {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

.outer {
  width: 500px;
  height: 500px;
  background-color: rgba(0,0,0,.2);
}

.inner {
  width: 100px;
  height: 100px;
  background-color: rgba(0,0,0,.2);
}

任意註解掉 top left bottom right 的參數，可以將內層的 div 對齊在外層的九個位置上，即可解決水平置中與垂直置中的問題。

閱讀全文

Circle Gradient

Sass

參數說明：

• shift: 從中心點移動多少位置，如果是 120px 則會從上一層的 div 左上角的原點，往右邊且往下個移 120px。
• step: 多少 pixel 換另一個顏色。
• colors: 每一層的顏色，由內到外排序。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

$shift: 120px;
$step: 30px;
$colors: ( #fbffa0 #cfff76 #a2e27a #4ab9aa #2c678d #07171f );

@for $i from 0 to length($colors) {
  $color: unquote(nth($colors, $i + 1));

  .layer-#{$i} {
    position: absolute;
    background: transparent;

    border-radius: ($i + 1) * $step;
    border: $step solid $color;
    padding: 0px;

    top: $shift - ($i + 1) * $step;
    left: $shift - ($i + 1) * $step;
    width: 2 * $i * $step;
    height: 2 * $i * $step;
  }
}

閱讀全文

Sass 整理

每次都要找實在是有點浪費時間，不如乾脆一次整理完。

If … Else …

1
2
3
4
5
6
7
8
9
10

$boolean: true !default;

div {
  @if( $boolean ){
    display: block;
  }
  @else {
    display: none;
  }
}

For

1
2
3
4
5

@for $i from 1 through 5 {
  .wd-#{$i} {
    width: #{$i * 20%};
  }
}

閱讀全文