關於區塊層級元素與內嵌元素之間的轉換我們可以使用css解決，使用CSS以後塊元素和內嵌元素的這種屬性差異就不成為差異了。比如，我們完全可以把內嵌元素加上display:block這樣的屬性，讓它也有每次都從新行開始的屬性，即成為塊元素同樣我們可以把塊元素加上display:inline這樣的屬性，讓它也在一行上排列。
二、display：inline與display：block
display：inline：顯示為內嵌，使快元素轉換為內嵌元素同時具備內嵌元素標籤的特徵。
display：block：顯示為塊，使內嵌元素轉換為區塊層級元素同時具備塊元素標籤的特徵。
三、區塊層級元素轉內嵌元素，display：inline的使用。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> p{ height: 50px; background-color: yellow; width: 500px; display: inline; } </style> </head> <body> <p>p1</p> <p>p2</p> </body></html>
程式碼片段執行結果：
已經成功將區塊層級元素轉換為內嵌元素，同時已經具備內嵌元素的特徵了。
四、內嵌元素轉區塊層級元素，display：block的使用。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> span, em{ height: 200px; background-color: yellow; width: 200px; margin: 50px; display: block; } </style> </head> <body> <span>span1</span> <em>em2</em> </body></html>
程式碼片段執行結果：
已經成功將內嵌元素轉換為區塊層級元素，同時已經具備區塊層級元素的特徵了。
五、display
display：是將標籤轉換為頁面中展示的類型不會改變標籤的本質。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
