本期小編為大家介紹的web前端培訓(xùn)教程是關(guān)于html5中塊狀元素怎么轉(zhuǎn)換為其他元素?主要分為兩大點(diǎn)：1、給塊狀元素添加“display:inline;”樣式，可以將塊狀元素轉(zhuǎn)換為行內(nèi)元素;2、給塊狀元素添加“display:inline-block;”，可以將塊狀元素轉(zhuǎn)換為行內(nèi)塊狀元素。

　　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)塊狀元素

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

　　web前端培訓(xùn)分享：html5中塊狀元素怎么轉(zhuǎn)換為其他元素，以上就是詳細(xì)介紹內(nèi)容了，想要了解更多web前端培訓(xùn)的具體課程內(nèi)容，請(qǐng)您留下聯(lián)系方式，千鋒教育課程顧問(wèn)會(huì)盡快聯(lián)系您，為您定制專(zhuān)屬課程，開(kāi)始您的學(xué)習(xí)之旅。