Vincent.Chan‘s Blog

CSS Mini Notes

字型大小控制

• 使用 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;

posted on 2006-02-14 22:41 Vincent.Chen 阅读(236) 评论(0)  编辑  收藏 所属分类: AJAX