塊級（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、section、arcitcle、pre、table、tbody、thead、th、tr、
塊元素(block)的特點：
1、總是在新行上開始；
2、高度，行高以及頂和底邊距都可控制；
3、寬度預設是它的容器的100%，除非設定一個寬度。
塊元素：
塊元素，也可以稱為行元素，佈局中常用的標籤，如：div、p、ul、li、h1-h6等等都是塊元素，它在佈局中的行為：

（1）支援全部的樣式

（2）如果沒有設定寬度，預設的寬度為父級寬度100%

（3）盒子佔據一行、即使設定了寬度

塊級元素：塊級大多為結構性標記

<address>...</adderss>

<center>...</center> 地址文字

<h1>...</h1> 標題一級

<h2>...</h2> 標題二級

<h3>...</h3> 標題三級

<h4>...</h4> 標題四級

<h5>...</h5> 標題五級

<h6>...</h6> 標題六級

<hr> 水平分割線

<p>...</p> 段落

<pre>...</pre> 預格式化

<blockquote>...</blockquote> 段落縮排 前後5個字元

<marquee>...</marquee> 滾動文字

<ul>...</ul> 無序列表

<ol>...</ol> 有序列表

<dl>...</dl> 定義列表

<table>...</table> 表格

<form>...</form> 表單

<div>...</div>

·塊級元素

1.總是從新的一行開始

2.高度、寬度都是可控的

3.寬度沒有設定時，預設為100%

4.塊級元素中可以包含塊級元素和行內元素

行級（display：inline）：a、span、small、strong、em、i、code、

內聯元素(inline)的特點：
1、和其他元素都在一行上；
2、高，行高及頂和底邊距不可改變；
3、寬度就是它的文字或圖片的寬度，不可改變。

內聯元素：

內聯元素，也可以稱為行內元素，佈局中常用的標籤，如：a、span、em、b、strong、i等等都是內聯元素，它們在佈局中的行為：

（1）支援部分樣式（不支援寬、高、margin上下、padding上下）

（2）寬高由內容決定

（3）盒子並在一行

（4）程式碼換行，盒子之間會產生間距

（5）子元素是內聯元素，父元素可以用text-align屬性設定子元素水平對方方式

解決內聯元素間隙的方法：

（1）去掉內聯元素之間的換行

（2）將內聯元素的父級設定font-size為0，內聯元素自身再設定font-size

行內元素：行內大多為描述性標記

<span>...</span>

<a>...</a> 連結

<br> 換行

<b>...</b> 加粗

<strong>...</strong> 加粗

<img > 圖片

^... 上標

_... 下標

<i>...</i> 斜體

<em>...</em> 斜體

<del>...</del> 刪除線

<u>...</u> 下劃線

<input>...</input> 文字框

<textarea>...</textarea> 多行文字

<select>...</select> 下拉列表

·行內元素

1.和其他元素都在一行

2.高度、寬度以及內邊距都是不可控的

3.寬高就是內容的高度，不可以改變

4.行內元素只能行內元素，不能包含塊級元素

內聯塊元素：

內聯塊元素，也叫行內塊元素，是新增的元素型別，現有元素沒有歸於此類別的，img和input元素的行為類似這種元素，但是也歸類於內聯元素，我們可以用display屬性將塊元素或者內聯元素轉化成這種元素。它們在佈局中表現的行為：

（1）支援全部樣式

（2）如果沒有設定寬高，寬高由內容決定

（3）盒子並在一起

（4）程式碼換行，盒子會產生間距

（5）子元素是內聯塊元素，父元素可以用text-align屬性設定子元素水平對齊方式。

行內塊（display：inline-block）：img、input

1、和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙；

2、預設寬度就是它本身內容的寬度；

3、高度，行高、外邊距以及內邊距都可以控制。