takeasy

網頁設計技巧：8個簡單和實用的CSS技巧

1. 使用line-height來達到垂直居中

line-height:24px;

當你有一個固定高度的區域，你可以通過把line-height和區域的高度設為相同的數值而達到垂直置中。 Demo
2. 使用overflow防止内容溢出

#main{ overflow:hidden; }

這個應該基本都知道了。可以在限制內容塊的寬度的前提下，隱藏那些有可能溢出的文本或圖像。雖然會導致一些內容被隱藏，但總比溢出撐開影響頁面佈局要好。
3. 強制在同一行內顯示所有內文

a{ white-space:nowrap;}

強制在同一行內顯示所有內文，直到內文結束或者< br>。
4. 始終顯示Firefox垂直捲軸

html{ overflow:-moz-scrollbars-vertical;}

Firefox默認是不顯示垂直捲軸的，而這個參數設置將能讓它始終顯示垂直捲軸。
5. 内容置中

margin:0 auto;

這個大家都應該知道了，但是這個設置並不是在所有流覽中都有效。並且，在相同的流覽器中，如果受其他影響，也很可能會失去效果。
6. 移除IE的默認捲軸

textarea{ overflow:auto;}

IE默認是顯示內文框的垂直捲軸，這個參數將移除這個捲軸，除非輸入的內容超過內文框的高度。
7. 強制列印時自動分頁

h2{ page-break-before:always;}

這個屬性參數可以「始終在物件之前插入頁分割符」，主要用於需要列印的頁面設置。
8. 移除點擊鏈結時的虛線框

a:active, a:focus{ outline:none;}

大家都知道，點擊鏈結時，通常會出現虛線框，影響美觀。這個屬性設置可以移除點擊時的虛線框。