display屬性(重點)

2022-08-31 02:57:07 字數 571 閱讀 4698

行內元素:

塊級元素:

在以前的html知識中,我們已經將標籤分過類,當時分為了:文本級、容器級。

從html的角度來講,標籤分為:

現在,從css的角度講,css的分類和上面的很像,就p不一樣:

我們可以通過display屬性將塊級元素和行內元素進行相互轉換。display即「顯示模式」。

一旦,給乙個塊級元素(比如div)設定:

display: 

inline;

那麼,這個標籤將立即變為行內元素,此時它和乙個span無異。inline就是「行內」。也就是說:

同樣的道理,一旦給乙個行內元素(比如span)設定:

display: block;
那麼,這個標籤將立即變為塊級元素,此時它和乙個div無異。block」是「塊」的意思。也就是說:

ps:標準流裡面的限制非常多,導致很多頁面效果無法實現。如果我們現在就要併排、並且就要設定寬高,那該怎麼辦呢?辦法是:移民!脫離標準流!

css中一共有三種手段,使乙個元素脫離標準文件流:

display屬性解析

此元素不會被顯示 此元素將顯示為塊級元素,此元素前後會帶有換行符。預設。此元素會被顯示為內聯元素,元素前後沒有換行符。行內塊元素。css2.1 新增的值 此元素會作為列表顯示。此元素會根據上下文作為塊級元素或內聯元素顯示。此元素會作為塊級 來顯示 類似 前後帶有換行符。此元素會作為內聯 來顯示 類似...

CSS屬性 display 顯示屬性

演示示例 visibility 屬性?該css屬性用來設定物件如何顯示。的預設值都為 inline。值 block none inline inline block list item table header group table footer group inherit 可用值值的說明 blo...

display屬性及屬性值

display屬性共有18個屬性值,常用屬性值有 block,inline,inline block,none,list item,table header group,table footer group 1 block類似元素後面新增換行符,塊狀元素。2 inline內聯顯示,多個元素可以一行內...