基于css 的div 網(wǎng)頁布局設(shè)計(jì)

3.2 浮動(dòng)布局

僅僅使用常規(guī)的流式布局只能實(shí)現(xiàn)垂直方向上的div 元素排列無法形成多種多樣的網(wǎng)絡(luò)布局結(jié)構(gòu)，此時(shí)浮動(dòng)布局就顯得尤為重要。浮動(dòng)布局可以形象的描述為每個(gè)div 元素塊就像浮動(dòng)在水面上，位置可以隨著水流方向的改變而改變。浮動(dòng)分為兩個(gè)方向左浮動(dòng)和右浮動(dòng)分別對(duì)應(yīng)屬性和屬性值為float：left /right。在同一行中的不同div 元素可以存在不同的浮動(dòng)，浮動(dòng)塊不會(huì)相互重疊。在不需要浮動(dòng)屬性時(shí)可以清除浮動(dòng)，浮動(dòng)布局可以使各部分排列有序，從而有利于對(duì)整體空間規(guī)劃。

當(dāng)三個(gè)相同大小的div 元素都設(shè)置向左浮動(dòng)的屬性時(shí)則出現(xiàn)如圖2 所示的情況：

圖2 全部左浮動(dòng)

當(dāng)沒有浮動(dòng)屬性時(shí)float：none 也是默認(rèn)設(shè)置網(wǎng)頁布局與圖1 相同。

當(dāng)?shù)撞縟iv 的浮動(dòng)屬性由float：left 改為float：right 時(shí)底部div 模塊會(huì)向右對(duì)齊。

當(dāng)div 排列在同一行時(shí)當(dāng)?shù)撞縟iv 的浮動(dòng)屬性被清除即clear：left 則底部div 將換行顯示，如圖3 。

圖3 底部清除浮動(dòng)

當(dāng)大小不一致的div 元素排列在同一行，不能完全顯示的div 會(huì)自動(dòng)換行，并在下一行的開頭顯示，如圖4。

圖4 底部換行顯示

在css 中加入float：left 使得三個(gè)div 層全部左移形成水平排列的效果。css 樣式表中的高度和寬度大小相同。

3.3 定位布局

3.3.1 靜態(tài)定位。position：static 如果代碼中不寫position 屬性相當(dāng)于寫上了position：static，元素在它原本的位置顯示，即使增加top、left 等屬性也不起作用。

3.3.2 相對(duì)定位與絕對(duì)定位。相對(duì)定位：podition：relative 是相對(duì)于原來位置進(jìn)行上下左右的移動(dòng)，且原來位置仍被占位。

絕對(duì)定位position：absolute 是相對(duì)于網(wǎng)頁左上角0 點(diǎn)來說，配合top、left、right、bottom 來進(jìn)行定位。若位于父層元素的下一層元素則是相對(duì)于父層元素來定位，前提是父層元素已經(jīng)定位。當(dāng)父層元素定位為絕對(duì)定位，子層元素相對(duì)于最近的父層元素發(fā)生改變。

當(dāng)Grandfather 層定位，fatehr 層進(jìn)行想對(duì)移動(dòng)之后，son 層相對(duì)于已經(jīng)定位的father 層進(jìn)行移動(dòng)，如圖5 所示。

圖5 絕對(duì)定位

解析：首先Grandfather 層div 設(shè)置position：absolute，此時(shí)Father 層的最近父層則為Grandfather 層，于是Father 層相對(duì)于Grandfather 層偏移。Father 層設(shè)置為position：absolute 之后Son層可以相對(duì)于Father 層進(jìn)行偏移。

4 結(jié)論

綜上所述，css+div 布局結(jié)構(gòu)存在著優(yōu)勢同時(shí)又存在著劣勢。但div+css 布局能夠成為主流主要是由于css 與div 將樣式與布局分離，避免改變樣式時(shí)需要大量的修改代碼。所以對(duì)于新手設(shè)計(jì)師來說需要將div+css 結(jié)構(gòu)掌握之后再進(jìn)行網(wǎng)頁設(shè)計(jì)，盡量避免定位不準(zhǔn)確的問題，掌握三種常用的布局方式對(duì)設(shè)計(jì)網(wǎng)頁有極大幫助。