一. 標簽補充 div 和s pan

1.什么是div?

作用: 一般用于配合css完成網(wǎng)頁的基本布局

2.什么是span?

作用: 一般用于配合css修改網(wǎng)頁中的一些局部信息

3.div和span有什么區(qū)別?

• 3.1.div會單獨的占領(lǐng)一行,而span不會單獨占領(lǐng)一行
• 3.2.div是一個容器級的標簽, 而span是一個文本級的標簽

4.容器級的標簽和文本級的標簽的區(qū)別?

容器級的標簽中可以嵌套其它所有的標簽
文本級的標簽中只能嵌套文字/圖片/超鏈接

容器級的標簽

div h ul ol dl li dt dd ...

文本級的標簽

span p buis strong em ins del ...

注意點:

哪些標簽是文本級的哪些標簽是容器級的, 我們不用刻意去記憶, 在企業(yè)開發(fā)中一般情況下要嵌套都是嵌套在div中, 或者按照組標簽來嵌套

二. 元素的顯示模式

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

1.什么是塊級元素, 什么是行內(nèi)元素?

塊級元素會獨占一行
行內(nèi)元素不會獨占一行

容器級的標簽

div h ul ol dl li dt dd ...

文本級的標簽

span p buis stong em ins del ...

塊級元素

p div h ul ol dl li dt dd

行內(nèi)元素 (所有的文本元素中除了p,都是行內(nèi)元素)

span buis strong em ins del

2.塊級元素和行內(nèi)元素的區(qū)別?

• 2.1塊級元素
  獨占一行
  如果沒有設(shè)置寬度, 那么默認和父元素一樣寬
  如果設(shè)置了寬高, 那么就按照設(shè)置的來顯示
• 2.2行內(nèi)元素
  不會獨占一行
  如果沒有設(shè)置寬度, 那么默認和內(nèi)容一樣寬
  <a>行內(nèi)元素是不可以設(shè)置寬度和高度的</a>
• 2.3行內(nèi)塊級元素
  為了能夠讓元素既能夠不獨占一行, 又可以設(shè)置寬度和高度, 那么就出現(xiàn)了行內(nèi)塊級元素 (如:img標簽)

三 CSS元素顯示模式轉(zhuǎn)換

1.如何轉(zhuǎn)換CSS元素的顯示模式?

設(shè)置元素的display屬性

2.display取值

block 塊級
inline 行內(nèi)
inline-block 行內(nèi)塊級

3.快捷鍵

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