標籤顯示模式 display

2021-10-10 09:34:38 字數 938 閱讀 1094

(1)塊級元素(block)

常見得塊級元素有

:~、、、1. 自己獨佔一行

2. 可以設定寬度和高度,外邊距以及內邊距都可以控制

3. 寬度預設是容器(父級寬度)得100%

(2)行內元素(inline)

常見的行內元素有

:、、、、、、、、、

1.一行可以顯示多個行內元素

2.高度和寬度直接設定是無效得

3.預設寬度就是他本身內容得寬度

(3)行內塊元素(inline-block)

在行內元素中有幾個特殊的標籤——
1.和相鄰行內元素(行內塊)顯示在一行上,但是中間會有空白縫隙,一行可以顯示多個。

2.可以直接設定高度,預設寬度就是他本身內容得寬度。

3.高度,行高、外邊距以及內邊距都可以控制。

三種模式總結區別元素模式

元素排列

設定樣式

預設寬度

包含塊級元素

一行只能存放乙個塊級元素

可以設定寬度和高度

容器(父級元素)100%

容易可以包含任何標籤

行內元素

一行可以存放多個行內元素

不能直接設定寬度和高度

它本身內容得寬度

容納文字或其他行內元素

行內塊元素

一行可以存放多個行內塊元素

可以設定寬度和高度

它本身內容得寬度

標籤顯示(display)模式相互轉換

標籤顯示模式(display)

html標籤一般分為塊標籤和行內標籤兩種型別,它們也稱塊元素和行內元素。具體如下 每個塊元素通常都會獨自佔據一整行或多整行,可以對其設定寬度 高度 對齊等屬性,常用於網頁布局和網頁結構的搭建。常見的塊元素有 等,其中標籤是最典型的塊元素。塊級元素的特點 1 總是從新行開始 2 高度,行高 外邊距以及...

display可以控制標籤的顯示模式

display none inline block inline block 繼承性 無 display值的解釋 none 此元素不被顯示,此文件中被移除。與visibility屬性的hidden值不同,其不為被隱藏的物件保留其物理空間 block 此元素按塊級元素顯示 前後換行符,自己佔一行。內聯...

CSS系列 02 標籤顯示模式 display

常見的塊元素有常見的行內元素有 等,其中標籤最典型的行內元素。行內元素的特點 1 和相鄰行內元素在一行上,但是之間會有空白縫隙 2 高 寬無效,僅外邊距 水平方向 以及內邊距 水平方向 可以正常控制 3 寬度預設就是它本身內容的寬度 注意 如果元素為行內元素,其垂直方向的內邊距也會生效,只是該元素會...