CSS的元素顯示模式與轉換

2022-08-10 01:15:18 字數 1009 閱讀 3335

標籤是最典型的塊元素。另外常見的塊元素有h1~h6、p、ul、ol、li等。

特點:

獨佔一行

高度、寬度、外邊距和內邊距都可以控制

寬度預設是父級寬度的100%

是乙個容器及盒子,裡面可以放行內元素或塊級元素

注:文字類的元素內不能使用塊級元素,例如p、h1~h6等。

標籤是最典型的行內元素。另外常見的行內元素有a、strong、em、i、del、ins等。

特點:

相鄰行內元素在同一行上,一行可以顯示多個

高度、寬度直接設定是無效的

預設寬度是它本身內容的寬度

裡面只能放文字或其它行內元素

注:img、input、td標籤同時具有塊元素和行內元素的特點,稱為行內塊元素。

特點:

相鄰行內元素或行內塊元素在同一行上,但是它們之間會有空白縫隙,一行可以顯示多個。(行內元素特點)

預設寬度是它本身內容的寬度。(行內元素特點)

高度、寬度、外邊距和內邊距都可以控制。(塊級元素特點)

元素模式

元素排列

設定樣式

預設寬度

包含塊級元素

一行只能放乙個塊級元素

可以設定寬度高度

父級元素的100%

可以包含任何標籤

行內元素

一行可以放多個行內元素

不可以直接設定寬度高度

它本身內容的寬度

可以容納文字或其它行內元素

行內塊元素

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

可以設定寬度高度

它本身內容的寬度

行內元素要先轉換模式,才能設定寬度、高度。

轉換為樣式

塊級元素

display: block;

行內元素

display: inline;

行內塊元素

display: inline-block;

css元素顯示模式的轉換

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

CSS元素顯示模式

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

CSS元素顯示模式

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