200912120907CSS 屬性 display 的值 inline block inline-block none

我先列幾個網站,有興趣的人可以算算 CSS 屬性 display 的值到底有幾種︰

這麼多種也就罷了,每個瀏覽器支援的程度又不一樣 ~!@#$%^&* 。我到現在也是頭昏昏的,很多細微的差別也不是很清楚。所以我只挑我比較常用的四種出來介紹︰

  1. display : none

    把 HTML 元件的 display 設為 none 就是不顯示這個東西。 display : none 和 visibility : hidden 的差別是 display : none 這個東西就不見了,不佔空間, visibility : hidden 只是隱形看不見,還是有佔空間。

  2. display : inline

    <a> 、 <span> 、 <b> 、 <i> 、 <img><iframe> ... 這幾個 HTML 元素預設的 display 屬性是 inline ,用最簡單的講法解釋 display : inline 就是兩個 display : inline 的元素連在一起會在同一行,不會換行

    display : inline 的 HTML 元素可以有 margin-left 、 margin-right 、 padding-left 、 padding-right ,但不能有 margin-top 、 margin-bottom 、 padding-top 、 padding-bottom 、 width 、 height 、 background-image 。

    要讓 display : inline 元素水平置中的方式是在此元素的父元素加上 text-align : center 。

    當然你也可以用 CSS 把預設是 display : inline 的 HTML 元素設成 display : block

    附帶一提, display : inline 元素不該包住 display : block 元素。

  3. display : block

    <div> 、 <p> 、 <h1> 、 <h2> ... 這幾種 HTML 元素預設的 display 屬性是 block ,簡單講就是不管 display : block 元素的前面後面是什麼,碰到 display : block 元素就是會換行,而 display : block 元素的寬度預設會撐到最大。

    display : block 元素不管是 margin 、 padding 、 width 、 height 、 background-image 通通都可以。

    要將 display : block 元素水平置中,方法是在此元素加上 margin : 0 auto , 0 可以取代為任何數字。

    當然也可以用 CSS 把預設是 display : block 的 HTML 元素設成 display : inline

  4. display : inline-block

    顧名思義,就是外面是 inline ,裡面是 block 。

    所以碰到 display : inline-block 元素不會換行,但是又可以設定 padding-top 、 padding-bottom 、 width 、 height 、 background-image 。

    用 CSS 讓連結用圖片顯示就是 inline-block 常見的應用。

一切看來這麼美好!怎麼可能,你第一天寫 CSS 嗎?下面整理一些比較常遇到的 bug ︰

  1. IE6 IE7 只有預設是 display : inline 的元素才可以設定為 display : inline-block 。

    還好有 Hack 讓預設不是 display : inline 的元素在 IE6 IE7 秀成 inline-block ︰

    div {
      display : inline-block;
      *display : inline;
      *zoom : 1;
    }
    
  2. 在 IE6 display : block 搭配 float : left 或 right 會讓 margin-left 、 margin-right 變兩倍。

    解決方法, IE6 自己除以 2 XD !

    div {
      float : left;
      margin-left : 10px;
      _margin-left : 5px;
    }
    

    另一種解法就是搭配上上面的 Hack ,讓 display : block 變成 inline-block 囉 !

    div {
      float : left;
      margin-left : 10px;
      _display : inline;
      _zoom : 1;
    }
    
  3. IE 特定情況下 display : inline-block 會和 text-indent 相衝。

    詳情請看這篇

  4. Webkit 核心 Chrome 、 Safari 特定情況 display : inline-block 垂直對齊問題。

    詳情請看這篇

CSS Hack 什麼時候該用 _ ,什麼時候該用 * 請看這篇

回應
Google 站內搜尋
BloggerAds
累積 | 今日
loading......
    沒有新回應!