CSS 的元素顯示

2021-10-19 18:13:28 字數 1255 閱讀 8333

作用:網頁的標籤非常多,在不同地方會用到不同型別的標籤

了解他們的特點可以更好的布局我們的網頁。

元素顯示模式就是 元素(標籤)以什麼方式進行顯示,比如 div 自己佔一行,比如一行可以顯示多個 span

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

塊元素

常見的塊元素有 h1 -h6 、p、div、ul、ol、li等,其中 div 標籤是最典型的塊元素。

塊元素的特點:

1、比較霸道,自己獨佔一行

2、高度、寬度、外邊距以及內邊距 都可以控制。

3、寬度預設是容器(父級寬度)的100%

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

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

p標籤主要用於存放文字,因此p裡面不能放塊級元素,特別是不能放div

同理,h1~ h6 等都是文字類塊級標籤,裡面也不能其他塊級元素

行元素

常見的塊元素有 a 、strong 、b、em、i、del、s ins、u、span等,其中span標籤是最典型的行元素。有的地方也將行內元素稱為內聯元素。

行內元素的特點:

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

2、寬、高直接設定是無效的。

3、預設寬度就是它本身內容的寬度 。

4、行內元素只能容納文字或者其他行內元素。

注意:1、鏈結裡面不能在放鏈結

2、特殊情況鏈結 a 裡面可以放塊級元素,但是給 a 轉換一下塊級模式最安全

行內塊元素

在行內素中有幾個特殊的標籤—— img 、input、td ,他們同時具有塊元素和行內元素的特點。

有些資料稱他們為行內塊元素。

行內塊元素的特點:

和相鄰行內元素在一行上,但是他們之間會有空白縫隙。一行可以顯示多個。

預設寬度就是它本身內容寬度。

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

元素顯示模式轉換

特殊情況下,我們需要元素模式轉換,簡單理解:乙個模式的元素需要另外一種模式的特性,

比如想要增加鏈結 a 的觸發範圍。

css的元素顯示模式

什麼是元素的顯示模式?元素 標籤 以什麼方式進行顯示 元素顯示模式的分類 html元素一般分為塊元素和行內元素兩種型別 塊元素 ol 等是最經典的塊元素.特點 1.比較霸道 獨佔一行 2.寬.高,外邊距都可以控制 3.是乙個容器及盒子,可以放行內或者塊元素 文字類的元素內不能使用塊級元素 p標籤 存...

CSS 元素的顯示模式

元素顯示模式就是元素 標籤 以什麼方式進行顯示,比如div自己佔一行,span一行可以放多個。常見的塊元素有 常見的行內元素有 等,其中標籤是最典型的行內元素,有的地方也將行內元素稱為內聯元素。行內元素的特點 在行內元素中有幾個特殊的標籤 他們同時具有塊元素和行內元素的特點。行內塊元素的特點 元素顯...

CSS的元素顯示模式

一 什麼是元素顯示模式 網頁的標籤非常多,在不同地方會用到不同型別的標籤。了解他們的特點可以更好的布局我們的網頁 元素顯示模式就是元素 標籤 以什麼方式進行顯示。html元素一般分為塊元素和行內元素兩種型別 二 塊元素 常見的塊元素 塊級元素的特點 1 比較霸道,自己獨佔一行 2 高度 寬度 外邊距...