行內元素、塊級元素和行內塊元素
1、行內元素
常見的行內元素：
| <a> | 錨點 |
| <b> | 字型加粗 |
| <big> | 大號字型 |
| <br> | 換行 |
| <em> | 定義為強調內容 |
| <i> | 斜體文字 |
| <img> | 圖片 |
| <input> | 輸入框 |
| <label> | 標籤為input的標註 |
| <select> | 單選或多選選單 |
| <small> | 小號字型 |
| <span> | 組合文件的行內元素 |
| <strong> | 強調內容 |
| <sub> | 定義上標 |
| <sup> | 定義下標 |
| <textarea> | 多行文字輸入框 |
行內元素的特點：
1.行內元素預設情況下可以和其他內聯元素元素在一行上。
2.行內元素預設情況下的大小是不可以控制的。
3.行內元素可以產生程式碼換行和空格。
4.行內元素對應屬性display：inline；
5.行內元素只能容納文字或者行內元素。
行內元素的margin和padding屬性,水平方向的padding-left,padding-right,margin-left,margin- right都產生邊距效果,但豎直方向的padding-top,padding-bottom,margin-top,margin-bottom卻不 會產生邊距效果.
2、塊級元素：
常見的塊級元素
| address | 地址元素 |
| blockquote | 塊引用 |
| center | 居中對齊 |
| dir | 目錄列表 |
| div | 常用的塊級元素 |
| fieldset – form | 控制組 |
| form | 互動表單 |
| h1~h6 | 標題 |
| hr | 水平橫線 |
| isindex-input prompt | |
| menu | 選單列表 |
| noframes – frames | 可選內容 |
| noscript | 可選指令碼內容 |
| ol | 有序表單 |
| p | 段落 |
| pre | 格式化文字 |
| table | 表格 |
| ul | 無序列表 |
塊級元素的特點：
- 獨霸一行，總是在新行上開始
- 寬度預設是它父級元素的100%，除非設定一個寬度
- 高度、行高、外邊距、內邊距都可以設定
- 可以容納其他內聯元素或者其他塊元素
3、行內元素與塊級元素的區別：
區別一：
塊級：塊級元素會獨佔一行，預設情況下寬度自動填滿其父元素寬度
行內：行內元素不會獨佔一行，相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化。
區別二：
塊級：塊級元素可以設定寬高
行內：行內元素不可以設定寬高
區別三：
塊級：塊級元素可以設定margin，padding
行內：行內元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。
區別四：
塊級：display:block;
行內：display:inline;
可以通過修改display屬性來切換塊級元素和行內元素
4、行內塊級元素：
display：inline-block
行內塊元素特點：
- 元素排列在一行
- 寬度預設由內容決定
- 元素間預設有間距
- 支援寬高、外邊距、內邊距的所有樣式的設定