Div和Span標簽

Div: 一般用于配合css完成網(wǎng)頁的基本布局
Span: 一般用于配合css修改網(wǎng)頁中的一些局部信息

div和span有什么區(qū)別?
1.div會單獨的占領(lǐng)一行,而span不會單獨占領(lǐng)一行
2.div是一個容器級的標簽, 而span是一個文本級的標簽

容器級的標簽和文本級的標簽的區(qū)別?
容器級的標簽中可以嵌套其它所有的標簽
常見容器級的標簽: div h ul ol dl li dt dd ...
文本級的標簽中只能嵌套文字/圖片/超鏈接
常見文本級的標簽:span p buis strong em ins del ...

注意點:
不用刻意去記憶哪些標簽是文本級的哪些標簽是容器級, 在企業(yè)開發(fā)中一般情況下要嵌套都是嵌套在div中, 或者按照組標簽來嵌套(ul>li, ol>li , dl>dt+dd)

CSS元素顯示模式

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

什么是塊級元素, 什么是行內(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)元素: span buis strong em ins del

塊級元素和行內(nèi)元素的區(qū)別?
塊級元素： 1. 獨占一行
2. 如果沒有設(shè)置寬度, 那么默認和父元素一樣寬
3. 如果設(shè)置了寬高, 那么就按照設(shè)置的來顯示

行內(nèi)元素: 1. 不會獨占一行
2. 如果沒有設(shè)置寬度, 那么默認和內(nèi)容一樣寬
3. 行內(nèi)元素是不可以設(shè)置寬度和高度的

行內(nèi)塊級元素
1. 為了能夠讓元素既能夠不獨占一行, 又可以設(shè)置寬度和高度, 那么就出現(xiàn)了行內(nèi)塊級元素
2. 不獨占一行, 并且可以設(shè)置寬高

轉(zhuǎn)換CSS元素的顯示模式方法：設(shè)置元素的display屬性

display取值： block 塊級； inline 行內(nèi)； inline-block 行內(nèi)塊級

快捷鍵：
di ? ? ?display: inline;
db ? ? display: block;
dib ? ?display: inline-block