我在[ CSS基礎學習十三：盒子模型](http://blog.csdn.net/erlian1992/article/details/49932943)的i博文只是闡釋了CSS盒子模型，并沒有過多的使用實例來演示。這篇博文就來做一些盒子模型知識的補充。這一部分對于網頁總體布局還是蠻重要的，過去大多數使用HTML中的table元素和框架標簽來進行網頁的整體布局，現在我們使用最多的是DIV+CSS網頁布局。所以一定要掌握好盒子模型，記住content，border，padding和margin各自在盒子中的作用和使用方式。
先來看一個完整元素的盒子模型實例：
~~~
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS盒子模型演示</title>
<style type="text/css">
/*去掉瀏覽器缺省設置*/
body {
padding:0px;
margin:0px;
}
/*設置盒子的寬度和高度以及邊框*/
div {
border:#FF0000 solid 2px;
width:300px;
height:200px;
}
#div_1 {
background-color:#00FF00;
padding:20px 50px;
}
#div_2 {
background-color:#0000FF;
margin:20px;
}
#div_3 {
background-color:#FF00FF;
}
</style>
</head>
<body>
<div id="div_1">第一個盒子</div>
<div id="div_2">第二個盒子</div>
<div id="div_3">第三個盒子</div>
</body>
</html></span>
~~~
運行的結果為：
我們會好奇哪些元素可以作為盒子模型？其實任何一個HTML標簽都可以盒子！但是盒子的類型是有區別的，我們重點討論這個問題，這就涉及到了display屬性。
? ? ?display屬性：
? ? ?設置元素的盒模型的類型，也就是行內元素和塊級元素的類型。
? ? ?經常可用的值：
? ? ?none 不顯示，隱藏
? ? ?inline 內聯元素(行內元素)
? ? ?block 塊級元素
? ? ?inline-block 行內塊級元素
? ? ?我們先來回憶哪些是塊級元素，行內元素
? ? ?HTML標簽分為兩大類：
1，塊級標簽(元素)：一個完整的區塊，區域。標簽結束后都有換行。常用標簽有：div p dl table ol ul title等。
2，行內標簽(元素)：用于塊級元素內，不能表示一個完整的區塊，一個區塊或者只是一行內的某一部分。標簽結束后沒有換行。常用標簽有：font span img input select a等。
下面我們舉例子來說明怎么使用display屬性：
實例一：給div元素和span元素設置相同的寬度和高度：
~~~
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS盒模型演示</title>
<style type="text/css">
div {
width:300px;
height:200px;
background-color:#0000FF;
}
span {
width:300px;
height:200px;
background-color:#FFFF00;
}
</style>
</head>
<body>
<div>div區域</div>
<hr/>
<span>span區域</span>
</body>
</html></span>
~~~
運行的結果為：
看上述的結果一目了然，div區域顯示寬度和高度，與文本內容的多少無關；而span區域不顯示設置寬度和高度，文本內容有多少它就有多少的寬度和高度，這就說明了div元素和span元素的盒子類型不一樣。
實例二：再增加一個span元素，設置同樣的高度和寬度，再把它的display屬性設置為：block
~~~
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS盒模型演示</title>
<style type="text/css">
div {
width:300px;
height:200px;
background-color:#0000FF;
}
span {
width:300px;
height:200px;
background-color:#FFFF00;
}
#span_2 {
width:300px;
height:200px;
background-color:#FFFF00;
display:block;/*把span設置成塊級元素*/
}
</style>
</head>
<body>
<div>div區域</div>
<hr/>
<span id="span_1">span區域1</span>
<hr/>
<span id="span_2">span區域2</span>
</body>
</html></span>
~~~
運行的結果為：
這一次我們看到了不一樣的兩個span元素，因為第二個span元素它通過display屬性設置為了塊級元素，所以高度和寬度都顯示了出來。
實例三：區別行內塊級元素和塊級元素
~~~
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS盒模型演示</title>
<style type="text/css">
div {
width:300px;
height:200px;
background-color:#0000FF;
}
span {
width:300px;
height:200px;
background-color:#FFFF00;
}
#span_2 {
width:300px;
height:200px;
background-color:#FFFF00;
display:block;/*把span設置成塊級元素*/
}
#span_3 {
width:300px;
height:200px;
background-color:#FFFF00;
display:inline-block;/*把span設置成行內塊級元素*/
}
</style>
</head>
<body>
<div>div區域</div>
<hr/>
<span id="span_1">span區域1</span>
<hr/>
<span id="span_2">span區域2</span>
<a>歡迎來到攻城課堂</a>
<hr/>
<span id="span_3">span區域3</span>
<a>歡迎來到攻城課堂</a>
</body>
</html></span>
~~~
運行的結果為：
行內塊級元素還是處于一行，它的右側還可以其他的元素；但是塊級元素就不可以，第二個元素必須換行才能顯示，這就是它們最直接的區別。
對于盒子模型的display屬性暫時了解了這么多，如果有什么錯誤，會及時更正！！后續會學到更深層次的知識，回頭來在進行補充。
- 前言
- HTML學習1：Dreamweaver8的安裝
- HTML學習2：初識HTML
- HTML學習3：常用標簽之文本標簽
- HTML學習4：常用標簽之列表標簽
- HTML學習5：常用標簽之圖像標簽
- HTML學習6：常用標簽之超鏈接標簽
- HTML學習7：常用標簽之表格標簽
- HTML學習8：常用標簽之框架標簽
- HTML學習9：常用標簽之表單標簽
- HTML學習10：表單格式化
- HTML學習11：HTTP 方法
- HTML學習12：其他常見標簽之頭標簽
- HTML學習13：其他常見標簽之體標簽
- 輕松學習JavaScript一：為什么學習JavaScript
- 輕松學習JavaScript二：JavaScript語言的基本語法要求
- 輕松學習JavaScript三：JavaScript與HTML的結合
- 輕松學習JavaScript四：JS點擊燈泡來點亮或熄滅這盞燈的網頁特效映射出JS在HTML中作用
- 輕松學習JavaScript五：JavaScript的變量和數據類型
- 輕松學習JavaScript六：JavaScript的表達式與運算符
- 輕松學習JavaScript七：JavaScript的流程控制語句
- 輕松學習JavaScript八：JavaScript函數
- 輕松學習JavaScript九：JavaScript對象和數組
- 輕松學習JavaScript十：JavaScript的Date對象制作一個簡易鐘表
- 輕松學習JavaScript十一：JavaScript基本類型(包含類型轉換)和引用類型
- 輕松學習JavaScript十二：JavaScript基于面向對象之創建對象(一)
- 輕松學習JavaScript十二：JavaScript基于面向對象之創建對象(二)
- 輕松學習JavaScript十三：JavaScript基于面向對象之繼承(包含面向對象繼承機制)
- 輕松學習JavaScript十四：JavaScript的RegExp對象(正則表達式)
- 輕松學習JavaScript十五：JavaScript之BOM簡介
- 輕松學習JavaScript十六：JavaScript的BOM學習(一)
- 輕松學習JavaScript十七：JavaScript的BOM學習(二)
- 輕松學習JavaScript二十九：JavaScript中的this詳解
- CSS基礎學習一：CSS概述
- CSS基礎學習二：如何創建 CSS
- CSS基礎學習三：CSS語法
- CSS基礎學習四：元素選擇器
- CSS基礎學習五：類選擇器
- CSS基礎學習六：id選擇器
- CSS基礎學習七：屬性選擇器
- CSS基礎學習八：派生選擇器
- CSS基礎學習九：偽類
- CSS基礎學習十：偽元素
- CSS基礎學習十一：選擇器的優先級
- CSS基礎學習十二：CSS樣式
- CSS基礎學習十三：盒子模型
- CSS基礎學習十四：盒子模型補充之display屬性設置
- CSS基礎學習十五：盒子模型補充之外邊距合并
- CSS基礎學習十六：CSS盒子模型補充之border-radius屬性
- CSS基礎學習十七：CSS布局之定位
- CSS基礎學習十八：CSS布局之浮動
- CSS基礎學習十九：CSS布局之圖文混排，圖像簽名，多圖拼接和圖片特效
- DIV+CSS實操一：經管系網頁總體模塊布局
- DIV+CSS實操二：經管系網頁添加導航欄和友情鏈接欄
- DIV+CSS實操三：經管系網頁內容模塊添加標題欄和版權信息模塊
- DIV+CSS實操四：經管系網頁內容模塊內容添加(一)
- DIV+CSS實操五：經管系網頁內容模塊內容添加(二)
- DIV+CSS實操六：經管系網頁添加導航欄下拉菜單
- DIV+CSS實操七：中文系內容模塊控制文本不換行和超出指定寬度后用省略號代替
- JS中實現字符串和數組的相互轉化