IV+CSS標(biāo)準(zhǔn)化布局的優(yōu)勢(shì)

使用“DIV+CSS”對(duì)網(wǎng)站進(jìn)行布局符合W3C標(biāo)準(zhǔn)，采用這種方式布局通常是為了說(shuō)明與HTML表格定位方式的區(qū)別。因?yàn)楝F(xiàn)在的網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，已經(jīng)不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。通過(guò)使用div盒子模型結(jié)構(gòu)將各部分內(nèi)容劃分到不同的區(qū)塊，然后用css來(lái)定義盒子模型的位置、大小、邊框、內(nèi)外邊距、排列方式等。簡(jiǎn)單地說(shuō)，div用于搭建網(wǎng)站結(jié)構(gòu)（框架）、css用于創(chuàng)建網(wǎng)站表現(xiàn)（樣式/美化）。該標(biāo)準(zhǔn)簡(jiǎn)化了HTML頁(yè)面代碼，獲得一個(gè)較優(yōu)秀的網(wǎng)站結(jié)構(gòu)，有利于日后網(wǎng)站維護(hù)、協(xié)同工作和便于搜索引擎抓取。當(dāng)然并不是所有的網(wǎng)頁(yè)都需要用div布局，例如數(shù)據(jù)頁(yè)面、報(bào)表之類(lèi)的頁(yè)面，還是使用HTML的表格會(huì)比較方便，web標(biāo)準(zhǔn)里并沒(méi)有說(shuō)要拋棄table。

DIV+CSS標(biāo)準(zhǔn)的優(yōu)點(diǎn)

• 表現(xiàn)和內(nèi)容相分離
• 代碼簡(jiǎn)潔，提高頁(yè)面瀏覽速度
• 易于維護(hù)和改版
• 提高搜索引擎對(duì)網(wǎng)頁(yè)的索引效率

各個(gè)瀏覽器之間的差異

• 安裝多種瀏覽器,對(duì)比差異進(jìn)行調(diào)試
• 在FF瀏覽器中安裝firebug

Firebug 為你的 Firefox 集成了瀏覽網(wǎng)頁(yè)的同時(shí)隨手可得的豐富開(kāi)發(fā)工具。你可以對(duì)任何網(wǎng)頁(yè)的 CSS、HTML 和 JavaScript 進(jìn)行實(shí)時(shí)編輯、調(diào)試和監(jiān)控

就算在不同的瀏覽器中效果不完全一致，也要做到大概一至

“無(wú)意義”的元素div和span

• HTML只是賦予內(nèi)容的手段，大部分HTML標(biāo)簽都有其意義（例如，標(biāo)簽p創(chuàng)建段落，h1標(biāo)簽創(chuàng)建標(biāo)題等等）的，然而div和span標(biāo)簽似乎沒(méi)有任何內(nèi)容上的意義，聽(tīng)起來(lái)就像一個(gè)泡沫做成的錘子一樣無(wú)用。但實(shí)際上，與CSS結(jié)合起來(lái)后，它們被用得十分廣泛。你所需要記住的是span和div是“無(wú)意義”的標(biāo)簽。它們的存在純粹是應(yīng)用樣式，所以當(dāng)樣式表失效時(shí)它就沒(méi)有任何的作用

• 它們被用來(lái)組合成一大塊的HTML代碼并賦予一定的信息，大部分用類(lèi)屬性class和標(biāo)識(shí)屬性id與元素聯(lián)系起來(lái)。span和div的不同之處在于span是內(nèi)聯(lián)的，用在一小塊的內(nèi)聯(lián)HTML中。而div（division）元素是塊級(jí)的（簡(jiǎn)單地說(shuō)，它等同于其前后有斷行），用于組合一大塊的代碼，為HTML 文檔內(nèi)大塊的內(nèi)容提供結(jié)構(gòu)和背景的元素，可以包含段落、標(biāo)題、表格甚至其他部分，這使div便于建立不同集成的類(lèi)。

• div的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來(lái)構(gòu)成這個(gè)塊的，其中所包含元素的特性由div標(biāo)簽的屬性來(lái)控制，或者是通過(guò)使用樣式表格式化這個(gè)塊來(lái)進(jìn)行控制。

盒子模型

每個(gè)HTML元素都可以看作一個(gè)裝了東西的盒子，盒子具有寬度（width）和高度（height），盒子里面的內(nèi)容到盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin）。

布局中的主要樣式

• font
• line-height
• color
• margin
• padding
• border
• text-align
• background

定位屬性

區(qū)塊屬性(區(qū)塊模型)

區(qū)塊框浮動(dòng)

雖然使用絕對(duì)定位可以實(shí)現(xiàn)頁(yè)面布局，但由于調(diào)整某個(gè)區(qū)塊框時(shí)其它區(qū)塊的位置并不會(huì)跟隨著改變，所以并不是布局的首選方式。而使用浮動(dòng)的區(qū)塊框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含它區(qū)塊的邊框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂２⑶矣捎诟?dòng)框不在文檔的普通流中，所以文檔的普通流中的區(qū)塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。

設(shè)置浮動(dòng)

行框和清理

