一、區別：
| 是否獨占一行 | width、height | margin | padding | 默認寬高 | |
| 塊級元素 | 是 | 有效 | 有效 | 有效 | 撐滿父元素 |
| 行內元素 | 否 | 無效 | 水平方向有效，豎直方向無效 | 有效 | 隨內部元素的內容變化 |
| 行內塊級元素 | 否 | 有效 | 有效 | 有效 | 隨內部元素的內容變化 |
二、有哪些塊元素與行內元素：
常見塊級元素：
div , h1---h6 , p , ul , ol , dl , table , form
* div - 常用塊級元素，也是css layout的主要標簽
* h1---h6 標題
* p - 段落
* ul - 非排序列表
* ol - 排序表單
* dl - 定義列表
* table - 表格
* form - 交互表單
* hr - 水平分隔線
* pre - 格式化文本
* address - 地址
* blockquote - 塊引用
* header - HTML5區段頭或頁頭。
* footer - HTML5區段尾或頁尾。
* section - HTML5一個頁面區段。
* article - HTML5文章內容。
* aside - HTML5伴隨內容。
* hgroup - HTML5標題組。
* menu - HTML5菜單列表
* figcaption - HTML5圖文信息組標題
* figure - HTML5圖文信息組
* audio - HTML5音頻播放
* video - HTML5視頻
* output - HTML5表單輸出
常見行內元素：
span , a , strong , b , em , i , big , small ,label，img, input , select , textarea（他們屬於行內置換元素，下文詳解）
* span - 常用內聯容器，定義文本內區塊
* a - 錨點
* strong - 粗體強調
* b - 粗體
* em - 強調
* i - 斜體
* small - 小字體文本
* big - 大字體
* sub - 下標
* sup - 上標
* label - 表格標簽
* input - 輸入框
* select - 項目選擇
* textarea - 多行文本輸入框
* abbr - 縮寫
* code - 計算機代碼(在引用源碼的時候需要)
* acronym - 首字
* bdo - bidi override
* br - 換行
* cite - 引用
* dfn - 定義字段
* font - 字體設定(不推薦)
* img - 圖片
* kbd - 定義鍵盤文本
* q - 短引用
* s - 中划線(不推薦)
* samp - 定義范例計算機代碼
* strike - 中划線
* tt - 電傳文本
* u - 下划線
* var - 定義變量
三、行內元素與塊級元素間的相互轉換
行內元素和塊級元素都不是絕對的，可以相互轉換,，通常有這些方式可以轉換。
1.display:inline-block,將行內元素設置為行內塊元素
2.float:left/right,float就是隱形的把內聯元素轉換為塊級元素。但是他不會占據一行，相當於display：inline-block;
3.position,當對行內元素進行定位時，都會將行內元素轉換為塊級元素。
注意：只有通過display:block設置的行內元素才能繼承父元素的寬度。
四、置換元素
<img>、<input>、<textarea>、<select>、<object>是行內元素，但是他們卻可以設置寬高，這是為什么呢？因為他們是行內置換元素。
置換元素：一個內容不受CSS視覺格式化模型控制，CSS渲染模型並不考慮對此內容的渲染，且元素本身一般擁有固有尺寸（寬度，高度，寬高比）的元素，被稱之為置換元素。瀏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容。 例如：瀏覽器會根據<img>標簽的src屬性的值來讀取圖片信息並顯示出來，而如果查看(x)html代碼，則看不到圖片的實際內容；<input>標簽的type屬性來決定是顯示輸入框，還是單選按鈕等。
置換元素在其顯示中生成了框，這也就是有的內聯元素能夠設置寬高的原因。