站長(zhǎng)資訊網(wǎng)
轉(zhuǎn)換方法：1、給塊狀元素添加“display:inline;”樣式，可以將塊狀元素轉(zhuǎn)換為行內(nèi)元素；2、給塊狀元素添加“display:inline-block;”，可以將塊狀元素轉(zhuǎn)換為行內(nèi)塊狀元素。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
html5中塊狀元素轉(zhuǎn)換為其他元素（行內(nèi)或行內(nèi)塊狀）
塊狀元素特征：
-
(1)能夠識(shí)別寬高
-
(2)margin和padding的上下左右均對(duì)其有效
-
(3)可以自動(dòng)換行
-
(4)多個(gè)塊狀元素標(biāo)簽寫(xiě)在一起，默認(rèn)排列方式為從上至下
行內(nèi)元素特征：
-
(1)設(shè)置寬高無(wú)效
-
(2)對(duì)margin僅設(shè)置左右方向有效，上下無(wú)效；padding設(shè)置上下左右都有效，即會(huì)撐大空間
-
(3)不會(huì)自動(dòng)進(jìn)行換行
行內(nèi)塊狀元素特征：
-
(1)不自動(dòng)換行
-
(2)能夠識(shí)別寬高
-
(3)默認(rèn)排列方式為從左到右
在html5中，可以利用display 屬性將塊狀元素轉(zhuǎn)換為行內(nèi)或行內(nèi)塊元素。
-
display:inline;轉(zhuǎn)換為行內(nèi)元素 -
display:inline-block;轉(zhuǎn)換為行內(nèi)塊狀元素
示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> p{ background-color: #FFC0CB; height: 50px; } </style> </head> <body> <p>塊狀元素p</p> <p>塊狀元素p</p> <p style="display: inline;">塊狀元素p--轉(zhuǎn)為行內(nèi)元素</p> <p style="display: inline;">塊狀元素p--轉(zhuǎn)為行內(nèi)元素</p> <p>塊狀元素p</p> <p style="display: inline-block;">塊狀元素p--轉(zhuǎn)為行內(nèi)塊元素</p> <p style="display: inline-block;">塊狀元素p--轉(zhuǎn)為行內(nèi)塊元素</p> </body> </html>
可以看出，塊狀元素和行內(nèi)塊狀元素可以設(shè)置高度，而行內(nèi)元素不可以；而行內(nèi)元素和行內(nèi)塊狀元素不和換行，而塊狀元素會(huì)。
【
