1，塊級元素和行內元素的區別
| 是否獨占一行 | 是否填滿父元素 | 設置寬高是否有效 | 設置padding-top padding-bottom是否有效 |
設置margin-top margin-bottom是否有效 |
設置margin-left margin-right padding-left padding-right 是否有效 |
常見元素 |
|
| 塊級元素 | 是 | 是 | 有效 | 有 | 有效 | 有效 | div，p，form，ul，ol，li，h1~h6，table |
| 行級元素 | 否， 相鄰的行內元素會排列在 同一行，直到一行排不下，才會換行 |
否， 其寬度隨元素內容變換 |
無效 | 無效 padding-top padding-bottom 雖然增大了行內元素的面積，但是並沒有與相鄰元素拉大距離 |
無效 | 有效 | b,td,a, img，span |
如圖所示span元素的padding-top為100px，但是並沒有拉大span與上下兩個相鄰div的距離，因此行內元素的padding-top與padding-bottom是不起作用的
2，行內元素與塊級元素的相互轉換
通過設置display的值可以改變行內元素與塊級元素
其中塊級元素對應的是display:block;,行內元素對應的是display:inline;，如果我們對行內元素設置display:block;，則行內元素就會變為塊級元素；如果我們隊塊級元素設置display:inline;則塊級元素就會變為行內元素
3，我的疑惑點：
但是我們注意在對div應用float:left/right;以后，即使我們不對div應用display:inline;其多個div仍然會排列在一行，那么float是否也可以改變了其塊級元素的性質，將其變為行內元素了呢？
但是我們又發現該div可以設置寬高，並不符合行內元素的特征
在這里，我們就要介紹display的另外一個值inline-block，即行內的塊級元素，它擁有塊級元素的特點，可以設置寬高，padding，margin，但是它卻又符合行內元素的特征：不獨占一行，寬度不會沾滿父元素，在不設置寬高的情況下，寬高隨內容變換；而且和行內元素一樣可以排列於一行，如下圖所示
那么這個float又是何方神聖呢？
我們首先介紹css中的定位機制
3，css中的定位機制
CSS中有三種基本的定位機制：普通流、浮動和絕對定位。
普通流：默認情況下，所有框都在普通流中定位。按照你所寫的html，順序的排列，塊級元素從上到下一個接一個地排列；塊級元素之間的垂直距離由其定義的margin-top，margin-bottom決定。行內元素則在一行中水平布置。利用margin-left/right，padding-left/right，來調整它們之間的水平距離。
相對定位：position:relative;如果一個元素的設置該屬性為relative，那么就激活了該元素left和top屬性，利用這兩個屬性，該元素就相對於它自身原本在普通文檔流中的位置進行偏移，但無論如何進行移動，元素仍然占據原來的空間，仍然屬於普通流。
絕對定位：position:absolute;絕對定位使元素的位置與文檔流無關，因此不占據空間。普通文檔流中的其他元素在布局的時候就像絕對定位的元素不存在時一樣,絕對定位的元素的位置是相對於最近的已定位祖先元素(position:relative/absolute)。如果元素沒有已定位的祖先元素，那么它的位置相對於最初的包含塊.同時因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其他元素。可以通過設置z-index屬性來控制這些框的堆放次序。z-index值越高，框在堆中的位置就越高
浮動模型。浮動的元素脫離普通文檔流，向左或者向右移動，直到它的邊緣碰到包含框或者另一個浮動框的邊緣。因為浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣
因為浮動元素脫離了文檔流，所以上面的例子中包圍浮動div的外層div不占據空間