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

參考資料

Ref. 1 Vexed's Blog- CSS 屬性 display 的值 inline block inline-block none