摘要：瀏覽器默認(rèn)樣式中規(guī)定了元素哪些屬于塊剩下的就是流。上圖可知，針對(duì)的標(biāo)簽，你設(shè)置寬度和高度是無(wú)效的，通過監(jiān)控可以知道，該元素實(shí)際的寬度和高度都是，并不是我們?cè)O(shè)定的值。因此，的特點(diǎn)可以總結(jié)為外部看來(lái)是流，但是自身卻是一個(gè)塊。
1.引言
html元素，除了“塊”就是“流”（即平時(shí)常說(shuō)的塊級(jí)元素和行內(nèi)元素），而且“流”都包含在“塊”中，例如body就是一個(gè)“塊”，而a就是一個(gè)“流”。瀏覽器默認(rèn)樣式中規(guī)定了html元素哪些屬于“塊”（剩下的就是“流”）。
其實(shí)，這部分知識(shí)都囊括在display這個(gè)樣式設(shè)置中。在網(wǎng)上查找出display所有的屬性，你會(huì)發(fā)現(xiàn)它有很多，但是不是每個(gè)都常用，甚至大部分你都沒有用過。這個(gè)沒關(guān)系，學(xué)以致用，用不到的就可以先不學(xué)，知道就行，什么時(shí)候用，什么時(shí)候再去詳細(xì)學(xué)——前提是你知道有這么個(gè)東西，否則無(wú)從下手。
常用的有：none、block、inline、inline-block、list-item、table、table-cell、inherit，有些已在《瀏覽器默認(rèn)樣式》中講過，簡(jiǎn)單描述如下：
list-item：用于模擬li列表樣式；
table：也是一個(gè)“塊”，但和block相比，table具有包裹性；
table-cell：用于模擬表格單元格（類似table中的
和 | ）；
inherit：從父元素繼承display屬性的值。
接下來(lái)介紹其他幾個(gè)常用的display值。
2.inline
常用的inline就是文字和圖片，其實(shí)inline真沒什么好說(shuō)的，大家可以把它想象成一個(gè)杯子里的水，它是“流”，是沒有大小和形狀的。
Hello World!
上圖可知，針對(duì)inline的標(biāo)簽，你設(shè)置寬度和高度是無(wú)效的，通過監(jiān)控可以知道，該元素實(shí)際的寬度和高度都是auto，并不是我們?cè)O(shè)定的值。
那么，如何把inline元素轉(zhuǎn)換成“塊”元素呢？
最簡(jiǎn)單的是設(shè)置display:block;或display:table;
還有兩種方式應(yīng)該了解：
第一，對(duì)inline元素設(shè)置float
還是剛才那個(gè)例子，我們對(duì)span元素添加一個(gè)float:left，運(yùn)行看看效果：
Hello World!
從顯示的效果和監(jiān)控的結(jié)果上看來(lái)，span元素已經(jīng)“塊”化。注意，上一節(jié)剛剛講完float，不要忘記float的“破壞性”、“包裹性”，在這里同樣適用。
第二，對(duì)inline元素設(shè)置position:absolute/fixed
還是有同一個(gè)例子做演示，這次在span元素上加上absolute/fixed，效果大家應(yīng)該能猜到，和加上float的效果相同。至于absolute/fixed有什么特性，會(huì)在下一節(jié)介紹position時(shí)提到。
Hello World!
3.block
其實(shí)對(duì)于block，我覺得就是“盒子模型”。一個(gè)元素設(shè)置了block，它就必須遵循盒子模型的規(guī)則。因此，這里也不再去詳細(xì)寫它了，大家可以去盒子模型那一節(jié)好好看看，就那么點(diǎn)內(nèi)容。
4.inline-block
瀏覽器默認(rèn)樣式中規(guī)定了幾個(gè)html元素為display:inline-block;。
首先，你應(yīng)該知道inline是什么樣子的，就是一般的文字、圖片；其次，你應(yīng)該知道block是什么樣子的，一般的div就是；最后，inline-block顧名思義，它既有inline的特性，又有block的特性，大家可以想想一般的button、input是什么樣子的。
我們?cè)陧?yè)面中輸入若干個(gè) | 