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視頻教程》
站長資訊網