14 塊級元素和行內元素

2022-07-10 00:27:18 字數 783 閱讀 1536

學習的初期,我們就要知道,標準文件流等級森嚴。標籤分為兩種等級:

比如h1標籤和span,同時設定寬高,來看瀏覽器效果,那麼你會發現:

行內元素和塊級元素的區別:(非常重要)

行內元素:

塊級元素:

塊級元素和行內元素的分類:

在以前的html知識中,我們已經將標籤分過類,當時分為了:文本級、容器級。

從html的角度來講,標籤分為:

現在,從css的角度講,css的分類和上面的很像,就p不一樣:

我們可以通過display屬性將塊級元素和行內元素進行相互轉換。display即「顯示模式」。

塊級元素可以轉換為行內元素:

一旦,給乙個塊級元素(比如div)設定:

display: inline;
那麼,這個標籤將立即變為行內元素,此時它和乙個span無異。inline就是「行內」。也就是說:

行內元素轉換為塊級元素:

同樣的道理,一旦給乙個行內元素(比如span)設定:

display: block;
那麼,這個標籤將立即變為塊級元素,此時它和乙個div無異。block」是「塊」的意思。也就是說:

標準流裡面的限制非常多,導致很多頁面效果無法實現。如果我們現在就要併排、並且就要設定寬高,那該怎麼辦呢?辦法是:移民!脫離標準流

css中一共有三種手段,使乙個元素脫離標準文件流:

14 塊級元素和行內元素

學習的初期,我們就要知道,標準文件流等級森嚴。標籤分為兩種等級 比如h1標籤和span,同時設定寬高,來看瀏覽器效果,那麼你會發現 行內元素和塊級元素的區別 非常重要 行內元素 塊級元素 塊級元素和行內元素的分類 在以前的html知識中,我們已經將標籤分過類,當時分為了 文本級 容器級。從html的...

14 塊級元素和行內元素

14 塊級元素和行內元素 學習的初期,我們就要知道,標準文件流等級森嚴。標籤分為兩種等級 比如h1標籤和span,同時設定寬高,來看瀏覽器效果,那麼你會發現 行內元素和塊級元素的區別 非常重要 行內元素 塊級元素 塊級元素和行內元素的分類 在以前的html知識中,我們已經將標籤分過類,當時分為了 文...

行內元素 塊級元素和行內塊級元素

而標籤的屬性是可以轉換的 display inline 轉換為行內元素 display linline block 轉換為行內塊元素 display block 轉換為塊級元素。行內元素 無法設定寬高 margin和padding上下無效,只有左右有效果 總是和相鄰的行內元素在同一行上,預設排列方式...