css之元素顯示方式的轉換(display的用法)

2021-08-01 14:29:55 字數 691 閱讀 5798

css元素的顯示方式的轉換

(1)display樣式的none

段落1段落2

釋放該元素所佔的空間。

(2)visibility定義為hidden

段落1段落2

visibility 的hidden屬性,它雖然也能隱藏元素但是,並不釋放占用的空間

因此,一般情況下使用display的none值將元素隱藏。

例1:一級選單

一級選單

一級選單

如,span元素原來是行內元素,將其的display屬性定義為block後,該元素顯示變成塊級元素,具有塊級元素的特徵。

span

例2:一級選單

一級選單

一級選單

3、display屬性(inline)

設定display屬性值為inline後,元素會被顯示為內聯元素, 元素前後沒有換行符。

divdiv

4、display屬性(inline-block)

inline-block屬性值可以將元素轉換成行內塊元素。

應用此特性的元素呈現為內聯物件, 周圍元素保持在同一行, 但可以設定寬度和高度地塊元素的屬性

divdiv

css元素顯示模式的轉換

特殊形況下,我們需要元素模式的轉換,簡單理解 乙個模式的元素需要另一種模式的特性。例,想要增加鏈結的觸發範圍。把這個行內元素,轉換為塊級元素,就具有塊級元素的特性,就可以設定寬度和高度 例1 將 行內元素 轉換為 塊級元素 href 周杰倫a href 周杰倫a a 因為 a 元素是行內元素,所以給...

CSS的元素顯示模式與轉換

標籤是最典型的塊元素。另外常見的塊元素有h1 h6 p ul ol li等。特點 獨佔一行 高度 寬度 外邊距和內邊距都可以控制 寬度預設是父級寬度的100 是乙個容器及盒子,裡面可以放行內元素或塊級元素 注 文字類的元素內不能使用塊級元素,例如p h1 h6等。標籤是最典型的行內元素。另外常見的行...

CSS 的元素顯示

作用 網頁的標籤非常多,在不同地方會用到不同型別的標籤 了解他們的特點可以更好的布局我們的網頁。元素顯示模式就是 元素 標籤 以什麼方式進行顯示,比如 div 自己佔一行,比如一行可以顯示多個 span html 元素一般分為 塊元素 和 行元素 兩種型別。塊元素 常見的塊元素有 h1 h6 p d...