盒子模型，塊級元素和行內元素特性與區別
盒模型到底是什麼？
盒模型是CSS實現頁面佈局的一種思想：把頁面的所有元素都看成一個類似於禮品盒的盒子，禮品盒可能會有好多層包裝組成，那麼頁面元素也對應的有內容、邊框、內外邊距等組成。這裡特別提醒一下，盒模型是要把元素看成立體的，它確實有空間的屬性，我在後面詳細介紹。
盒模型的概念明白了，就該注意盒模型的種類了
目前有：標準盒子模型和IE盒子模型 2種盒模型。他們各自長這樣：
根據上圖可以看出他們的不同：
標準盒模型：元素的width和height = content
IE盒模型：元素的width和height =( content+border+padding )
因為存在這樣的差異，所以要滿足跨瀏覽器的時候就會比較麻煩。當然兩種方式肯定是標準盒模型比較好，這裡有一個解決跨瀏覽器的方案：
在網頁頂部增加DOCTYPE的宣告：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這樣會使所有瀏覽器按照W3C標準盒模型去解析頁面元素，就滿足了跨瀏覽器的要求了。
上面還提到了盒子模型是有空間的，主要表現在組成盒子的各個部分的層次不同。他們從上到下的順序是
border----->content、padding----->background-image----->background-color----->margin 如下圖
所以在處理頁面元素的樣式時還需要注意到這點。
行內元素和塊級元素的區別和他們的特點是什麼？
塊級元素會獨佔一行,預設情況下,其寬度自動填滿其父元素寬度.
行內元素不會獨佔一行,相鄰的行內元素會排列在同一行裡,直到一行排不下,才會換行,其寬度隨元素的內容而變化. 另外
- 塊級元素可以設定width,height屬性.
- 行內元素設定width,height屬性無效，它的長度高度主要根據內容決定.
- 塊級元素即使設定了寬度,仍然是獨佔一行.
- 塊級元素可以設定margin和padding屬性.
- 行 內元素的margin和padding屬性,水平方向的padding-left,padding-right,margin-left,margin- right都產生邊距效果, 但豎直方向的padding-top,padding-bottom,margin-top,margin-bottom卻不 會產生邊距效果.
- 塊級元素對應於display:block.
- 行內元素對應於display:inline.
塊級元素常見的有：div......行內元素常見的有：a，span
如果想讓一個元素可以設定寬度高度，又讓它以行內形式顯示，我們可以設定display的值為inline-block。
以上內容均來自網際網路搜尋整理的結果，如有侵權請告知！