一、<div>概述
<div>簡(jiǎn)單而言是一個(gè)區(qū)塊容器標(biāo)記，即<div>與</div>之間相當(dāng)于一個(gè)容器，可以容納段落、標(biāo)題、表格、圖片，乃至章節(jié)、摘要和備注等各種HTML元素。因此，可以把<div>與</div>中的內(nèi)容視為一個(gè)獨(dú)立的對(duì)象，用于CSS的控制。聲明時(shí)只需要對(duì)<div>進(jìn)行相應(yīng)的控制，其中的各標(biāo)記元素都會(huì)因此而改變。
二、<div>和<span>的相同點(diǎn)
<span>標(biāo)記與<div>標(biāo)記一樣，作為容器標(biāo)記而被廣泛應(yīng)用在HTML語言中。在<span>與</span>中間同樣可以容納各種HTML元素，從而形成獨(dú)立的對(duì)象。如，在上例中如果把“<div>”換成“<span>”，執(zhí)行后也會(huì)發(fā)現(xiàn)效果完全一樣?？梢哉f<div>與<span>這兩個(gè)標(biāo)記起到的作用都是獨(dú)立出各個(gè)區(qū)塊，在這個(gè)意義上二者沒有太多的不同。如下圖：
<head>
<title>div 標(biāo)記范例</title>
<style type="text/css">
<!--
div{
font-size:18px; /* 字號(hào)大小 */
font-weight:bold; /* 字體粗細(xì) */
font-family:Arial; /* 字體 */
color:#FF0000; /* 顏色 */
background-color:#FFFF00; /* 背景顏色 */
text-align:center; /* 對(duì)齊方式 */
width:300px; /* 塊寬度 */
height:100px; /* 塊高度 */
}
-->
</style>
</head>
<body>
<div>
這是一個(gè)div標(biāo)記
</div>
</body>
三、<div>與<span>的區(qū)別
<div>與<span>的區(qū)別在于，<div>是一個(gè)塊級(jí)元素，它包圍的元素會(huì)自動(dòng)換行，而<span>僅僅是一個(gè)行內(nèi)元素，在它的前后不會(huì)換行。<span>沒有結(jié)構(gòu)上的意義，純粹是應(yīng)用樣式，當(dāng)其他行內(nèi)元素都不合適時(shí)，就可以使用<span>元素。
此外，<span>標(biāo)記可以包含于<div>標(biāo)記之中，成為它的子元素，而反過來則不成立，即<span>標(biāo)記不能包含<div>標(biāo)記。
<html>
<head>
<title>div與span的區(qū)別</title>
</head>
<body>
<p>div標(biāo)記不同行：</p>
<div><img src="building.jpg" border="0"></div>
<div><img src="building.jpg" border="0"></div>
<div><img src="building.jpg" border="0"></div>
<p>span標(biāo)記同一行：</p>
<span><img src="building.jpg" border="0"></span>
<span><img src="building.jpg" border="0"></span>
<span><img src="building.jpg" border="0"></span>
</body>
</html>
四、盒子模型
盒子模型是CSS控制頁面時(shí)一個(gè)很重要的概念。只有很好地掌握了盒子模型以及其中每個(gè)元素的用法，才能真正地控制頁面中各元素的位置。
1、盒子模型的概念
所有頁面中的元素都可以看成是一個(gè)盒子，占據(jù)著一定的頁面空間。一般來說這些被占據(jù)的空間往往都要比單純的內(nèi)容要大。換句話說，可以通過調(diào)整盒子的邊框和距離等參數(shù)，來調(diào)節(jié)盒子的位置。
一個(gè)盒子模型由content（內(nèi)容）、border（邊框）、padding（間隙）和margin（間隔）這4個(gè)部分組成。
如果將盒子模型比作展覽館里展出的一幅幅畫，那么content就是畫面本身，padding就是畫面與
畫框之間的留白，border就是畫框，而margin就是畫與畫之間的距離。
2、border、padding、margin屬性
（1）border
border一般用于分離元素，border的外圍即為元素的最外圍，因此計(jì)算元素實(shí)際的寬和高時(shí)，就要將border納入。
border主要有3個(gè)屬性，分別是color（顏色）、 width（粗細(xì)）、 style（樣式）。
<html>
<head>
<title>border-style</title>
<style type="text/css">
<!--
div{
border-width:6px;
border-color:#000000;
margin:20px; padding:5px;
background-color:#FFFFCC;
}
</style>
</head>
<body>
<div style="border-style:dashed">The border-style of dashed.</div>
<div style="border-style:dotted">The border-style of dotted.</div>
<div style="border-style:double">The border-style of double.</div>
<div style="border-style:groove">The border-style of groove.</div>
<div style="border-style:inset">The border-style of inset.</div>
<div style="border-style:outset">The border-style of outset.</div>
<div style="border-style:ridge">The border-style of ridge.</div>
<div style="border-style:solid">The border-style of solid.</div>
</body>
</html>
如果希望在某段文字結(jié)束后加上虛線用于分割，而不是用border將整段話框起來，可以通過單獨(dú)設(shè)置border-bottom來完成。
<html>
<head>
<title>border-bottom的運(yùn)用</title>
</head>
<body>
<p style="border-bottom: 8px dotted blue;">
We can read of things that happened 5,000 years ago in the Near East, where people first learned to write. But there are some parts of the world where even now people cannot write. The only way that they can preserve their history is to recount it as sagas.
</p>
<p>Next paragraph</p>
</body>
</html>
（2）padding
padding用于控制content與border之間的距離。
修改上例，加入padding-bottom的語句，則顯示效果為：
<html>
<head>
<title>padding-bottom的運(yùn)用</title>
</head>
<body>
<p style="border-bottom: 8px dotted blue; padding-bottom: 30px;">
We can read of things that happened 5,000 years ago in the Near East, where people first learned to write. But there are some parts of the world where even now people cannot write. The only way that they can preserve their history is to recount it as sagas.
</p>
<p>Next paragraph</p>
</body>
</html>
（3）margin
margin指的是元素與元素之間的距離。
修改上例，加入margin-bottom的語句，則顯示效果為：
<html>
<head>
<title>margin-bottom的運(yùn)用</title>
</head>
<body>
<p style="border-bottom: 8px dotted blue; padding-bottom: 30px; margin-bottom: 60px;">
We can read of things that happened 5,000 years ago in the Near East, where people first learned to write. But there are some parts of the world where even now people cannot write. The only way that they can preserve their history is to recount it as sagas.
</p>
<p>Next paragraph</p>
</body>
</html>
五、元素的定位
網(wǎng)頁中各元素都必須有自己合理的位置，從而搭建出整個(gè)頁面的結(jié)構(gòu)。下面我們圍繞CSS定位的幾種原理方法，進(jìn)行介紹，包括position、float和Z-index等。這里的定位不用<table>進(jìn)行排版，而是用CSS的方法對(duì)頁面中塊元素的定位。
1、float定位
float定位是CSS排版中非常重要的手段，如前面學(xué)過的“首字放大”、“文字環(huán)繞圖片”等其實(shí)都用了float定位的思想。屬性float的值其實(shí)很簡(jiǎn)單，可以設(shè)置為left、right或者默認(rèn)值none。當(dāng)設(shè)置了元素向左或者向右浮動(dòng)時(shí)，元素會(huì)向其父的左側(cè)或右側(cè)靠緊。
<html>
<head>
<title>float屬性</title>
<style type="text/css">
body{
margin:15px;
font-family:Arial;
font-size:12px;
}
.father{
background-color:#fffea6;
border:1px solid #111111;
padding:25px; /* 父塊的padding */
}
.son1{
padding:10px; /* 子塊son1的padding */
margin:5px; /* 子塊son1的margin */
background-color:#70baff;
border:1px dashed #111111;
float:left; /* 塊son1左浮動(dòng) */
}
.son2{
padding:5px;
margin:0px;
background-color:#ffd270;
border:1px dashed #111111;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">float1</div>
<div class="son2">float2</div>
</div>
</body>
</html>
當(dāng)沒有設(shè)置塊son1向左浮動(dòng)前，頁面效果如下：
分析：結(jié)合盒子模型單獨(dú)分析son1，在設(shè)置float為left之前，它的寬度撐滿了整個(gè)父塊，空隙僅僅為父塊的padding和它自己的margin。而設(shè)置了float為left后，塊son1的寬度僅僅為它的內(nèi)容本身加上自己的padding。
塊son1浮動(dòng)到最左端的位置是父塊的padding-left加上自己的margin-left，而不是父塊的邊界border。
由于子塊son1向左浮動(dòng)，對(duì)于父塊而言它的內(nèi)容就已經(jīng)不屬于父塊了，因此父塊的高度變短，同時(shí)子塊son2向上移動(dòng)。
這個(gè)屬性可以應(yīng)用于下拉菜單等。
練習(xí)一：制作以下網(wǎng)頁：
<head>
<title>float屬性</title>
<style type="text/css">
<!--
body{
margin:15px;
font-family:Arial;
font-size:12px;
}
.father{
background-color:#fffea6;
border:1px solid #111111;
padding:25px; /* 父塊的padding */
}
.son1{
padding:5px;
margin-right:3px; /* 子塊son1的右margin */
background-color:#70baff;
border:1px dashed #111111;
float:left; /* 子塊son1向左浮動(dòng) */
}
.son2{
padding:5px;
background-color:#ffd270;
border:1px dashed #111111;
float:left; /* 子塊son2也向左浮動(dòng) */
width:60%;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">float1</div>
<div class="son2">CSS（Cascading Style Sheet），中文譯為層疊樣式表，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。</div>
</div>
</body>
SpringSide開發(fā)實(shí)戰(zhàn)（三）：漫談CSS和頁面布局http://www.blogjava.net/youxia/archive/2006/12/26/90112.html
相對(duì)定位的元素是會(huì)占據(jù)文檔流空間的，這里的div2就是典型的“站著茅坑不拉屎”。
使用絕對(duì)定位也是可以把div2擺到div1的右邊的，而且絕對(duì)定位是不會(huì)占據(jù)文檔流空間的
