CSS顯示模式

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è)置寬高

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

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

display取值: block 塊級; inline 行內(nèi); inline-block 行內(nèi)塊級

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容