星期三, 1月 23, 2013

[CSS] Display Memo

  大家好! 太久沒上來寫東西了,大家應該都忘記這邊了吧. 沒辦法, 最近真的是太忙了, (我絕對不會承認我買了 XBOX, AppleTV等有的沒的東西就忘記這邊了).

   標題這邊是來筆記一下 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還有很多可討論的, 不過我覺得這三個屬性最重要, 若之後有研究的更清楚的話,我再把一些研究整理出來.





參考資料