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