CSS布局常用的方法：

float : none | left | right

取值：

none : 默認值。對象不飄浮

left : 文本流向?qū)ο蟮挠疫?/p>

right : 文本流向?qū)ο蟮淖筮?/p>

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

xhtml:以下是引用片段：

這里是第一列這里是第二列

CSS:以下是引用片段：

#wrap{?width:100%;?height:auto;}

#column1{?float:left;?width:40%;}

#column2{?float:right;?width:60%;}

.clear{?clear:both;}

position : static | absolute | fixed | relative

取值：

static : 默認值。無特殊定位，對象遵循HTML定位規(guī)則

absolute : 將對象從文檔流中拖出，使用 left ， right ， top ， bottom 等屬性相對于其最接近的一個最有定位設(shè)置的父對象進行絕對定位。如果不存在這樣的父對象，則依據(jù) body 對象。而其層疊通過 z-index 屬性定義

fixed : 未支持。對象定位遵從絕對(absolute)方式。但是要遵守一些規(guī)范

relative : 對象不可層疊，但將依據(jù) left ， right ， top ， bottom 等屬性在正常文檔流中偏移位置

它來實現(xiàn)一行兩列的例子

xhtml:以下是引用片段：

這里是第一列這里是第二列

CSS:以下是引用片段：

#wrap{?position:relative;/*相對定位*/width:770px;}

#column1{?position:absolute;?top:0;?left:0;?width:300px;}

#column2{position:absolute;?top:0;?right:0;?width:470px;}

他們的區(qū)別在哪?

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

2.CSS常用布局實例

一列

單行一列以下是引用片段：

body?{?margin:?0px;???padding:?0px;??text-align:?center;??}

#content?{??margin-left:auto;??margin-right:auto;??width:?400px;??}

兩行一列

以下是引用片段：

body?{??margin:?0px;???padding:?0px;???text-align:?center;}

#content-top?{?margin-left:auto;???margin-right:auto;?width:?400px;??}

#content-end?{margin-left:auto;?margin-right:auto;??width:?400px;???}

三行一列

以下是引用片段：

body?{??margin:?0px;?padding:?0px;??text-align:?center;??}

#content-top?{??margin-left:auto;??margin-right:auto;??width:?400px;???width:?370px;??}

#content-mid?{?margin-left:auto;?margin-right:auto;??width:?400px;???}

#content-end?{?margin-left:auto;?margin-right:auto;?width:?400px;???}

兩列

單行兩列

以下是引用片段：

#bodycenter?{?width:?700px;margin-right:?auto;?margin-left:?auto;overflow:?auto;??}

#bodycenter?#dv1?{float:?left;width:?280px;}

#bodycenter?#dv2?{float:?right;width:?420px;}

兩行兩列以下是引用片段：

#header{????width:?700px;?margin-right:?auto;margin-left:?auto;?overflow:?auto;}

#bodycenter?{?width:?700px;?margin-right:?auto;?margin-left:?auto;?overflow:?auto;?}

#bodycenter?#dv1?{?float:?left;?width:?280px;}

#bodycenter?#dv2?{?float:?right;width:?420px;}

三行兩列以下是引用片段：

#header{????width:?700px;margin-right:?auto;?margin-left:?auto;??}

#bodycenter?{width:?700px;?margin-right:?auto;?margin-left:?auto;??}

#bodycenter?#dv1?{??float:?left;width:?280px;}

#bodycenter?#dv2?{?float:?right;??width:?420px;}

#footer{?????width:?700px;??margin-right:?auto;?margin-left:?auto;??overflow:?auto;?clear:both;?}

三列

單行三列

絕對定位

以下是引用片段：

#left?{?position:?absolute;?top:?0px;??left:?0px;?width:?120px;??}

#middle?{margin:?0px?190px?0px?190px;?}

#right?{position:?absolute;top:?0px;?right:?0px;??width:?120px;}

float定位

xhtml:以下是引用片段：

這里是第一列這里是第二列這里是第三列

CSS:以下是引用片段：

#wrap{?width:100%;?height:auto;}

#column{?float:left;?width:60%;}

#column1{?float:left;?width:30%;}

