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行內元素
不會獨佔一行
如果沒有設定寬度, 那麼預設和內容一樣寬
<a>行內元素是不可以設定寬度和高度的</a>

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中文網其它相關文章！

推薦閱讀：

iOS webView怎樣載入HTMLString

關於Regex的幾個小練習