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**，我覺得這樣的效率和效果都不好！

div css布局漫談

常用div css布局

Div CSS布局入門

使用div css布局

div css布局漫談

常用div css布局

Div CSS布局入門

使用div css布局

相關推薦