1. 程式人生 > >內聯元素和塊元素的區別以及轉換

內聯元素和塊元素的區別以及轉換

spa AC 塊級元素 內聯 body 相互轉換 自動換行 round -c

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>

內聯元素和塊元素的區別以及轉換