分享CSS 的屬性特色
上篇解釋了CSS的盒模型，介紹HTML元素在設計時就像一個個的盒子各自佔用了一個矩形的空間，今天就來接著介紹同樣也是針對元素空間定位的相關屬性。
浮動 float：
浮動只有分左右浮動 float:left; float:right;
元素在HTML裡會由上至下，由左至右依序的排例在一起，浮動的意思就是讓元素從原有的依序排列中浮出來，漂到母元素的左邊界或右邊界。

有點像是原本的元素都在一個圖層裡排好，被指定為浮動的元素就被拉到上面的圖層，然後往左或右排，同樣都是浮動的就會在上面的圖層裡依序排例，不過這次有方向性。這在做整個版面設計時很有用，可以讓欄位往左、右對齊。

顯示 display：
有8種不同的顯示狀態，分別是：隱藏、不顯示、塊級，行內、行內塊級、表格、項目物件、插入
display:hidden, none, block; inline; inline-block; table, list-item, run-in

hidden 隱藏就是元素雖然被載入，但是不顯示，直到樣式被更改才出現，而 none不顯示，在某些瀏覽器是會直接不載入這個元素。

塊級 block 當元素的顯示被設定為 塊級的時候，這個元素就會有固定的長寬並佔有畫面一整行的寬度，意思就是緊跟著他的下一個元素不會粘在設定的寬度後，而是會換行跑到這個元素的下面。

行內 inline 這就是和block相反的元素，當 E 被設定成 display:inline 時，元素就會保持在同一行，不會換行的一個接著一個直到碰到母元素的內邊界才會換到下一行，但要注意行內元素因為保持在行內這個特性而無法具有自己的寬度。

行內塊級 inline-block 顧名思義就是 inline元素但是可以具有塊級的寬度。

表格 table
讓元素可以像表格一樣展示

以上這幾個比較常用，run-in , list-item 比較少用到

run-in 插入：碰到和塊級元素相接時會變成排在塊級元素內的行內元素，碰到行內元素時會像塊級元素一樣呈現。
list-item 項目物件：該元素會像我們常看到的序列一樣，在前方多出項目符號。

table 表格組：其中又有分 table, table-row, table-cell
可以讓元素具有類似表格的排列方式，又不需要真的是個表格。

display屬性的瀏覽器支援度可以參考 w3c
頁面最下方有個 playground 大家可以在那裡切換各種不同的顯示法，感受一下差異
http://www.quirksmode.org/css/display.html

reset 及預設樣式：
W3C在制定共通的瀏覽器解讀方式時，針對不同的HTML元素有一些預設的樣式，一個單純的HTML檔案在完全沒有設計師指定樣式時，會呈現一種像大網模式般由上往下排例的內容，還是可以看出標題、連結、段落的差別，這就是預設樣式。

比如: <h1>預設是粗體，字級較大，<p>預設是普通粗細、14px...
因為這些元素有預設樣式，所以設計師在編寫樣式時有可能會被預設的寬高或間距影响到，例如 table 會有預設的padding 如果沒注意到就會一直無法順利把元素排版，因此多收設計師都喜歡先載入一段有人先寫好的CSS 叫reset.css，把所有預設的樣式都重置，這樣在設計時就比較不會被影响到。

不過多載入一些程式碼就多一點 loading 所以也有人認為不需要做 reset的動作，只要在需要指定時覆寫掉預設值就好，只是這樣要對HTML每一個元素的預設值都有概念，實做上恐怕是不容易，所以見仁見智，多半還是會先載入 reset把預設樣式都清掉。

reset 可以直接加在<link> 進來的.CSS 前半段或是另外存成一個 reset.css的檔案載入。

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';	content: none;}
table {	border-collapse: collapse;border-spacing: 0;}

/* =====
其實我覺得reset 放在這裡講有點太早，不過我對文章的掌握度還不夠，要天天發也真的是種挑戰啊...Orz
而且我好像太偏重在CSS的解說，HTML被我跳過，實際上我js jQ又不太熟，似乎到了鍊成的關卡了，大綱還是應該要早點擬啊...Orz
(這篇其實偷懶了的自白... 我明天會再增補...Orz)
*/