標籤

4GL (1) 人才發展 (10) 人物 (3) 太陽能 (4) 心理 (3) 心靈 (10) 文學 (31) 生活常識 (14) 光學 (1) 名句 (10) 即時通訊軟體 (2) 奇狐 (2) 爬蟲 (1) 音樂 (2) 產業 (5) 郭語錄 (3) 無聊 (3) 統計 (4) 新聞 (1) 經濟學 (1) 經營管理 (42) 解析度 (1) 遊戲 (5) 電學 (1) 網管 (10) 廣告 (1) 數學 (1) 機率 (1) 雜趣 (1) 證券 (4) 證券期貨 (1) ABAP (15) AD (1) agentflow (4) AJAX (1) Android (1) AnyChart (1) Apache (14) BASIS (4) BDL (1) C# (1) Church (1) CIE (1) CO (38) Converter (1) cron (1) CSS (23) DMS (1) DVD (1) Eclipse (1) English (1) excel (5) Exchange (4) Failover (1) Fedora (1) FI (57) File Transfer (1) Firefox (3) FM (2) fourjs (1) Genero (1) gladiatus (1) google (1) Google Maps API (2) grep (1) Grub (1) HR (2) html (23) HTS (8) IE (1) IE 8 (1) IIS (1) IMAP (3) Internet Explorer (1) java (4) JavaScript (22) jQuery (6) JSON (1) K3b (1) ldd (1) LED (3) Linux (117) Linux Mint (4) Load Balance (1) Microsoft (2) MIS (2) MM (51) MSSQL (1) MySQL (27) Network (1) NFS (1) Office (1) OpenSSL (1) Oracle (126) Outlook (3) PDF (6) Perl (60) PHP (33) PL/SQL (1) PL/SQL Developer (1) PM (3) Postfix (2) postfwd (1) PostgreSQL (1) PP (50) python (5) QM (1) Red Hat (4) Reporting Service (28) ruby (11) SAP (234) scp (1) SD (16) sed (1) Selenium (3) Selenium-WebDriver (5) shell (5) SQL (4) SQL server (8) sqlplus (1) SQuirreL SQL Client (1) SSH (2) SWOT (3) Symantec (2) T-SQL (7) Tera Term (2) tip (1) tiptop (24) Tomcat (6) Trouble Shooting (1) Tuning (5) Ubuntu (37) ufw (1) utf-8 (1) VIM (11) Virtual Machine (2) VirtualBox (1) vnc (3) Web Service (2) wget (1) Windows (19) Windows (1) WM (6) Xvfb (2) youtube (1) yum (2)

2014年6月18日 星期三

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

http://blog.xuite.net/vexed/tech/29221717-CSS+%E5%B1%AC%E6%80%A7+display+%E7%9A%84%E5%80%BC+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 什麼時候該用 _ ,什麼時候該用 * 請看這篇

沒有留言:

張貼留言