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個單位
}

SCSS map 與 each 迴圈

我們都非常喜歡物件，因為相關的東西可以放在一起，相當容易理解。

SCSS 也加入了這種方便的特性，但在 SCSS 的世界裡他不叫物件，而是叫 map，讓我們來看看 map 長什麼樣子吧！

SCSS list 與 for 迴圈

SCSS list 有點類似於一般語言的陣列。
陣列有點像是櫃子，我們把東西一個一個存進去。例如：

$list: 12px, 14px, 16px, 18px;

實作上陣列常會搭配迴圈，在 SCSS 中也提供了我們這項功能。

SCSS 運算

SCSS 讓我們在撰寫 CSS 的時候，可以運用基本的運算。
其中我們多少會碰到一些單位、轉換的問題，以下帶大家了解它背後運算的邏輯。

SCSS 變數

像 SCSS、LESS 這種 CSS 預處理器，都具備變數這個特點。
變數存取一些有意義的數值，幫助我們更方便的建構或維護代碼。

掛蚊帳的回憶

這幾天跟一個以前很喜歡的女生聊了一下 Line，突然想起當兵的時候，如果要打電話，必須要等寢室裡所有的蚊帳掛好之後才行。

所以為了睡前可以打 3 分鐘的電話給她，我每天一洗完澡，就急急忙忙的把所有弟兄的蚊帳通通掛好，然後興匆匆的趕緊打電話給她。

現在想想雖然很辛苦，但也許是這樣，所以這份回憶才顯得特別吧！

SCSS 巢狀選擇器

SCSS 的巢狀標籤，能幫助我們建構出更簡潔、直觀的代碼，讓我們看一些相關的範例：

HTML常用標籤（二）

提到HTML，其中最讓人熟悉的應該是它的表格(table)吧。

表格的概念其實相當簡單 - 其實跟word中的表格完全一樣。在CSS尚未完善之前，不少的網頁排版其實是依靠表格完成。

HTML常用標籤（一）

既然我們一腳踏入了HTML的世界，那麼首先我們先來熟悉幾個常用的標籤吧！請看下面的範例：

HTML文件編輯的第一步

俗話說經驗就是最好的老師，要學會如何編輯HTML，最好的方法就是打開你的編輯器(你可以使用Windwos的記事本)，跟我一起編輯HTML吧！

HTML的基本 - 標籤

HTML文件，是由許許多多的標籤組合而成，標籤又分成兩種：成對標籤與不成對(單獨)標籤。理解這些小玩意是你成功破解外星語言般的HTML的第一步。