行內(nèi)元素與塊級(jí)元素有什么區(qū)別

塊級(jí)元素

1、總是從新行開(kāi)始

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

3、寬度默認(rèn)是瀏覽器的100%

4、可以容納內(nèi)聯(lián)元素以及其他塊元素

行內(nèi)元素

1、和相鄰元素在一行上

2、高、寬無(wú)效，但是水平方向的padding和margin可以設(shè)置，垂直方向無(wú)效

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

4、行內(nèi)元素只能容納文本或其他行內(nèi)元素（a除外）

注意：

1、只有文字才能組成段落，因此p里面不能放置塊級(jí)元素，同理還有這些標(biāo)簽h1-h6，dt等，它們都是文字塊級(jí)標(biāo)簽，里面不能放置其他塊級(jí)元素

2、鏈接里面不能再放置鏈接

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

塊級(jí)元素的特點(diǎn)：

1、總是從新行開(kāi)始

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

3、寬度默認(rèn)是瀏覽器的100%

4、可以容納內(nèi)聯(lián)元素以及其他塊元素

行內(nèi)元素的特點(diǎn)：

1、和相鄰行內(nèi)元素在一行上

2、高、寬無(wú)效，但是水平方向的padding和margin可以設(shè)置，垂直方向無(wú)效

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

4、行內(nèi)元素只能容納文本或其他行內(nèi)元素（a除外）

行內(nèi)塊標(biāo)簽 inline-block

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

特點(diǎn)：

1、和相鄰行內(nèi)元素（行內(nèi)部）在一行上，但是之間會(huì)有空白間隙；

2、默認(rèn)寬度是它本身內(nèi)容的寬度

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

標(biāo)簽顯示模式轉(zhuǎn)換 display

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

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

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