09 CSS的三種顯示模式

2021-10-08 18:30:34 字數 1256 閱讀 4192

1、塊級元素

1)

、、都是典型的塊級元素;

2)特點(默寫)

[1]比較霸道,自己獨佔一行;

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

[3]若不給寬度–預設為父級標籤的款度;

[4]是乙個容器盒子,裡面還可以放別行級或者塊級的元素;

注:p標籤 、h標籤、dt標籤文字標籤元素盡量不要放別的塊級元素,尤其是div;

2、行內元素

1)、、、、、都是典型的行級元素;

2)特點

[1]一行可以放多個;

[2]寬、高直接設定無效;

[3]預設寬度為內容本身的款度;

[4]行內元素只能容納文字和其他行內元素(不能存放div);

注:a不可以存放a標籤元素,但是在特殊情況下可以存放塊元素;

3、行內塊元素

1)、、標籤是行內塊元素

2)特點:

[1]一行可以放置多個·,每個之間有乙個空白縫隙;

[2]寬度預設為其本身內容的寬度;

[3]高度、行高以及內外邊距都可以控制;

4、總結

元素模式

元素排列

設定樣式

預設寬度

包含塊級元素

一行只能放乙個

可設定高、寬以及內外邊距

預設為父級元素的寬度

包含任何標籤

行內元素

一行可以放多個

設定無效(不可設定)

預設為內容的寬度

包含文字或塊級標籤

行級塊元素

一行可以放多個

可設定高、寬以及內外邊距

預設為內容的寬度

5、三種模式相互轉換

1)塊級元素轉換為行內元素:display:inline;

2)行內元素轉換為塊級元素:displlay:block;

3)塊、行內元素轉換為行內塊元素:display:inline-block

6、舉例

我是塊級元素

我是塊級元素

我是行內元素

我是行內元素

""

CSS的三種布局模式

css常見的三種布局模式有 流動模型 flow 浮動模型 float 層模型 layer 1 塊狀元素自上而下占行 塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布,因為在預設狀態下,塊狀元素的寬度都為100 實際上,塊狀元素都會以行的形式佔據位置。2 行內元素從左到右 在流動模型下,內聯元...

Android系統的三種分屏顯示模式

vr系統中的分屏顯示與android原生支援的這種 分屏 顯示模式完全不同,它是要將同一應用的介面在螢幕左右兩邊同時同步顯示,如下圖所示。王者榮耀最火的那段時間,為了在vr一體機上玩這類傳統的2d遊戲,通過修改framework 實現了該功能,在一定程度上提高了vr一體機的可玩性。可以看到,andr...

CSS的三種定位

css的三種引用方式 相對定位 relative 絕對定位 absolute 固定定位 fixed 被看作普通流定位模型的一部分,定位元素的位置相對於它在普通流中的位置進行移動。使用相對定位的元素不管它是否進行移動,元素仍要佔據它原來的位置。移動元素會導致它覆蓋其他的框。lang en charse...