內聯元素和塊元素的區別及轉換
阿新 • • 發佈:2019-02-11
1.內聯元素和塊元素
內聯元素:p、 div、 h1~h6
塊元素:span、a
區別:內聯元素佔空間全部寬度,自動換行;
塊元素必須首先設定其相應的寬度,不會自動換行。
2.兩者的相互轉換
a.diaplay:inline;
內聯元素轉化為塊元素,即將p元素設定佔同一行,中間不顯示換行。
程式碼如下:
<style>
p {display:inline;}
</style>
<body>
<p> display屬性的值為 "inline"的結果</p>
<p>兩個元素之間沒有距離.</p>
</body>
b.display:block;
塊元素轉化為內聯元素,即將span元素設定為自動換行。
程式碼如下:
<style>
span {display:block;}
</style>
<body>
<span> display屬性的值為 "block"的結果</span> <span>兩個元素之間有換行符距離.</span>
</body>