CSS中的顯示模式及模式之間的互相轉換

2021-07-25 03:48:00 字數 970 閱讀 8764

上一次介紹了css中的div和span標籤和二者在使用中的區別,本文介紹關於顯示模式和顯示模式之間的轉換。

接著div和span,二者引出兩個概念,塊級元素和行內元素。

塊級元素:獨佔一行,如果沒有設定寬高度,那麼預設和父元素一樣寬高,如果設定了寬高,那麼就按照設定來顯示。這個對於的是容器級標籤。

行內元素:不會獨佔一行,如果沒有設定高度和寬度,那麼預設和嗎、內容一樣寬,行內元素是不可以設定寬度和高度的。對於的是文本級標籤。

行內塊級元素:為了能夠讓元素既能夠不獨佔一行,又可以設定寬度和高度,在行內元素中前提高塊級元素,這樣就可以達到設定寬度和高度的目的。

display的常用取值:

block 塊級

inline 行內

inline-block 行內塊級

part1  塊和行內元素 預設顯示結果

make it possible!

nothing is impossible!

除錯結果:

顯示模式之間的轉換:

塊級和行內之間互相轉換位置:

make it possible!

nothing is impossible!

除錯結果:

行內塊元素:

nothing is impossible!

make it possible!

除錯結果:

css的顯示模式

1.在html中所有標籤分為兩類,一類是容器級標籤,另一類是文本級標籤 2.在css中所有標籤分為兩類,一類是塊級元素,另一類是行內元素 1.塊級元素會獨佔一行,而行內元素不會獨佔一行 2.容器級元素 div ul ol dl 文本級元素 p span huis stong ins em del 3...

CSS顯示模式

css顯示模式 塊元素 獨佔一行 高度,寬度,外邊距以及內邊距都能控制 寬度預設是100 是乙個容器及盒子,裡面可以放行內或者塊級元素 行內元素 一行可以顯示多個 寬高無法設定 預設高度是本身內容的寬度 行內元素只能容納文字或行內元素 行內塊元素 寬高可調 一行多個 預設高度是本身內容的寬度 css...

css標籤的顯示模式

塊級元素 block 常見的塊元素,等,最典型的就是div 特點 1 總是從新行開始 2 高度,行高,外邊距以及內邊距都可以控制 3 預設寬度是容器100 行內元素 inline 常見的行內元素,等,最典型的就是特點 1 高度,寬度設定不會顯示效果 2 預設的寬度就是本身內容的寬度 3 和相鄰行內元...