站長資訊網(wǎng)
css中可以利用display屬性實(shí)現(xiàn)行元素和塊元素的相互轉(zhuǎn)換：給行元素添加“display:block;”樣式可以將其轉(zhuǎn)為塊元素；給塊元素添加“display:inline;”樣式可以將其轉(zhuǎn)為行元素。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在HTML中，標(biāo)簽分為兩種等級：
-
行內(nèi)元素：與其他行內(nèi)元素并排；不能設(shè)置寬高，默認(rèn)的寬度就是文字的寬度。
-
塊級元素：霸占一行，不能與其他任何元素并列；能接受寬高，如果不設(shè)置寬度，那么寬度將默認(rèn)變?yōu)楦讣壍?00%。
例：<p>標(biāo)簽就是一個塊級元素，<span>標(biāo)簽就是一個行內(nèi)元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> p{ background: paleturquoise; } span{ background: paleturquoise; } </style> </head> <html> <body> <p>測試代碼 p標(biāo)簽</p> <p>測試代碼 p標(biāo)簽</p> <span>測試代碼 span標(biāo)簽</span> <span>測試代碼 span標(biāo)簽</span> </body> </html>
但元素的類型是進(jìn)行轉(zhuǎn)換的，我們可以利用css display屬性實(shí)現(xiàn)行元素和塊元素的相互轉(zhuǎn)換。
display 屬性規(guī)定元素應(yīng)該生成的框的類型。
-
block 此元素將顯示為塊級元素，此元素前后會帶有換行符。
-
inline 默認(rèn)。此元素會被顯示為內(nèi)聯(lián)（行內(nèi)）元素，元素前后沒有換行符。
將行元素轉(zhuǎn)為塊元素
在行內(nèi)元素中設(shè)置display:block;就可以讓行內(nèi)元素變成塊級元素。
將塊元素轉(zhuǎn)為行元素
在塊級元素中設(shè)置display:inline;就可以讓塊級元素變成行內(nèi)元素。
示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> p{ background: paleturquoise; display: inline; } span{ background: paleturquoise; display: block; } </style> </head> <html> <body> <p>測試代碼 p標(biāo)簽</p> <p>測試代碼 p標(biāo)簽</p> <span>測試代碼 span標(biāo)簽</span> <span>測試代碼 span標(biāo)簽</span> </body> </html>
推薦教程：《CSS視頻教程》
