CSS 小技巧之四：用 label 設計勾選框

HTML 的表單資料，除了文字輸入之外，應用最廣泛的還有勾選框，HTML 如下：

<input type="checkbox"> 是否同意...

由於勾選框本身不大，因此很多開發者都期許一種更方便作法 - 當使用者點選說明文字時，同時觸發這個勾選框，因此誕生了 label 標籤：

<!-- label 標籤有一個屬性 for，需填入與之互動的 input id -->
<input id="test" type="checkbox"><label for="test">是否同意...</label>

當使用者點選了 label 標籤，相當於點選了 input，是不是很方便呢？
也因為 label 的這個特性，讓我們能使用純 html + css 來實現 ios 的開關。

CSS 小技巧之三：上下左右對齊

在現今以 display: block、inline、inline-block 為主的排版系統中，要做到上下左右對齊確實有難度，常常都必須借助 table 的排版系統，造成各種不便。

這次要介紹的方法是利用 text-align 與 verticle-align 實現，物件必須要是 inline-block 節點，範例所使用的 html 如下:

<ul>
    <li><img src="#"></li>
    <li><img src="#"></li>
    ...
</ul>

Javascript 等高響應佈局

今天要跟大家分享 “等高響應佈局” 的實作流程。
在討論之前，必須先認識等高響應佈局是種怎樣的佈局：

等高響應式局不同於瀑布流，瀑布流是指 ”內容寬度相同，高度不同且依高度排列排列下一行的項目”。

而等高響應佈局則是 ”每一行的內容同高、每一行切齊頭尾且內容與內容之間的寬度固定”，
可以參考 PEXELS 的呈現方式

CSS 小技巧之二：分散對齊

當我們使用 display: inline-block 排版的時候，我們能在父層設定 text-align 屬性對齊物件，
可以使用特殊的“分散對齊”方法 (text-align: justfy)，如下圖：

若有三個物件則會像以下呈現：

若有兩個物件則會像以下呈現：

CSS 小技巧之一：float 與 BFC，側欄固定寬度

通常在左右兩欄並排，.child1 30% ，.child2 70%。
我們會在兩個區塊下 float: left ，如下圖所示：

 .parent {

 }

 .child1 {
  float: left;
  width: 30%;
 }

 .child2 {
  float: left;
  width: 70%;
 }

JQuery 關於事件委派與 stopPropagation

寫過 javascript 的人多少都會知道冒泡的原則，例如 click li，同時也會 click 到 ul，這個事件會一直往上傳遞。
但有時候我們不想讓 li 的 click 事件上傳遞，就會使用到 stopPropagation() 方法，例如：

 $('ul').on('click', function(event){
  console.log('this is ul.');
 });

 $('li').on('click', function(event){
  event.stopPropagation();

  console.log('this is li.');
 });

此時 li 的click 事件就不會往上傳遞，但如果我們使用 on 委派事件給父元素，stopPropagation() 方法就有一些值得提醒的潛規則：

SCSS @include、@mixin 與 @content

@include 與 @extend 有點類似，但與 @extend 不同的是，@include 方法可以接受變數。
我們需要先定義 @mixin，並且在使用的時候用 @include 去呼叫，請見以下：

 @mixin border-radius($int: 4px) { //使用 @mixin 定義一個 border-radius 方法，變數預設值是 4px
  border-radius: $int;
  display: block; 
 }

 .a {
  @include border-radius(10px); //使用 @include 呼叫 border-radius 方法，變數是 10px
  display: block; 
 }

 .b {
  @include border-radius(); //個例子沒有置入變數，因此會使用預設值
  display: block; 
 }

SCSS @extend 與 %

@extend 可以讓現有的選擇器規則，套用至另一個選擇器中，例如我撰寫一個按鈕的樣式如下：

.btn {
    display: inline-block;
    padding: 6px 12px;
}

名偵探的夢

一位頗有份量的黑道大哥，請我們三五朋友吃飯，說是成功的將事業交棒給小兒子，得好好慶祝。雖然我的職業是偵探，但工作上這位大哥常給我不少線索，因此感情還算是可以。

才吃完飯，大嫂急急忙忙的打發我們回家，直到回家半路上，才突然想起手機遺忘在大哥家，幸虧走得還不遠，再回去拿就是了。

SCSS 函式與判斷

作為一種語言，SCSS 當然也有 function。
SCSS function 會處理丟進來的參數，並返回一個值。

SCSS 內建了許多關於顏色的 function，例如加深/加亮，我們可以這麼寫：

a {
    color: darken(#08c, 10); //#08c 變暗10個單位
}