css的元素顯示模式

2021-10-10 09:28:25 字數 920 閱讀 3956

什麼是元素的顯示模式?

元素(標籤)以什麼方式進行顯示

元素顯示模式的分類

html元素一般分為塊元素和行內元素兩種型別

塊元素:~< ol>是最經典的塊元素.

特點:1.比較霸道 獨佔一行

​ 2.寬.高,外邊距都可以控制

​ 3.是乙個容器及盒子,可以放行內或者塊元素

文字類的元素內不能使用塊級元素

p標籤 存放文字,p裡面不能放塊級元素 特別不可以放div

同理 h1-h6 都文字類塊級標籤,裡面不能放其他塊級元素

行內元素: 常見的行內元素 a strong b em i del s ins u span… span標籤是最典型的行內元素

行內元素的特點

1.相鄰的行內元素在一行,一行可以顯示多個

2.高,寬度直接設定無效的

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

4.行內元素只能容納文字或者其他的行內元素

注意:鏈結裡面不能再去放鏈結的

特殊的情況a 快級元素 a 轉換成塊級元素

行內塊元素

特殊的標籤 img input td 他們同時具有塊元素和行內元素的特點

行內塊元素的特點:

1.和相鄰的行內元素(行內塊)在一行上,但是他們之間空白的縫隙,一行顯示多個

2.預設寬度是內容的寬度(行內元素的特點)

3.高度,行高,邊距以內邊距都可以控制 (塊元素的特點)

元素的顯示模式轉換

轉換為塊元素:display:block;

轉換為行內元素:display:inline;

轉換為行內塊:display:inline-block;

CSS元素顯示模式

行內元素 元素顯示模式轉換 單行文字垂直居中 導航欄案例 元素以什麼方式進行顯示.常見的塊元素有常見的行內元素有,等 相鄰行內元素在一行上,一行可以顯示多個 高和寬直接設定是無效的 預設寬度就是它本身內容的寬度 行內元素只能容納文字或者其他行內元素 行內元素中有幾個特殊的標籤 它們同時具有塊元素和行...

CSS元素顯示模式

元素顯示模式就是元素 標籤 以什麼方式進行顯示 比如標籤獨佔一行,標籤可以在一行裡放多個 顯示模式分為以下幾類 塊元素 行內元素 行內塊元素 常見的塊元素有 常見的行內元素有,等,其中標籤是最典型的行內元素 有的地方也將行內元素稱為內聯元素 行內元素有以下特點 相鄰行內元素在一行上,一行可以顯示多個...

CSS 元素顯示模式

顯示特點 獨佔一行 寬度預設是父元素的寬度,高度預設由內容撐開 可以設定高度 顯示特點 一行可以顯示多個 不換行 寬度和高度預設由內容撐開 尺寸和內容大小相同 不可以設定寬高 顯示特點 一行可以設定多個 可以設定寬高 目的 改變元素預設的顯示特點,讓元素符合布局要求。display block 轉換...