css技巧-經典中的經典

2008-08-29 06:38:39  編輯來源:互聯網  简体版  手機版  評論  字體: 小|中|大

 

　　刪除鏈接上的虛線框
　　a:active, a:focus {
　　 outline:none;
　　}
　　Firefox 默認會在鏈接獲得焦點（或者點擊時）加上條虛線框，使用上面的屬性可以刪除。
　　最簡單的 CSS 重置
　　* {
　　 margin: 0; padding: 0
　　}
　　不讓鏈接折行
　　a {
　　 white-space:nowrap;
　　}
　　上面的設定就能避免鏈接折行，不過個人建議長鏈接會有相應的這行（有關換行方面的討論，參看圓心的記錄）。
　　始終讓 Firefox 顯示滾動條
　　html {
　　 overflow:-moz-scrollbars-vertical;
　　}
　　更多的 Mozilla/Firefox 私有 CSS 屬性可以參考這裏。需跨浏覽器的支持，也可以使用
　　body, html {
　　 min-height:101%;
　　}
　　使用 line-height 垂直居中
　　line-height:24px;
　　使用固定寬度的容器並且需要一行垂直居中時，使用 line-height 即可（高度與父層容器一致），更多的垂直居中總結可以看這裏。
　　清除容器浮動
　　#main {
　　 overflow:hidden;
　　}
　　使塊元素水平居中
　　margin:0 auto;
　　其實就是
　　margin-left: auto;
　　margin-right: auto;
　　這個技巧基本上所有的 CSS 教科書都會有說明，別忘記給它加上個寬度。Exploer 下也可以使用
　　body{
　　 text-align: center;
　　}
　　然後定義內層容器
　　text-align: left;
　　恢複。
　　隱藏 Exploer textarea 的滾動條
　　textarea {
　　 overflow:auto;
　　}
　　Exploer 默認情況下 textarea 會有垂直滾動條（不要問我爲什麽）。
　　設置打印分頁
　　h2 {
　　 page-break-before:always;
　　}
　　page-break-before 屬性能設置打印網頁時的分頁。

 

刪除鏈接上的虛線框 a:active, a:focus { outline:none; } Firefox 默認會在鏈接獲得焦點（或者點擊時）加上條虛線框，使用上面的屬性可以刪除。 最簡單的 CSS 重置 * { margin: 0; padding: 0 } 不讓鏈接折行 a { white-space:nowrap; } 上面的設定就能避免鏈接折行，不過個人建議長鏈接會有相應的這行（有關換行方面的討論，參看圓心的記錄）。 始終讓 Firefox 顯示滾動條 html { overflow:-moz-scrollbars-vertical; } 更多的 Mozilla/Firefox 私有 CSS 屬性可以參考這裏。需跨浏覽器的支持，也可以使用 body, html { min-height:101%; } 使用 line-height 垂直居中 line-height:24px; 使用固定寬度的容器並且需要一行垂直居中時，使用 line-height 即可（高度與父層容器一致），更多的垂直居中總結可以看這裏。 清除容器浮動 #main { overflow:hidden; } 使塊元素水平居中 margin:0 auto; 其實就是 margin-left: auto; margin-right: auto; 這個技巧基本上所有的 CSS 教科書都會有說明，別忘記給它加上個寬度。Exploer 下也可以使用 body{ text-align: center; } 然後定義內層容器 text-align: left; 恢複。 隱藏 Exploer textarea 的滾動條 textarea { overflow:auto; } Exploer 默認情況下 textarea 會有垂直滾動條（不要問我爲什麽）。 設置打印分頁 h2 { page-break-before:always; } page-break-before 屬性能設置打印網頁時的分頁。