Skip to main content

CSS

CSS 的 overflow 屬性

阿恆's 的頭像
Posted in

從 DOM 技術的角度看,網頁中每一件物件都是「箱」狀的,一段文字、一幅圖像、一個連結,它們的長度、闊度、位置等等都可以由 CSS 控制,若果你沒有設定箱子的大小,它會隨著內容的多寡而自行調整,確保容納並顯示所有內容,但若果箱子的大小被限制了,卻又無法容納所有內容的時候,這時便是 CSS 的 overflow 屬性發揮作用的時候。

CSS Tricks 網站上 Chris Coyier 有一篇文章介紹 CSS 的 overflow 屬性,文章說,Overflow 的值可以是:visible (預設)、hidden、scroll 及 auto,它還有兩個「姊妹」屬性 overflow-x 及 overflow-y,但不是所有瀏覽器都支援。

Visible

若果你沒有設定 overflow 的值,預設就是 visible,所以除非你要撤銷從上層物件繼承下來的值,否則並不需要做這樣的設定。

.box {overflow: visible; }

樣本輸出: ......閱讀全文 >>>

20 個帶領 CSS 成為主流技術的網站

阿恆's 的頭像
Posted in

你對那些研究 CSS 的網站印象最深刻?Tim Wright 在 SitePoint 網站列舉 20 個推動 CSS 成為主流技術的網站,Tim 把這份名單分為「明顯」和「不那麼明顯」兩部份,前者是一些大部分人馬上想到的網站,遺漏了任何一個都可能會引發一場論戰;後者則包含一些我們可能會忽略,但是對推動 CSS 有重大貢獻的網站。

開始編製這份名單的時候,Tim 認為很多人都推動過 CSS 的發展,這份名單應該不難製作,但隨著他明白他要列舉的是網站,而非背後推動的人,而研究 CSS 技術的網站多如恆河沙數,無論如何,他還是製作了一份很值得參考的 CSS 網站名單。 ......閱讀全文 >>>

為超連結加上有意義的圖示

阿恆's 的頭像
Posted in

正當你在網上愉快地瀏覽著,按了一下超連結後,瀏覽器突然跳出一個視窗,詢問你是否要儲存一個壓縮檔案,這是多麼不爽的事!若果你的訪客一早知道這個超連結會開啟一個壓縮檔案(你當然有很好的理由送出一個壓縮檔案,例如這是一個軟件包之類),他們的感受會好得多,也可以讓他們自行決定是否開啟,或者什麼時候開啟。 ......閱讀全文 >>>

CSS 技巧 ── 絕對位置、相對位置

阿恆's 的頭像
Posted in

若果你要做一個網頁,左邊是一個固定寬度的選單,右邊是一個佔用所有餘下空間的主內容,兩邊的長度都剛好是瀏覽器視窗的高度,選單和主內容都會隨著視窗的大小而自動調整大小,不用 JavaScript 的話,你會怎麼做?

本來最直接的方法是寫一段 JavaScript,每次載入頁面或者變更瀏覽器大小之後,JavaScript 會從新調整 div 的高度,可惜這樣做我們要在window.innerHeight、document.documentElement.clientHeight、和 document.body.clientHeight 之間選擇合適的函數,也要考慮不同瀏覽器中事件處置器的不同使用方法,若果有純 CSS 的解決方案,並不用頭疼這些問題了。 ......閱讀全文 >>>

有用的 CSS 提示

阿恆's 的頭像
Posted in

Jonathan Snook 根據他個人經驗和習慣,總結了一些有用的 CSS 提示,包括是否應該使用像素作為字型大小的單位、把 CSS 宣告寫成單行、適當地縮排、只需支援最新的瀏覽器等等,這些提示很大程度上是 Jonathan 的個人偏好,正如他自己說:「我希望把我在 CSS 上的工作習慣與大家分享,但我必須提醒你,這裡所說的可能很有爭議性,但不活在危機之中生命有甚麼意義呢?(對的,當 CSS 被視為「危機」的時候,我的確活得很刺激。)」

Jonathan 的提示包括: ......閱讀全文 >>>

用 PHP 控制 CSS

阿恆's 的頭像
Posted in

thecssweblog 有一篇由 Amber Rhea 寫的有關使用 PHP 來動態控制 CSS 的文章。文章引述 Patrick Fitzgerald 另一篇有關使用 PHP 來控制顏色的文章 ......閱讀全文 >>>

訂閱文章