HTML塊級元素和行內元素

塊級元素(block-level)

每個塊元素通常都會獨自佔據一整行或多整行，可以對其設置寬度、高度、對齊等屬性，常用於網頁佈局和網頁結構的搭建。

常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，
其中<div>標籤是最典型的塊元素。

塊級元素的特點：

（1）總是從新行開始

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

（3）寬度默認是容器的100%

（4）可以容納內聯元素和其他塊元素。

行內元素(inline-level)

行內元素（內聯元素）不佔有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，一般不可以設置寬度、高度、對齊等屬性，常用於控制頁面中文本的樣式。

常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、
<s>、<ins>、<u>、<span>等，其中<span>標籤最典型的行內元素。

行內元素的特點：

（1）和相鄰行內元素在一行上。

（2）高、寬無效，但水平方向的padding和margin可以設置，垂直方向的無效。

（3）默認寬度就是它本身內容的寬度。

（4）行內元素只能容納文本或則其他行內元素。（a特殊 a裏面可以放塊級元素 ）

注意：

1. 只有文字才能組成段落,因此p裏面不能放塊級元素，同理還有這些標籤h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標籤，裏面不能放其他塊級元素。
2. 鏈接裏面不能再放鏈接。
3. a裏面可以放塊級元素

塊級元素和行內元素區別

塊級元素的特點：
（1）總是從新行開始
（2）高度，行高、外邊距以及內邊距都可以控制。
（3）寬度默認是容器的100%
（4）可以容納內聯元素和其他塊元素。

行內元素的特點：
（1）和相鄰行內元素在一行上。
（2）高、寬無效，但水平方向的padding和margin可以設置，垂直方向的無效。
（3）默認寬度就是它本身內容的寬度。
（4）行內元素只能容納文本或則其他行內元素。

行內塊元素（inline-block）

在行內元素中有幾個特殊的標籤——<img />、<input />、<td>，
可以對它們設置寬高和對齊屬性，有些資料可能會稱它們爲行內塊元素。

行內塊元素的特點：
（1）和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙。
（2）默認寬度就是它本身內容的寬度。
（3）高度，行高、外邊距以及內邊距都可以控制。

標籤顯示模式轉換 display

塊轉行內：display:inline;

行內轉塊：display:block;

塊、行內元素轉換爲行內塊： display: inline-block;

此階段，我們只需關心這三個，其他的是我們後面的工作。