元素種類分類
html標簽按照元素種類可以分為行內元素（display: inline）;，塊級元素（display：block）和行內塊級元素（display：inline-block）三種。了解元素種類有利於，我們進行css布局及屬性的使用。
行內元素
也叫內聯元素或內嵌元素，只能容納文本或其他內聯元素。
默認特點:
- 使用多個行內元素時呈現效果排在一行，不會自動換行，當充滿容器后，就會開始位置繼續疊加顯示。
- 不能設置
widthheight屬性（可以設置line-height指定高度，寬度隨內容變化）。 margin水平方向有效，垂直方向無效。padding水平方向有效，垂直方向有特殊效果（不是邊距效果），具體表現：不影響位置，影響視覺。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body {
background: chocolate;
}
span {
width: 300px;
color: #ffffff;
background: darkgreen;
padding: 400px 10px 200px 10px;
margin: 20px;
line-height: 100px;
}
</style>
<body>
<div>關關雎鳩</div>
<span>所謂伊人</span><span>在水一方</span>
<div>在河之洲</div>
</body>
</html>
效果：
常見行內元素:
| 標簽 | 意義 |
|---|---|
| a | 錨點 |
| abbr | 縮寫 |
| acronym | 首字 |
| b | 粗體(不推薦) |
| big | 大字體 |
| br | 換行 |
| cite | 引用 |
| code | 代碼 |
| dfn | 定義字段 |
| em | 強調 |
| font | 字體設定(不推薦) |
| i | 斜體 |
| img | 圖片 |
| input | 輸入框 |
| kbd | 定義鍵盤文本 |
| label | 表格標簽 |
| q | 短引用 |
| s | 中划線(不推薦) |
| samp | 定義范例計算機代碼 |
| select | 項目選擇 |
| small | 小字體文本 |
| span | 定義文本內區塊(常用) |
| strike | 中划線 |
| strong | 粗體強調 |
| sub | 下標 |
| sup | 上標 |
| textarea | 多行文本輸入框 |
| tt | 電傳文本 |
| u | 下划線 |
塊級元素
塊級元素一般可嵌套塊級元素或行內元素
默認特點：
- 獨占一行，使用多個塊級標簽時自動換行。
- 可以設置
width,height，margin,padding等屬性 - 寬度默認值為
100%
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body {
background: chocolate;
}
div {
color: white;
background: chartreuse;
padding: 10px;
margin: 20px;
}
</style>
<body>
<div>關關雎鳩</div>
<div>在河之洲</div>
<div>窈窕淑女</div>
<div>君子好逑</div>
</body>
</html>
效果：
常見的塊級元素：
| 標簽 | 意義 |
|---|---|
| address | 地址 |
| blockquote | 塊引用 |
| center | 局中對齊塊 |
| dir | 目錄列表 |
| div | 常用塊級容易(常用) |
| dl | 定義列表 |
| fieldset | form控制組 |
| form | 交互表單 |
| h1 | 大標題 |
| h2 | 副標題 |
| h3 | 三級標題 |
| h4 | 四級標題 |
| h5 | 物級標題 |
| h6 | 六級標題 |
| hr | 水平分隔線 |
| menu | 菜單列表 |
| noframes | frames可選內容 |
| noscript | 可選腳本內容 |
| ol | 有序表單 |
| p | 段落 |
| pre | 格式化文本 |
| table | 表格 （display：table） |
| ul | 無序列表 |
行內塊級元素
既有行內元素的一些特性又有塊級元素的一些特性。
默認特點：
- 元素排在一行，會有空白縫隙
- 可以設置
width,height，margin,padding等屬性 - 默認寬度由隨內容變化
常見行內塊級元素：
| 標簽 | 意義 |
|---|---|
| button | 按鈕 |
| input | 輸入框 |
| img | 圖片 |
| iframe | 框架 |
| textarea | 多行文本框 |
| select | 選項 |
總結
三種元素都可通過css改變display 屬性切換元素類型
行內元素與塊級元素對比：
| 行內元素 | 塊級元素 |
|---|---|
| 排在一行 | 獨占一行 |
| 寬度隨內容變化 | 容器的100% |
height,width無效 |
height,width 有效 |
padding,margin 水平有效，垂直無效 |
padding,margin 水平，垂直均有效 |
display：inline |
dispaly: block |