塊級(jí)元素、行內(nèi)元素和行內(nèi)塊元素各自特點(diǎn)和區(qū)別

下面我們介紹一下塊級(jí)元素、行內(nèi)元素和行內(nèi)塊元素的特點(diǎn)和轉(zhuǎn)換方法。

1.塊級(jí)元素(block-level)

（1）常見(jiàn)的塊元素有哪些？

常見(jiàn)的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標(biāo)簽是最典型的塊元素。

（2）塊級(jí)元素有什么特點(diǎn)？

·自己獨(dú)占一行

·高度，寬度、外邊距以及內(nèi)邊距都可以控制。

·寬度默認(rèn)是容器（父級(jí)寬度）的100%

·是一個(gè)容器及盒子，里面可以放行內(nèi)或者塊級(jí)元素。

（3）注意問(wèn)題：

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

2.行內(nèi)元素(inline-level)

（1）常見(jiàn)行內(nèi)元素有哪些？

常見(jiàn)的行內(nèi)元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標(biāo)簽最典型的“行內(nèi)元素”，也稱“內(nèi)聯(lián)元素”。

（2）行內(nèi)元素有哪些特點(diǎn)？

·相鄰行內(nèi)元素在一行上，一行可以顯示多個(gè)。

·高、寬直接設(shè)置是無(wú)效的。

·默認(rèn)寬度就是它本身內(nèi)容的寬度。

·行內(nèi)元素只能容納文本或則其他行內(nèi)元素。

（3）注意問(wèn)題：

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

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

3.行內(nèi)塊元素（inline-block）

（1）常見(jiàn)行內(nèi)塊兒元素有哪些？

在行內(nèi)元素中有幾個(gè)特殊的標(biāo)簽——<img />、<input />、<td>，可以對(duì)它們?cè)O(shè)置寬高和對(duì)齊屬性，有些資料可能會(huì)稱它們?yōu)樾袃?nèi)塊元素。

（2）行內(nèi)塊元素有什么特點(diǎn)？

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

·默認(rèn)寬度就是它本身內(nèi)容的寬度。

·高度，行高、外邊距以及內(nèi)邊距都可以控制。

4. 塊級(jí)元素、行內(nèi)元素和行內(nèi)塊元素的區(qū)別

5. 塊級(jí)元素、行內(nèi)元素和行內(nèi)塊元素互轉(zhuǎn)

塊轉(zhuǎn)行內(nèi)：display:inline;

行內(nèi)轉(zhuǎn)塊：display:block;

塊、行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊：display: inline-block;

猜你喜歡：

CSS選擇器用法大全

HTML元素類型：塊元素和行內(nèi)元素

CSS是什么意思？史上最詳細(xì)介紹

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

什么是HTML，什么是H5？

傳智教育web前端開(kāi)發(fā)培訓(xùn)課程