標題這邊是來筆記一下 CSS的 Display 這屬性, 為何會想要筆記這屬性呢? 原因是看了 Evenwu的給網頁設計師的建議. 這篇文章, 才發現這些問題如果當下問我, 我可能也都會回答不出來, 可是包括 CSS reset, float 的 clearfix, 我其實每天都在用.
這時候我就來問我自己原因, 為什麼我每天再用的東西, 別人換個角度問就回答不出來呢? 答案很簡單, 就是我底子還不夠紮實.所以今天就從很簡單的 CSS Display自己筆記一下囉!
- display: none
- 設定元素在網頁上呈現消失掉. 我們常常會拿他和 visibility比較. visibility是不顯示, 實際上還是佔有空間.而display: none則是不占空間.
- display: inline
- 寬度高度均不可設定, 文字圖片均不換行, 內容的文字或圖片寬度即是他的寬度.
- 可以有 margin-left, margin-right, padding-left, padding-right.
- 但margin-top, margin-bottom, padding-top, padding-bottom, width, height, background 為無效.[ref. 1]
- 預設為inline的標籤有: span, a, input, img, em, i, b,iframe.
- iframe 不是block 讓我訝異了一下!
- display: block
- 可設定寬度高度, 所以就會以區塊方式呈現. 至於呈現位置則相關於position以及float的相關設定.
- 由於為區塊設定, margin, padding等範圍設定均可生效.
- 預設為block的標籤有: div, p, h1, h2...
Display還有很多可討論的, 不過我覺得這三個屬性最重要, 若之後有研究的更清楚的話,我再把一些研究整理出來.
參考資料