首頁 >web前端 >css教學 >css行級元素和區塊級元素之間怎麼轉換

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

青灯夜游
青灯夜游原創
2021-02-22 17:08:1714692瀏覽

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

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

本教學操作環境: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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn