容器級和文本級元素

2021-10-05 13:57:35 字數 1318 閱讀 4134

div標籤

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

span標籤

作用: 一般用於配合css修改網頁中的一些區域性資訊

div和span有什麼區別

1.div會單獨的占領一行,而span不會單獨占領一行

2.div是乙個容器級的標籤, 而span是乙個文本級的標籤

容器級的標籤和文本級的標籤的區別

容器級的標籤中可以巢狀其它所有的標籤

容器級的標籤

div h ul ol dl li dt dd ...

文本級的標籤

span p buis strong em ins del ...

顯示模式

在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

行內元素

span buis strong em ins del

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

2.1塊級元素

獨佔一行

如果沒有設定寬度, 那麼預設和父元素一樣寬

如果設定了寬高, 那麼就按照設定的來顯示

2.2行內元素

不會獨佔一行

如果沒有設定寬度, 那麼預設和內容一樣寬

行內元素是不可以設定寬度和高度的

2.3行內塊級元素

為了能夠讓元素既能夠不獨佔一行, 又可以設定寬度和高度, 那麼就出現了行內塊級元素

模式轉換

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

設定元素的display屬性

2.display取值

block 塊級

inline 行內

inline-block 行內塊級

3.快捷鍵

di display: inline;

db display: block;

dib display: inline-block;

HTML容器標籤和文字標籤

html中的容器級標籤和文本級標籤,css中的塊級元素和行內元素是我們常常拿來比較的四個名詞 行內塊級暫時先不考慮 容器級的標籤可以簡單的理解為能巢狀其它所有標籤的標籤。常見容器級的標籤 div h ul ol dl li dt dd 常見文本級的標籤 span p buis strong em i...

HTML容器標籤和文字標籤

html中的容器級標籤和文本級標籤,css中的塊級元素和行內元素是我們常常拿來比較的四個名詞 行內塊級暫時先不考慮 注 如果標籤巢狀錯誤,可能會發生瀏覽器解析錯誤的情況,只是針對巢狀做的這個。1 容器級的標籤可以簡單的理解為能巢狀其它所有標籤的標籤。2 常見容器級的標籤 div h ul ol dl...

使塊級元素內的img和文字居中顯示

doctype html html head meta charset utf 8 title title style type text css box box img box span style head body div class box img src img video pic.png...