塊級元素
顧名思義就是以塊顯示的元素，高度寬度都是可以設定的。比如我們常用的div、p、ul預設狀態下都是屬於塊級元素。塊級元素比較霸道，預設狀態下每次都佔據一整個行，寬度始終是與瀏覽器寬度一樣，塊級元素之所以會單獨佔據一行是因為它們前後預設有換行符（看不到）。它可以容納內聯元素和其他塊元素。當然非塊級元素也可以通過css的display:block;將其更改成塊級元素。此外還有個特殊的，float也具有此功能，設定float後，就不用再display:block;了，浮動後元素自動就擁有了塊元素的屬性了

內聯元素（行內元素）
通俗點來說就是文字的顯示方式，與塊級元素相反，內聯元素的高度寬度都是不可以設定的，其寬度就是自身文字或者圖片的寬度。我們常用到的a、span、em都屬於內聯元素。內聯元素的顯示特點就是像文字一樣的顯示，不會獨自佔據一個行。行內元素只能容納文字或者其他行內元素。當然塊級元素也能變成內聯元素，那就是通過css的display:inline;和float來實現。

盒子在標準流中的定位原則
（1）行內元素之間的水平margin
當兩個行內元素緊鄰時，它們之間的距離為第1個元素的margin-right加上第2個元素的margin-left。
（2）塊級元素之間的豎直margin
當兩個塊級元素緊鄰時，它們的距離不是margin-bottom與margin-top的總和，而是兩者中的較大者。
（3）巢狀盒子之間的margin
當一個div塊包含在另一個div塊中時，便形成了典型的父子關係。其中子塊的margin將以父塊的 content為參考。
（4）將margin設定為負值
當margin設定為負值時，會使被設為負數的塊向相反的方向移動，甚至覆蓋在另外的塊上。

行內元素和塊級元素使用浮動後的變化
如果一個元素（無論是塊級元素還是行內元素）被設定為float之後，那麼它預設會新增屬性display:inline-block（行內塊級元素），也就是說浮動會讓元素變為擁有塊級屬性的行內元素，這時它的預設寬度不是100%，且給該元素設定padding-top和padding-bottom或者width、height都是有效果的。
需要注意的是，設定浮動的元素是脫離文件流的，會遮蓋未設定浮動的元素。把網頁理解為是立體的，有不同的層次，那麼浮動的和不浮動的是不在同一平面的。

css給塊級元素設上display: inline與float:left的區別是什麼？

設了float:left的元素允許它的右邊存在任何元素同行顯示，不論是內聯元素還是塊元素。但它的左邊還是不允許存在任何元素與之同行顯示，哪怕其它的元素的程式碼在前，除非也給前面的元素加上float:left後，才允許同行顯示。
設了display:inline的元素，允許它的前後存在其它的內聯元素同行顯示。如果要讓程式碼在前面的塊元素與之同行顯示，則要讓前面的元素浮動（不管是左還是右浮動）或設為display:inline，如果要讓程式碼在後面的塊元素與之同行顯示，則只能設為display:inline，浮動不起作用（無論左浮動還是右浮動）。即允許內聯同行，塊級要看情況。
給塊級元素設上display:inline是解決有名的IE6中雙倍浮動的利器。