一、display

1、塊元素

獨占一行，可以設置width、height以及四個方向的margin，不設置width、height時，高度被子元素撐開，寬度為父元素寬度，內(nèi)部可容納其他塊或行內(nèi)元素。

2、行內(nèi)元素

不獨占一行，可以設置width、height以及左右方向的margin，不設置width、height時，高度寬度被子元素撐開，內(nèi)部可容納其他行內(nèi)元素。

3、行內(nèi)塊元素（img、input）

不獨占一行，可以設置width、height以及四個方向的margin。

對于塊元素，IE6/7不能識別display:inline-block，要用*display:inline-block;*zoom:1代替

間距：

間距如何產(chǎn)生的？

我們在書寫標簽的時候，為了代碼的簡潔直觀會換行，但是瀏覽器在解析的時候會把這個換行解析成一個字符，就是所謂的間距，如果我們不換行，那當然也不會有間距了。

解決方案

（1）移除標簽間的空格

（2）把span標簽的結(jié)束標簽去掉，這樣間隙就沒有了。為了兼容IE6/IE7，最后一個標簽需要閉合。（美團webapp頁面也使用了這種方法）

（3）使用margin負值

（4）在父元素上加上font-size：0???

（5）使用letter-spacing

4、none

①配合JavaScript動態(tài)隱藏元素，隱藏后不占據(jù)位置，隱藏內(nèi)容會被瀏覽器忽略

5、table-cell（不兼容IE6/7）

可以讓元素以單元格形式呈現(xiàn)

功能：

①圖片垂直居中于元素

垂直居中

②等高布局

單元格高度相等，高度由內(nèi)容撐開，且為n個元素中最高高度

③自動平均劃分寬度