之前講過塊級元素使用display：block
行內元素使用display:inline
那么今天我們就來區分一下display:inline，display:inline-block和display:block的區別
首先先說一個名詞 :inline element：行內元素也叫作內聯元素，內嵌元素，直進式元素
block element：塊級元素
1.display:inline 轉化成內聯元素，不換行；
內聯元素的前面和后面都不會有換行符,你不可以給內聯元素定寬和高,也就是說你如果同時給一個元素寫
{
display:inline;
width:值;
height:值;
}
那么width和height屬性就會失效;
2.display:block轉換成塊元素，換行；
將元素轉化為塊級元素,有寬和高的屬性,元素前后都有一個換行符
3.display:inline-block內聯塊元素，既不換行又可以使用塊元素所擁有的屬性，類似於塊元素加了浮動效果，但低版本瀏覽器對這個不支持。
表示元素 對內具有塊級元素的寬和高的屬性,即你可以對它設定寬和高,對外卻具有內聯元素的無換行符特性,這個屬性IE8以上才支持,對於IE6和IE7不支持這個值,但是只要他們的元素觸發了haslayout屬性,他們的內聯元素便具有display:inline的特性了
haslayout屬性：hasLayout是IE瀏覽器專有的一個屬性，用於CSS的解析引擎。有時候在IE下一些復雜的CSS設置解析起來會出現bug，其原因可能與hasLayout沒有被自動觸發有關，我們通過一些技巧，手動觸發hasLayout屬性就可以解決Bug了。這也算是針對IE下疑難雜症的特殊偏方了，很多時候，觸發了hasLayout就可以葯到病除了。
hasLayout的觸發方法有很多種，例如設置width,height值，設置position為relative等。但如果設置了width,height,或position都會在觸發hasLayout的同時帶來一些副作用的。早期的一些工程師推薦使用“height:1%”來觸發hasLayout，那時還沒有出現IE7,而height屬性在IE6下其實是按照"min-height"來解析的，所以只要對IE6進行hack,"* html{height:1%}"就可以觸發hasLayout，同時又不帶來副作用了。后來出現的IE7仍然存在很多hasLayout的問題，但IE7已經能夠正確識別height屬性了，“height:1%”的方法已經不再適用了。
於是，一個更好的解決方法開始流行，它使用了一個生僻的CSS屬性zoom來觸發hasLayout——"zoom:1"。使用"zoom:1"可以觸發hasLayout，並且不會像height等屬性一樣引入副作用，更妙的是，我們可以不用CSS hack了。但"zoom:1"並不是一定可以觸發hasLayout的。在極少數特殊的情況下，例如非常復雜的CSS設置，特別是使用DHTML的時候，使用"zoom:1"有時候也會無效，這時，我們可能需要借助更強大的"position:relative"來幫助觸發hasLayout。總之，”zoom“是最常用，最安全，成本最少的觸發hasLayout的方式，一般情況下，使用它就完全可以觸發hasLayout了。如果遇到特殊情況，"zoom:1"無效的情況下，我們可以通過設置"position:relative"來觸發hasLayout，盡管它會帶來一點副作用
zoom是將原來的元素放大為當前你的多少倍