首頁 > 文章 > web前端 > CSS的顯示模式如何使用

CSS的顯示模式如何使用

這次帶給大家CSS的顯示模式如何使用，使用CSS的顯示模式的注意事項有哪些，下面就是實戰案例，一起來看一下。

一.標籤補充 div 和s pan

1.什麼是div?

作用: 一般用來配合css完成網頁的基本佈局

2.什麼是span?

作用: 一般用來配合css修改網頁中的一些局部訊息

3.div和span有什麼差別?

3.1.div會單獨的佔領一行,而span不會單獨佔領一行

3.2.div是一個容器級的標籤, 而span是一個文本級的標籤

4 .容器層級的標籤和文字層級的標籤的區別?

容器層級的標籤中可以嵌套其它所有的標籤
文字層級的標籤中只能嵌套文字/圖片/超連結

容器層級的標籤

div h ul ol dl li dt dd ...

文字層級的標籤

span p buis strong em ins del ...

注意點:

哪些標籤是文字層級的哪些標籤是容器級的, 我們不用刻意去記憶, 在企業開發中一般情況下要嵌套都是嵌套在div中, 或者按照組標籤來嵌套

二. 元素的顯示模式

在HTML中HTML將所有的標籤分為兩類, 分別是容器級和文本級
在CSS中CSS也將所有的標籤分為兩類, 分別是塊級元素和行內元素

1.什麼是區塊級元素, 什麼是行內元素?

區塊級元素會獨佔一行
行內元素不會獨佔一行

容器級的標籤

div h ul ol dl li dt dd ...

文字層級的標籤

span p buis stong em ins del ...

區塊級元素

p div h ul ol dl li dt dd

行內元素 (所有的文字元素中除了p,都是行內元素)

#span buis strong em ins del

2.區塊級元素和行內元素的區別?

2.1區塊級元素
獨佔一行
如果沒有設定寬度, 那麼預設和父元素一樣寬
如果設定了寬高, 那麼就按照設定的來顯示

2.2行內元素
不會獨佔一行
如果沒有設定寬度, 那麼預設和內容一樣寬
行內元素是不可以設定寬度和高度的

2.3行內區塊級元素
為了能夠讓元素既能夠不獨佔一行, 又可以設定寬度和高度, 那麼就出現了行內區塊級元素(如:img標籤)

三CSS元素顯示模式轉換

1.如何轉換CSS元素的顯示模式?

設定元素的display屬性

2.display取值

block 區塊層級
inline 行內
inline-block 行內區塊層級

3.快捷鍵

di display: inline;
db display: block;
dib display: inline-block;

相信看了這篇文章案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！