css行級元素和區塊級元素之間怎麼轉換

在css中，可以使用display屬性來實現行級元素和區塊級元素的轉換，並為行級元素設定「display:block;」樣式即可轉換為區塊級元素，給區塊級元素設定“display:inline;”樣式即可轉換為行級元素。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

行內元素

span、i、 a、 img等等。在一行內顯示，一般情況不可以設定寬高的元素就是行內元素。

區塊級元素

div、h1、p、li等等。獨佔一行，可以設定寬高的元素就是區塊級元素。

區塊級元素轉換成行內元素

在區塊級元素中設定display：inline;就可以讓區塊級元素變成行內元素。

行內元素轉換成區塊級元素

在行內元素中設定display:block;就可以讓行內元素變成區塊元素。

區塊級元素或行內元素轉換成

區塊級元素或在行內元素中設定display：inline-block; 就可以讓區塊級元素或行內元素變成行內區塊級元素，而且可以在同一行內顯示。 【推薦教學：CSS影片教學 】

CSS display 屬性

display 屬性規定元素應該產生的方塊的類型。

• block    此元素將顯示為區塊級元素，此元素前後會帶有換行符號。   

• inline    預設。此元素會被顯示為內聯元素，元素前後沒有換行符號。   

• inline-block    行內區塊元素。 （CSS2.1 新增的值）    

更多程式相關知識，請造訪：程式設計影片！ ！

以上是css行級元素和區塊級元素之間怎麼轉換的詳細內容。更多資訊請關注PHP中文網其他相關文章！