常用div css布局

1.css布局常用的方法：

float : none | left | right

取值：

none :  預設值。物件不飄浮 

left :  文字流向物件的右邊 

right :  文字流向物件的左邊 

它是怎樣工作的，看個一行兩列的例子 

xhtml:

這裡是第一列

這裡是第二列

css: 

#wrap

#column1

#column2

.clear 

position : static | absolute | fixed | relative

取值：

static :  預設值。無特殊定位，物件遵循html定位規則 

absolute :  將物件從文件流中拖出，使用 left ， right ， top ， bottom 等屬性相對於其最接近的乙個最有定位設定的父物件進行絕對定位。如果不存在這樣的父物件，則依據 body 物件。而其層疊通過 z-index 屬性定義 

fixed :  未支援。物件定位遵從絕對(absolute)方式。但是要遵守一些規範 

relative :  物件不可層疊，但將依據 left ， right ， top ， bottom 等屬性在正常文件流中偏移位置 

它來實現一行兩列的例子 

xhtml:

這裡是第一列

這裡是第二列

css:

#wrap

#column1

#column2 

他們的區別在哪?

顯然，float是相對定位的，會隨著瀏覽器的大小和解析度的變化而改變，而position就不行了，所以一般情況下還是float布局！ 

2.css常用布局例項

一列

單行一列

body 

#content  

兩行一列

body 

#content-top 

#content-end  

三行一列

body 

#content-top 

#content-mid 

#content-end  

兩列

單行兩列

#bodycenter 

#bodycenter #dv1 

#bodycenter #dv2  

兩行兩列

#header

#bodycenter 

#bodycenter #dv1 

#bodycenter #dv2  

三行兩列

#header

#bodycenter 

#bodycenter #dv1 

#bodycenter #dv2 

#footer 

三列

絕對定位

#left 

#middle 

#right  

float定位

xhtml:

這裡是第一列

這裡是第二列

這裡是第三列

css:

#wrap

#column

#column1

#column2

#column3

.clear 

float定位二

xhtml:

css:

body 

.column 

#center 

#left 

#right  

兩行三列

xhtml:

這裡是頂行

這裡是第一列

這裡是第二列

這裡是第三列

css:

#header

#wrap

#column

#column1

#column2

#column3

.clear 

三行三列

xhtml:

這裡是頂行

這裡是第一列

這裡是第二列

這裡是第三列

這裡是底部一行

css:

#header

#wrap

#column

#column1

#column2

#column3

.clear 

#footer 

ps:這裡列出的是常用的例子，而非研究之用，對一每個盒子，我都沒有設定margin,padding,boeder等屬性，是因為我個人覺得， 含有寬度定位的時候，最好不好用到他們，除非必不得已，因為如果不是這樣的話，解決瀏覽器相容問題，會讓你頭疼，而且產生一系列css**，我覺得這樣的 效率和效果都不好！ 

3.css布局高階技巧

margin和padding總是有可能要用到，而產生的問題如何解決呢？由於瀏覽器解釋容器寬度的方法不同： 

ie 6.0 firefox opera等是

真實寬度=width+padding+border+margin

ie5.x

真實寬度=width-padding-border-margin

很明顯，第一種下很完美的布局在第二種情況下後果是很悽慘的！ 

解決的方法是hack

div.content /""; //ie5.x/win忽略了"/"}/""後的內容

voice-family:inherit;

width:300px; //包括ie6/win在內的部分瀏覽器讀到這句，新的數值(300px)覆蓋掉了舊的

} html>body .content  

div.content  

html>body .content 

列等高技巧

n行n列布局，每列高度（事先並不能確定哪列的高度）的相同，是每個設計師追求的目標，做法有：背景圖填充、加js指令碼的

方法和容器溢位部分隱藏和列的負底邊界和正的內補丁相結合的方法。 

背景圖填充法：

xhtml:

這是第一列

這是第二列

css:

#wrap

#column1

#column2

.clear 

就是將乙個npx寬的一張在外部容器縱向重複，定位到兩列交錯的位置縱向重複，在視覺上產生了兩列高度一樣的錯覺

div css布局漫談

1.css布局常用的方法 float none left right 取值 none 預設值。物件不飄浮 left 文字流向物件的右邊 right 文字流向物件的左邊 它是怎樣工作的，看個一行兩列的例子 xhtml 這裡是第一列 這裡是第二列 css wrap column1 column2 cle...

Div CSS布局入門

頁面布局與規劃 在網頁製作中，有許多的術語，例如 css html dhtml xhtml等等。在下面的文章中我們將會用到一些有關於html的基本知識，而在你學習這篇入門教程之前，請確定你已經具有了一定的html基礎。下面我們就開始一步一步使用div css進行網頁布局設計吧。所有的設計第一步就是構...

使用div css布局

使用div css布局 1.如何實現固定寬度且居中的版式？container 這樣設定後在頁面的body中頂層放置乙個container層就能實現固定寬頻且居中的版式，頁面所有的內容都在這個層中。注意，這個container是最頂層，其他的所用層都要巢狀在這個層中。一般來說，將這個最頂層設定為絕對寬...