在進(jìn)行頁(yè)面布局時(shí)，經(jīng)常需要設(shè)置多個(gè)區(qū)塊框并列在一行中排列。最常見(jiàn)的方式就是使用float屬性，再通過(guò)left或right值移動(dòng)區(qū)塊框向左或向右浮動(dòng)。但當(dāng)前面并列的多個(gè)區(qū)塊框總寬度不足包含框的100%時(shí)，就會(huì)在行框中留出一定的寬度，而下面的某個(gè)區(qū)塊框又恰好滿(mǎn)足這個(gè)寬度，則很可能會(huì)向上提，和上一行并列的區(qū)塊框在同一行排列。而這不并是我們想要的結(jié)果，所以可以使用clear屬性解決這一問(wèn)題，該屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應(yīng)該挨著浮動(dòng)框。

使用區(qū)塊框設(shè)計(jì)頁(yè)面布局

• 區(qū)塊居中設(shè)計(jì)

高度和寬度固定的區(qū)塊居中（position）

高度和寬度可變的區(qū)塊居中(margin)

• 布局頁(yè)面居中
• 設(shè)置兩列浮動(dòng)的布局
• 設(shè)置三列浮動(dòng)的布局
• 設(shè)置多列浮動(dòng)的布局

)CSS 標(biāo)準(zhǔn)盒子模型(Box Model)

在網(wǎng)頁(yè)中所有HTML元素可以看作盒子,在CSS中,"box model"術(shù)語(yǔ)是用來(lái)設(shè)計(jì)和布局時(shí)使用的;CSS盒模型本質(zhì)上是一個(gè)盒子,封裝周?chē)腍TML元素包括:外邊距(margin)邊框(border)內(nèi)邊距(padding)實(shí)際內(nèi)容(content)四個(gè)屬性,所以布局時(shí)每個(gè)元素所占的總寬高是這4個(gè)屬性的總和;比如寬度:總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

1.1Margin(外邊距)清除邊框外的區(qū)域,外邊距是透明的

1.2Border(邊框)圍繞在內(nèi)邊距和內(nèi)容外的邊框

1.3Padding(內(nèi)邊距)清除內(nèi)容周?chē)膮^(qū)域,內(nèi)邊距是透明的

1.4Content(內(nèi)容)盒子里填充的內(nèi)容比如文本,圖像等

根據(jù)盒子模型得出該元素的總寬度為:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一個(gè)寬度為100px的元素,此元素的總寬度必須小于等于100px

2)DIV+CSS布局

Div+CSS布局就是將網(wǎng)頁(yè)內(nèi)容用<div>分割為塊,之后使用css設(shè)置每個(gè)塊的大小,位置等

DIV+CSS布局最重要的是靈活運(yùn)用float(浮動(dòng))屬性,其值:1)left 2)right 3)both

clear屬性作用是清除浮動(dòng),其值為:1)left 2)right 3)both

因?yàn)閐iv是塊級(jí)元素,如果都沒(méi)有脫離文檔流div就會(huì)按照從上到下的順序放置

d2設(shè)置為右浮動(dòng)其他兩個(gè)div位置的變化:

1)d1沒(méi)有脫離文檔流會(huì)占據(jù)一行,所以d2只能浮動(dòng)到d1下面的右面如上圖所示

2)d2脫離文檔流,d3自動(dòng)填充到d2的位置

1)當(dāng)d1,d2都設(shè)置為右浮動(dòng)時(shí):因?yàn)閏ss中d1在d2上面先設(shè)置,因此d1在右側(cè),如果d2在d1上面先設(shè)置樣式,則d2在右側(cè),d1在左側(cè),自己測(cè)試不再截圖

2)當(dāng)d1,d2都設(shè)置為右浮動(dòng)時(shí):d3就會(huì)跑到上圖中d2的位置

3)如果3個(gè)div都設(shè)置左或右浮動(dòng),當(dāng)3個(gè)width加一起<=100%就會(huì)在第一行顯示(d1,d2,d3)

 <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 50%;
      height: 100px;
    }
  </style>

當(dāng)d2清除了左浮動(dòng),d3設(shè)置為右浮動(dòng),就會(huì)如上圖所示;如果d2清除的是右浮動(dòng),d2就會(huì)在d1上面,d3就會(huì)定位在d1下面的右面,自己測(cè)試不再截圖

當(dāng)d2清除了左浮動(dòng),如果想要d2緊挨著d1(與d1在一行上),可以通過(guò)position脫離文檔流設(shè)置其上下左右屬性使其定位在d1右側(cè),自己測(cè)試

<!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>
  <title>div+CSS布局</title>
  <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 30%;
      height: 100px;
      float:left; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 40%;
      height: 100px;
      clear: left;     
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 30%;
      height: 100px; 
      float: right; 
    }
  </style>
</head>
<body>
    <div id="d1"><span style="font-size: 50px;">d1</span></div>
    <div id="d2"><span style="font-size: 50px;">d2</span></div>
    <div id="d3"><span style="font-size: 50px;">d3</span></div>
  </body>
</html>

DIV+CSS布局綜合運(yùn)用position+上下左右屬性與float屬性為網(wǎng)頁(yè)進(jìn)行布局

注意:瀏覽器的兼容性問(wèn)題,特別是使用IE內(nèi)核的瀏覽器對(duì)W3C的規(guī)范不怎么遵守