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

塊級元素

1、總是從新行開始

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

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

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

行內(nèi)元素

1、和相鄰元素在一行上

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

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

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

注意：

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

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

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

塊級元素的特點：

1、總是從新行開始

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

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

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

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

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

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

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

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

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

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

特點：

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

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;