CSS基礎學習十四：盒子模型補充之display屬性設置_html/css

就來做一些盒子模型知識的補充。這一部分對于網(wǎng)頁總體布局還是蠻重要的，過去大多數(shù)使用HTML中的table元素和

框架標簽來進行網(wǎng)頁的整體布局，現(xiàn)在我們使用最多的是DIV+CSS網(wǎng)頁布局。所以一定要掌握好盒子模型，記住

content，border，padding和margin各自在盒子中的作用和使用方式。

先來看一個完整元素的盒子模型實例：

第一個盒子第二個盒子第三個盒子

我們會好奇哪些元素可以作為盒子模型？其實任何一個HTML標簽都可以盒子！但是盒子的類型是有區(qū)別的，我

們重點討論這個問題，這就涉及到了display屬性。

display屬性：

設置元素的盒模型的類型，也就是行內(nèi)元素和塊級元素的類型。

經(jīng)?？捎玫闹担?/p>

none 不顯示，隱藏

inline 內(nèi)聯(lián)元素(行內(nèi)元素)

block 塊級元素

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

我們先來回憶哪些是塊級元素，行內(nèi)元素

HTML標簽分為兩大類：

1塊級標簽(元素)：一個完整的區(qū)塊，區(qū)域。標簽結束后都有換行。常用標簽有：div p dl table ol ul title等。

2行內(nèi)標簽(元素)：用于塊級元素內(nèi)，不能表示一個完整的區(qū)塊，一個區(qū)塊或者只是一行內(nèi)的某一部分。標簽結

束后沒有換行。常用標簽有：font span img input select a等。

下面我們舉例子來說明怎么使用display屬性：

實例一：給div元素和span元素設置相同的寬度和高度：

 div區(qū)域 
 span區(qū)域

看上述的結果一目了然，div區(qū)域顯示寬度和高度，與文本內(nèi)容的多少無關；而span區(qū)域不顯示設置寬度和高度，

文本內(nèi)容有多少它就有多少的寬度和高度，這就說明了div元素和span元素的盒子類型不一樣。

實例二：再增加一個span元素，設置同樣的高度和寬度，再把它的display屬性設置為：block

 div區(qū)域 
 span區(qū)域1 
 span區(qū)域2

運行的結果為：

這一次我們看到了不一樣的兩個span元素，因為第二個span元素它通過display屬性設置為了塊級元素，所以高度

和寬度都顯示了出來。

實例三：區(qū)別行內(nèi)塊級元素和塊級元素

 div區(qū)域	 
	 span區(qū)域1	 
	 span區(qū)域2	 歡迎來到攻城課堂	 
	 span區(qū)域3	 歡迎來到攻城課堂

行內(nèi)塊級元素還是處于一行，它的右側還可以其他的元素；但是塊級元素就不可以，第二個元素必須換行才能顯

示，這就是它們最直接的區(qū)別。

對于盒子模型的display屬性暫時了解了這么多，如果有什么錯誤，會及時更正??！后續(xù)會學到更深層次的知識，

回頭來在進行補充。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com