這篇“html5中塊狀元素如何轉(zhuǎn)換為其他元素”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“html5中塊狀元素如何轉(zhuǎn)換為其他元素”文章吧。

為三河等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及三河網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè)、三河網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

轉(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)簽寫在一起，默認(rèn)排列方式為從上至下

行內(nèi)元素特征：

• (1)設(shè)置寬高無效

• (2)對(duì)margin僅設(shè)置左右方向有效，上下無效；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)塊狀元素

示例：

	
		
		
	
	
		
塊狀元素p
		
塊狀元素p
		塊狀元素p--轉(zhuǎn)為行內(nèi)元素

		塊狀元素p--轉(zhuǎn)為行內(nèi)元素

		
塊狀元素p
		塊狀元素p--轉(zhuǎn)為行內(nèi)塊元素

		塊狀元素p--轉(zhuǎn)為行內(nèi)塊元素

	

可以看出，塊狀元素和行內(nèi)塊狀元素可以設(shè)置高度，而行內(nèi)元素不可以；而行內(nèi)元素和行內(nèi)塊狀元素不和換行，而塊狀元素會(huì)。

以上就是關(guān)于“html5中塊狀元素如何轉(zhuǎn)換為其他元素”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。