1. 程式人生 > >CSS元素顯示模式轉換

CSS元素顯示模式轉換

網頁標籤分為兩種級別,一種是塊級,一種是行級。

塊級元素會單獨佔用網頁的一行內容,比如div、ul、ol、p……,這類標籤預設情況下寬度就是 body 的寬度。

行級元素就是行內元素,即不會單獨佔用一行,而是在行內公用空間,比如a、span……,行內元素沒有寬高,也不可以設定寬高。

因為上面的兩種級別在使用上都有不足,所以有了在結合了兩種級別的新一級,行內塊級。

行內塊級元素實現的功能是,標籤元素不會單獨佔用網頁中的一行,而且又能夠為其設定寬高。

利用CSS樣式來實現元素顯示模式轉換

屬性 display 的屬性值為 block 時,即為 塊級 元素。

屬性 display 的屬性值為 inline 時,即為 行級 元素。

當屬性 display 的屬性值為 inline-block 時,即為 行內塊級 元素。