CSS深刻研究:display的恐怖故事解密

display做爲一個最爲恐怖的屬性，沒有之一，絕對不是欺騙3歲小孩，絕對是真實的。下面，就讓咱們看看這貨的恐怖面貌。

display 值：

none ：隱藏對象。(注意，與visibility:hidden不一樣，這貨是完全的消失，不保留物理空間。)

inline ：指定對象爲內聯元素。

block ：指定對象爲塊元素。

list-item ：指定對象爲列表元素。

inline-block ： 指定對象爲內聯塊元素。

inline-table ：制定對象爲內聯表格。

table ： 指定對象爲表格元素 等同<table>

table-caption ：指定對象爲表格標題 等同<caption>

table-cell ： 指定對象爲單元格 等同 <td>(好吧，各類等同，我這人比較懶，如下省略各類沒必要要的文字，你們按照表格對號入座就行)

table-row ：<tr>

table-row-group ：<tbody>

table-column ： <col>

table-column-group ：<colgroup>

table-header-group ： <thead>

table-footer-group ： <tfoot>

campact ：指定對象爲塊元素或基於內容之上的內聯元素。

run-in ：指定對象爲塊對象或基於內容之上的內聯對象。

ruby ：指定對象爲表格腳註組。

ruby-base ：指定對象爲表格腳註組。

ruby-text ：指定對象爲表格腳註組。

ruby-base-group ：指定對象爲表格腳註組。

ruby-text-group ：指定對象爲表格腳註組。

box(flex) ： 指定對象爲彈性盒模型。

inline-box ： 指定對象爲內聯塊級彈性盒模型。

怎麼樣，頭都暈了，有木有。這麼一堆屬性，碼這麼多字。不過別慌，下面讓我來進行大膽的預測一下，當CSS4來的時候會不會某些屬性就沒了呢，我預測表格的一些值會被咔嚓，你要是問我依據，好吧這認可我只是看他們長得難看，因此才這麼說的。而後聽說ruby相關的屬性值沒有瀏覽器能夠支持，尼瑪呀，坑爹有木有啊。既然這樣，那咱們就漸漸得看清楚display這魔鬼有很大一部分是僞裝的。通過層層的扒掉這貨的衣服，咱們漸漸的看到幾個經常使用的屬性：

none、inline、block、inline-block。爲何經常使用呢？由於這幾個傢伙的兼容性是槓槓滴呀。這個時候inline-block微微一笑。我果斷的用福爾摩斯賦予個人雙眼把這貨揪出來讓你們圍觀。

那就讓咱們來探索下inline-block之謎。

不知道何時，display：inline-block; 已經深刻web各地，[F12]揪出這貨 輕輕的打開新浪輕博客(好吧，這是一個免費的廣告)

哇，138個啊，真夠多的。既然這貨這麼拽，那咱們就來探個究竟。下面來看一段代碼

1. {display:inline-block;*display:inline;*zoom:1;} 

一段常見的代碼，這裏有幾個疑問：

1.inline-block後的元素會產生空白，這是怎麼回事？

2.IE六、7真的不支持inline-block嗎？

要回答這兩個問題，首先要弄清楚inline-block是什麼。那麼讓咱們來查查文檔。

 

Object is rendered inline,but the contents of the object are rendered as a block element.Adjacent inline elements are rendered on the same line,space permitting.

 

上段文字出自webplatform，一個年輕的權威網站。若是不夠，還有

 

This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box,and the element itself is formatted as an atomic inline-level box.

 

這段文字出自W3C。翻譯整理一下：inline-block元素把本身變成特殊的inline元素，對於相鄰的元素來講表現出inline的特色，容許空格。對於內部元素來講表現出block元素的特色，能夠設置高度和寬度。

好吧，既然對於相鄰的元素表現的是inline的特色，容許空格，那麼天然在換行的時候產生空白。因此，這是正常的，這是inline-block元素具備inline元素的固有特性，不是所謂的bug。那麼第一個問題就獲得解答了。可是，大多數時候，咱們不但願看到這空白。因而，網上流傳了不少修復的方法。簡單一點的通常是這樣：

1. {font-size:0;letter-spacing:-6px;} 

在inline-block的外層設置這樣式，來清除間隙，原理是：

1.設置換行符or製表符or空格符的字體大小爲0，從而使之失去寬度。

2.letter-spacing是一個修復IE六、7下某些元素inline-block後1px間隙的bug和不支持font-size:0;的瀏覽器而存在的。(不一樣的字體，有不一樣的寬度，查看細節，請點擊《inline-block空隙–letter-spacing與字體大小/字體關係數據表》)

讓咱們來看看這個修復怎麼樣：

從圖中咱們能夠發如今IE六、7下inline元素和inline-block元素始終有1px間隙，safari瀏覽器中元素重疊，而且全部瀏覽器的元素都沒有對齊。看來要好好的調教一下，來看看一絲大神寫的代碼吧：

1. .dib-wrap {  

2. font-size:0;/* 全部瀏覽器 */ 
3. *word-spacing:-1px;/* IE六、7 */ 
4. }  
5. .dib-wrap .dib{  
6. font-size: 12px;  
7. letter-spacing: normal;  
8. word-spacing: normal;  
9. vertical-align:top;  
10. }  
11. @media screen and (-webkit-min-device-pixel-ratio:0){  
12. /* firefox 中 letter-spacing  http://www.14458.com/會致使脫離普通流的元素水平位移 */ 
13. .dib-wrap{  
14. letter-spacing:-5px;/* Safari 等不支持字體大小爲 0 的瀏覽器, N 根據父級字體調節*/ 
15. }  
16. }  
17. .dib {  
18. display: inline-block;  
19. *display:inline;  
20. *zoom:1;  
21. } 

等，等燈，等燈^_^：

全部瀏覽器都正常啦，等等，火眼金睛的我忽然發現了一個問題：

妖孽，別覺得當心翼翼的重疊，我就看不見。之前通常都是和IE6這個魔鬼進行戰鬥，此次竟然換着妖孽了。沉思一下先：形成空白間隙的是什麼呢？

哦，是 [換行符]or[製表符]or[空格符]。我了個去呀，果斷合併html代碼成一行，調試。哇！合併後正常了。不過這確定不是童鞋們但願看到的結果，一絲大神說：一切以犧牲結構來兼容表現的行爲都是耍流氓！那怎麼辦，若是童鞋們要兼容safari，又不想根據不一樣狀況修改letter-spacing的話，耍個小流氓，shift+tab，去掉[製表符]，這樣無論letter-spacing設置多大，都是no problem的啦。也就是讓代碼變成這樣：

少了個縮進，無傷大雅，傷點小雅。

第一個問題回答得我口乾舌燥啊。接下來，讓咱們來看看第二個問題，IE六、7支持inline-block嗎？或許這個問題應該換個方式問。IE六、7支持css2.1中所說的inline-block嗎？

答案是不支持，只是表現上的相近。這是經過觸發瀏覽器的haslayout來實現的。那麼就順便提一句：dfdaf

haslayout是Windows Internet Explorer渲染引擎的一個內部組成部分。在InternetExplorer中，一個元素要麼本身對自身的內容進行計算大小和組織，要麼依賴於父元素來計算尺寸和組織內容。爲了調節這兩個不一樣的概念，渲染引擎採用了 hasLayout 的屬性，屬性值能夠爲true或false。當一個元素的 hasLayout屬性值爲true時，元素就會對自身的內容進行計算大小和組織，而不依賴於父元素。display:inline-block所觸發的hasLayout是不可逆轉的，因此當*display:inline的時候並不會使hasLayout=false。