1. inline、block和display:inline-block
- block和inline這兩個(gè)概念是簡(jiǎn)略的說(shuō)法，完整確切的說(shuō)應(yīng)該是 block-level elements (塊級(jí)元素) 和 inline elements (內(nèi)聯(lián)元素)。
- block元素通常被現(xiàn)實(shí)為獨(dú)立的一塊，會(huì)單獨(dú)換一行；
- inline元素則前后不會(huì)產(chǎn)生換行，一系列inline元素都在一行內(nèi)顯示，直到該行排滿。
大體來(lái)說(shuō)HTML元素各有其自身的布局級(jí)別（block元素還是inline元素）： - 常見(jiàn)的塊級(jí)元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
- 常見(jiàn)的內(nèi)聯(lián)元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是這個(gè)是個(gè)大概的說(shuō)法，每個(gè)特定的元素能包含的元素也是特定的，所以具體到個(gè)別元素上，這條規(guī)律是不適用的。比如 P 元素，只能包含inline元素，而不能包含block元素。
一般來(lái)說(shuō)，可以通過(guò)display:inline和display:block的設(shè)置，改變?cè)氐牟季旨?jí)別。
1.display:block：
block元素會(huì)獨(dú)占一行，多個(gè)block元素會(huì)各自新起一行。默認(rèn)情況下，block元素寬度自動(dòng)填滿其父元素寬度。
block元素可以設(shè)置width,height屬性。塊級(jí)元素即使設(shè)置了寬度,仍然是獨(dú)占一行。
block元素可以設(shè)置margin和padding屬性。
2.display:inline
inline元素不會(huì)獨(dú)占一行，多個(gè)相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排列不下，才會(huì)新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。
inline元素設(shè)置width,height屬性無(wú)效。
inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會(huì)產(chǎn)生邊距效果。
3.display:inline-block
簡(jiǎn)單來(lái)說(shuō)就是將對(duì)象呈現(xiàn)為inline對(duì)象，但是對(duì)象的內(nèi)容作為block對(duì)象呈現(xiàn)。之后的內(nèi)聯(lián)對(duì)象會(huì)被排列在同一行內(nèi)，允許空格。(準(zhǔn)確地說(shuō)，應(yīng)用此特性的元素呈現(xiàn)為內(nèi)聯(lián)對(duì)象，周?chē)乇３衷谕恍?，但可以設(shè)置寬度和高度地塊元素的屬性)比如我們可以給一個(gè)link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
經(jīng)典用法
display:inline比較經(jīng)典的用法是用在 <ul> 下的 <li> 中 內(nèi)聯(lián) block一般一個(gè)塊占一行，除非float inline是自動(dòng)排為一行，就象段內(nèi)的文字一樣，可成為多行。
display:inline 的作用是設(shè)置對(duì)象做為行內(nèi)元素顯示，inline是內(nèi)聯(lián)對(duì)象的默認(rèn)值（ps:內(nèi)聯(lián)對(duì)象就是不自動(dòng)產(chǎn)生換行的元素，比如span） 而我們一般用的div是塊級(jí)元素，默認(rèn)display屬性是block, 但將div的display設(shè)置為inline的話，則多個(gè)div可以象span一樣顯示在一行了。
display:inline 對(duì)應(yīng)不顯示為 display:none
display:block 對(duì)應(yīng)不顯示為 hidden
說(shuō)通俗點(diǎn) 樣式為none的元素不占位置,而樣式為hidden的元素雖然不顯示但還是占地方。
2. position的五種取值為：
static:靜態(tài)位置，無(wú)特殊位置，對(duì)象遵循正常文檔流，left right top bottom 無(wú)用。這個(gè)是默認(rèn)值哦！
relative：相對(duì)定位，對(duì)象遵循正常文檔流，以正常理應(yīng)所在的位置為基礎(chǔ)根據(jù)left right top bottom 值進(jìn)行偏移。在沒(méi)有設(shè)置屬性為relative時(shí)，對(duì)象在文檔中會(huì)有個(gè)位置，設(shè)置了此值后，在文檔中的位置根據(jù)left right top bottom 值進(jìn)行重新定位。相對(duì)定位，相對(duì)的是自己本身應(yīng)該在的位置！
absolute：絕對(duì)定位，對(duì)象脫離正常文檔流，以static之外的最近父元素為參考點(diǎn)進(jìn)行l(wèi)eft right top bottom 值進(jìn)行偏移。若不存在此屬性，則以body為參考點(diǎn)移動(dòng)，即以窗口為參考點(diǎn)。
fixed：固定定位，對(duì)象脫離正常文檔流，以窗口即body對(duì)象為參考點(diǎn)，參考left right top bottom 值進(jìn)行偏移。
inherit：從父元素繼承位置。
所以，static和relative的對(duì)象都遵循正常文檔流，而absolute和fixed是脫離正常穩(wěn)定流的，在正常文檔流中不占位置，有漂浮在頁(yè)面上的感覺(jué)。
relative和absolute和fixed這三種屬性的對(duì)象，設(shè)置left right top bottom 是有效的。
