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