Some notes from Head First HTML and web
字型大小控制
- 使用 keyword 來設定 body 的字型大小。例如
body {font-size: small;} - 其他地方全部使用 em 或是 % 來設定，例如
h1 {font-size: 1.5em;} - IE 對 px 的支援很爛，所以字型不要再用 px 了，只會自找麻煩。
- line-height 的設定用純數字指定大小，不要加單位，例如
div {line-height:1.2}，如此各個子 element 會用自己的字型大小來計算，避免奇怪的繼承問題。 - IE 處理
code , pre兩個 element 的 font-size與其他 broswer 不同，它不會繼承.... 。建議另行加上去。
layout 的控制
- 横的 layout 通常需要絕對的大小，所以使用 px 會比較好。例如
p {margin-left: 10px;} - 直的 layout，因為常受文字的影響，所以用相對的單位 em 或是 % 較適合，例如
td {height: 120% ;} - 如果上述兩者運用得當，那麼使用者自行縮放文字的大小時，也能保持 layout，而且不會有疊字的問題。
- text-align 只在 inline element 有效。若在裡面的 block element 也生效是因為該 element 繼承了 text-align。
- liquid layout :指 sidebar 固定大小，而主文區可以隨著 browser 縮放改變大小。作法是一邊設定固定的 width，然後讓它 float，而另一邊則是用 margin 在旁邊空出一塊來放那個 float，另外一般 footer 都會設 clear: left (or right)以免和 float 重疊。
- flozen layout :跟 liquid layout 很像，但body的第一層會再包一個固字width 的 div (通常是 800px)。因此兩個 column 的 width 會固定，最後產生的頁面會向左靠齊，右邊會留白。
- jello layout :jello的作法同 flozen，差別在於整個頁面會置中，左右留白。作法是替最外層的 div 加上
{margin-left: auto; margin-right: auto;}
box and border
- border 大小的 keyword 在各個 browser 上的定義不同。
thin在Firefox 裡是 1px，在 IE 裡是 2px。 - width 的設定只包括本文區，不包括 padding/border/margin。
- 除了 img 之外，inline element 的 top/down margin 無意義，而 padding top/down 則是有意義，但是畫面上看不出來 (會重疊)。
- 所有接觸的 vertical margin 都會合併。(有 border 隔開就不算接觸了)
- 圓框的 box 可以帶給人年輕，活潑生動，有親合力的感覺 (可以試想 Apple 的產品都是圓圓的沒有菱角，看起來比較年輕活潑)。方框的則給人嚴謹專業的印象。依網頁的主題選擇合適的外框來搭配。
id and class
- 當 style 只有一個 element 使用時，使用 id，這可以避免 team work 時別人去改到你的 style。
- 當 style 可讓多個 element 共用時，使用 class
- 所有 element 的 id 都可以當做 anchor 使用
- selector 優先順序的計算 (000)：一個 id +100，一個 class +10，一個 element +1。數字越大的贏。
table
- cell (
th, td)之間並沒有 margin。只能用border-spacing來控制。而這個大小只能套用在整個 table的 x 或是 y 軸。 - 要完全去除
border-spacing，要使用border-collapse: collapse，而不是border-spacing: 0px;