在做任何coding前，請先想清楚所有網頁的元素、框架和配置，才不會邊做邊落東西，之後還要再重新補上或排版，導致時間重複浪費。
關於置中：
- 先設想有一個容器，容器內含有三個元素，分別是Title、Content和image。
- 這個容器使用<div class=”container”>…</div>，包含以上三個元素。
3. 設置css檔案，並使html與之連結。
一個container區塊要置中，先設”寬度“，寬度設好，留白就會出現(margin)，此時使用auto，就能讓margin左右兩邊對稱，而讓內容置中了。另外，div裡的display預設值為block，也就是會佔據一整行，所以設好寬度時，才會出現margin，讓其他元素不出現在同一行。
＊Sublime Emmet Tips:<.html>
.container + tab鍵 出現<div class=”container”></div>
p.container + tab鍵 出現<p class-"container"></p>
Lorem30 + tab鍵 出現隨意的30個字(後面數字代表字數)
img + tab鍵 出現<img src="" alt=""><.css>
tac + tab鍵 出現text-align: center;
w600 + tab鍵 出現width: 600px;
w50% + tab鍵 出現width: 50%;
fl + tab鍵 出現float: left;
mr2% + tab鍵 出現margin: 2%;
關於2/3/4 column：
- 先設置一個容器，在容器內包含2/3/4個Content。
2. 設置css檔案
Container設置一樣不變。將p代表的Content依照2個column/3/4設置width的％，如2個設50% / 3個設33% / 4個設25%(以100%下去分，除2/3/4)。
因為p的display預設值也是block，所以設置完後，很重要的事是要使用float，讓另外一個p能夠上來，產生文繞圖的狀態。(使用left，會由左往右排；使用right，則會由右往左排。要注意！)
3. 因為使用了float，所以若是container下方在出現一個新的區塊文字，會使新的區塊文字也繞上上面的container裡，這種現象稱之為float collapse(float崩壞)，如下圖左。為避免這個現象，請在html檔案上加入：
<div class=”clearfix></div>
然後再於css檔案上，加上clearfix的設定。使用both為清除left和right，也可以只清除right/left。
.clearfix {
clear: both;
}感想：
1. 終於了解使用Sublime的Emmet的方法，之前一直都是自己土法一行一行的打。知道如何使用後，發現自己對Emmet的設定還不熟悉，要想一下該如何將減字打出，需要花一點時間，但相信過段時間的練習，能更加上手，而省下更多時間。
2. 終於清楚了解為何之前要display的預設值，如果預設值是block，也就表示設定寬度後，旁邊會產生margin的留白部分，讓其他元素不能與之同行。
3. 更清楚float的使用方法，和後面要再加上clear的用法。