#column2{?float:right;?width:30%;}

#column3{?float:right;?width:40%;}

.clear{?clear:both;}

float定位二

xhtml以下是引用片段：

This?is?the?main?content.

This?is?the?left?sidebar.

This?is?the?right?sidebar.

CSS

以下是引用片段：

body?{

margin:?0;

padding-left:?200px;????/*?LC?fullwidth?*/

padding-right:?190px;???/*?RC?fullwidth?+?CC?padding?*/

min-width:?200px;???????/*?LC?fullwidth?+?CC?padding?*/

}

.column?{

position:?relative;

float:?left;

}

#center?{

width:?100%;

}

#left?{

width:?200px;???????????/*?LC?width?*/

right:?200px;???????????/*?LC?fullwidth?*/

margin-left:?-100%;

}

#right?{

width:?190px;???????????/*?RC?width?*/

margin-right:?-100%;

}

/***?IE?Fix?***/

*?html?#left?{

left:?190px;????????????/*?RC?fullwidth?*/

}兩行三列

xhtml:以下是引用片段：

這里是頂行這里是第一列這里是第二列這里是第三列

CSS:以下是引用片段：

#header{width:100%;?height:auto;}

#wrap{?width:100%;?height:auto;}

#column{?float:left;?width:60%;}

#column1{?float:left;?width:30%;}

#column2{?float:right;?width:30%;}

#column3{?float:right;?width:40%;}

.clear{?clear:both;}

三行三列

xhtml:以下是引用片段：

這里是頂行這里是第一列這里是第二列這里是第三列這里是底部一行CSS:

以下是引用片段：

#header{width:100%;?height:auto;}

#wrap{?width:100%;?height:auto;}

#column{?float:left;?width:60%;}

#column1{?float:left;?width:30%;}

#column2{?float:right;?width:30%;}

#column3{?float:right;?width:40%;}

.clear{?clear:both;}

#footer{width:100%;?height:auto;}

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

3.CSS布局高級技巧

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

IE 6.0 Firefox Opera等是

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

IE5.X

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

IE中有浮動對象的雙倍距離之BUG(IE Doubled Float-Margin Bug ), 這里還需要具體問題具體解決，下面是解決辦法

www.forest53.com/tutorials/tutorials_show.asp?id=31

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

解決的方法是hack

以下是引用片段：

div.content?{

width:400px;?//這個是錯誤的width，所有瀏覽器都讀到了

voice-family:?"\"}\"";?//IE5.X/win忽略了"\"}\""后的內(nèi)容

voice-family:inherit;

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

}

html>body?.content?{?//html>body是CSS2的寫法

width:300px;?//支持CSS2該寫法的瀏覽器(非IE5)有幸讀到了這一句

}

div.content?{

width:300px?!important;?//這個是正確的width，大部分支持!important標記的瀏覽器使用這里的數(shù)值

width(空格)/**/:400px;?//IE6/win不解析這句，所以IE6/win仍然認為width的值是300px；而IE5.X/win讀到這句，新的數(shù)值(400px)覆蓋掉了舊的，因為!important標記對他們不起作用

}

html>body?.content?{?//html>body是CSS2的寫法

width:300px;?//支持CSS2該寫法的瀏覽器有幸讀到了這一句

}

列等高技巧

n行n列布局，每列高度(事先并不能確定哪列的高度)的相同，是每個設(shè)計師追求的目標，做法有：背景圖填充、加JS腳本的

方法和容器溢出部分隱藏和列的負底邊界和正的內(nèi)補丁相結(jié)合的方法。

背景圖填充法：

xhtml:以下是引用片段：

這是第一列這是第二列

css:

以下是引用片段：

#wrap{?width:776px;?background:url(bg.gif)?repeat-y?300px;}

#column1{?float:left;?width:300px;}

#column2{?float:right;?width:476px;}

.clear{?clear:both;}

就是將一個npx寬的一張圖片在外部容器縱向重復(fù)，定位到兩列交錯的位置縱向重復(fù)，在視覺上產(chǎn)生了兩列高度一樣的錯覺

總結(jié)

以上是生活随笔為你收集整理的简述css布局技术的特点,div+css布局技术漫谈的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。