1、DIV+CSS定義及優勢
Div+css 是什么?
Div+css 是一種目前比較流行的網頁布局技術
Div 來存放需要顯示的數據(文字，圖表..) , css 就是用來指定怎樣顯示， 從而做到數據和顯示相互的效果
Div+css 優勢
- 表現和內容相分離
- 代碼簡潔，提高頁面瀏覽速度
- 易於維護和改版
- 提高搜索引擎對網頁的索引效率
我們可以簡單的這樣理解div+css:
div 是用於存放內容(文字,圖片,元素)的容器。
css 是用於指定放在div中的內容如何顯示,包括這些內容的位置和外觀.
2、“無意義”的HTML元素div和span
- HTML只是賦予內容的手段，大部分HTML標簽都有其意義（例如，標簽p創建段落，h1標簽創建標題等等）的，然而div和span標簽似乎沒有任何內容上的意義，聽起來就像一個泡沫做成的錘子一樣無用。但實際上，與CSS結合起來后，它們被用得十分廣泛。你所需要記住的是span和div是“無意義”的標簽。它們的存在純粹是應用樣式，所以當樣式表失效時它就沒有任何的作用
- 它們被用來組合成一大塊的HTML代碼並賦予一定的信息，大部分用類屬性class和標識屬性id與元素聯系起來。span和div的不同之處在於span是內聯的，用在一小塊的內聯HTML中。而div（division）元素是塊級的（簡單地說，它等同於其前后有斷行），用於組合一大塊的代碼，為HTML 文檔內大塊的內容提供結構和背景的元素，可以包含段落、標題、表格甚至其他部分，這使div便於建立不同集成的類。
- div的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由div標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制
3、頁面布局的盒子模型
（1）盒子模型的相關屬性
- margin（外邊距/邊界）
- border（邊框）
- padding（內邊距/填充 ）
我們看圖理解一下各屬性作用：
以上屬性又分為上、右、下、左四個方向
問題：頁面元素的寬度width、高度height如何計算？
答案：元素的實際占位尺寸 = 元素尺寸 + padding + 邊框寬度
比如：元素實際占位高度 = height屬性 + 上下padding + 上下邊框寬度
（2）盒模型的層次關系
我們通過一個經典的盒模型3D立體結構圖來理解，如圖：
從上往下看，層次關系如下：
第1層：盒子的邊框(border)，
第2層：元素的內容(content)、內邊距(padding)
第3層：背景圖(background-image)
第4層：背景色(background-color)
第5層：盒子的外邊距(margin)
從這個層次關系中可以看出，當同時設置背景圖和背景色時，背景
圖將在背景色的上方顯示
4、聲明盒子模型的CSS屬性
例如：
1 <html> 2 <head> 3 <title>盒子模型</title> 4 <style> 5 #box { /* ID為box的盒子模型 */ 6 width:200px; /* 盒子的寬度為200px */ 7 height:200px; /* 盒子的高度為200px */ 8 border:5px solid #ccc; /* 盒子邊框實線各邊寬5px */ 9 padding:10px; /* 盒子的4個內填充為10px */ 10 margin:20px; /* 盒子的4個外邊距為10px */ 11 } 12 </style> 13 </head> 14 <body> 15 <div id="box"> <!-- 使用DIV聲明一個盒子 --> 16 內容區 <!-- 盒子內容可再嵌套個盒子 --> 17 </div> 18 </body> 19 </html>
- 水平居中和垂直居中
水平居中包含兩種情況：
塊級元素的水平居中：margin:0px auto;
文字內容的水平居中：text-align: center;
垂直居中：
常見的單行文字的垂直居中可設置文字所在行的height與
行高樣式屬性一致，比如：
div{
width: 400px;
height: 400px;
line-height: 400px;/*行高與div高度一致*/
}
5、和頁面布局有關的CSS屬性
1 #box { /* 聲明ID選擇器，名稱為box */ 2 position:absolute; /* 設置層的定位為絕對定位 */ 3 top:30px; /* 層距離頂點縱向坐標的距離為30個像素 */ 4 left:100px; /* 層距離左點橫向坐標的距離為100個像素 */ 5 width:300px; /* 設置層的寬度為300個像素 */ 6 height:150px; /* 設置層的高度為150個像素 */ 7 overflow:auto; /* 當內容超出層的范圍時顯示滾動條 */ 8 z-index:1; /* 設置層的先后順序為覆蓋關系 */ 9 visibility:visible; /* 無論父層是否可見，子層都可見 */ 10 }
6、盒子區塊框的定位
層模型--絕對定位
如果想為元素設置層模型中的絕對定位，需要設置position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器窗口。
如下面代碼可以實現div元素相對於瀏覽器窗口向右移動100px，向下移動50px。
1 div{ 2 width:200px; 3 height:200px; 4 border:2px red solid; 5 position:absolute; 6 left:100px; 7 top:50px; 8 } 9 <div id="div1"></div>
效果如下：
層模型--相對定位
如果想為元素設置層模型中的相對定位，需要設置position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(並且元素像層一樣浮動了起來)，然后相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
如下代碼實現相對於以前位置向下移動50px，向右移動100px;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
效果圖：
什么叫做“偏移前的位置保留不動”呢？
大家可以做一個實驗，在右側代碼編輯器的19行div標簽的后面加入一個span標簽，在標並在span標簽中寫入一些文字。如下代碼：
<body>
<div id="div1"></div><span>偏移前的位置還保留不動，覆蓋不了前面的div沒有偏移前的位置</span>
</body>
效果圖：
從效果圖中可以明顯的看出，雖然div元素相對於以前的位置產生了偏移，但是div元素以前的位置還是保留着，所以后面的span元素是顯示在了div元素以前位置的后面。
層模型--固定定位
fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐標是視圖（屏幕內的網頁窗口）本身。由於視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，因此固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed;屬性功能相同。以下代碼可以實現相對於瀏覽器視圖向右移動100px，向下移動50px。並且拖動滾動條時位置固定不變。
1 #div1{ 2 width:200px; 3 height:200px; 4 border:2px red solid; 5 position:fixed; 6 left:100px; 7 top:50px; 8 } 9 <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> 10 .... 11
7、盒子模型的浮動布局
理解浮動屬性首先要搞清楚，什么是文檔流？
文檔流：瀏覽器根據元素在html文檔中出現的順序，
從左向右，從上到下依次排列
浮動屬性是CSS中的定位屬性，用法如下：
float: 浮動方向(left、right、none);
left為左浮動、right為右浮動、none是默認值表示不浮動
，設置元素的浮動，該元素將脫離文檔流，向左或向右移動
直到它的外邊距碰到父元素的邊框或另一個浮動元素的邊
框為止
浮動示例，沒有使用浮動的3個DIV：
HTML結構代碼：
<div id="first">第1塊div</div>
<div id="second">第2塊div</div>
<div id="third">第3塊div</div>
CSS樣式代碼：
#first, #second, #third{
width:100px;
height:50px;
border:1px #333 solid;
margin:5px;
}
執行效果如圖：
樣式中加入 float:left;
執行效果如圖：
你再修改為 float: right試試右浮動是什么效果
16、讓商品分類DIV、內容DIV和右側DIV並排放置
HTML結構代碼：
1 <div id="container"> 2 <div id="header">頂部（header）</div> 3 <div id="main"> 4 <div class="cat">商品分類(cat)</div> 5 <div class="content">內容(content)</div> 6 <div class="sidebar">右側(sidebar)</div> 7 </div> 8 <div id="footer">底部（footer）</div> 9 </div>
CSS樣式代碼(在第13節CSS代碼基礎上加入)：
1 .cat, .sidebar { 2 float:left; 3 width:20%; 4 height:100%; 5 } 6 .content { 7 float:left; 8 width:60%; 9 height:100%; 10 }
17、clear清除
clear只對塊級元素有效，表示如果前一個元素存在左浮動或右浮動，則換行
clear屬性的取值：rigth、left、both、none