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
CSS 常用布局
1.寬度100 自適應視窗寬度 content content 只是定義了寬度為100 背景為白色與body色加以區分 footer footer 2.寬度100 最小定寬780px content content 只是定義了寬度為100 背景為白色與body色加以區分 這個布局中我們使用了min ...
css常用布局
單列布局長這個樣子，主要有兩種 普通單欄，通欄的單欄布局 比較簡單，設定 定寬 水平居中即可 頭部 內容尾部 執行結果鏈結描述 瀏覽器寬度超過960px時，外margin出現。當收縮瀏覽器寬度，小於960px時，margin為0，出現滾動條。執行結果鏈結描述 在header 和footer上再包裹一...
css常用布局
以下居中布局均以不定寬為前提，定寬情況包含其中 1 水平居中 a inline block text align tips 此方案相容性較好，可相容至ie8，對於ie567並不支援inline block，需要使用css hack進行相容 b table margin tips 此方案相容至ie8，...