塊級元素、行內元素和行內塊元素各自特點和區(qū)別

下面我們介紹一下塊級元素、行內元素和行內塊元素的特點和轉換方法。

1.塊級元素(block-level)

（1）常見的塊元素有哪些？

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

（2）塊級元素有什么特點？

·自己獨占一行

·高度，寬度、外邊距以及內邊距都可以控制。

·寬度默認是容器（父級寬度）的100%

·是一個容器及盒子，里面可以放行內或者塊級元素。

（3）注意問題：

  只有文字才能組成段落，因此p標簽里面不能放塊級元素，特別是p標簽不能放div。同理還有這些標簽h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標簽，里面不能放其他塊級元素。

2.行內元素(inline-level)

（1）常見行內元素有哪些？

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

（2）行內元素有哪些特點？

·相鄰行內元素在一行上，一行可以顯示多個。

·高、寬直接設置是無效的。

·默認寬度就是它本身內容的寬度。

·行內元素只能容納文本或則其他行內元素。

（3）注意問題：

·鏈接里面不能再放鏈接。

·特殊情況a里面可以放塊級元素，但是給a轉換一下塊級模式最安全。

3.行內塊元素（inline-block）

（1）常見行內塊兒元素有哪些？

在行內元素中有幾個特殊的標簽——<img />、<input />、<td>，可以對它們設置寬高和對齊屬性，有些資料可能會稱它們?yōu)樾袃葔K元素。

（2）行內塊元素有什么特點？

·和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙。一行可以顯示多個

·默認寬度就是它本身內容的寬度。

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

4. 塊級元素、行內元素和行內塊元素的區(qū)別

5. 塊級元素、行內元素和行內塊元素互轉

塊轉行內：display:inline;

行內轉塊：display:block;

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

猜你喜歡：

CSS選擇器用法大全

HTML元素類型：塊元素和行內元素

CSS是什么意思？史上最詳細介紹

CSS3相比CSS有哪些優(yōu)勢？

什么是HTML，什么是H5？

傳智教育web前端開發(fā)培訓課程