css 布局對我來說，既熟悉又陌生。我既能實現它，又沒有很好的了解它。所以想總結一下，梳理一下 css 中常用的一列，兩列，三列布局等的實現方法。本文小白，僅供參考。但也要了解下浮動，定位等。
一、一列布局
1. 居中定寬
這算是最簡單且最容易實現的布局了吧。列出最核心的 css **：
body.head,.main,.footer
.main
.footer
其中，最主要的還是 margin 屬性，當為元素設定了寬度，margin:0 auto 就能自動讓元素居中。
2. 自適應
這個也非常簡單，只需要將上述 css **中元素的 width 屬性設定為百分比，這樣就能讓瀏覽器自動計算元素的寬度。
二、兩列布局
1. 定寬
這個應該也沒什麼難度，只需設定好相應的寬度就好了。這裡貼出**：
body.main
.left
.right
這裡涉及到了 float 屬性，也就是常說的浮動了。乙個向左浮動，乙個向右浮動，恰好能實現兩列布局。『
2. 自適應
將 width 屬性的值替換成百分比，就是這麼簡單。
body.main
.left
.right
注意：父元素也要設定成百分比。
三、三列布局
1. 左右定寬
body.main
.left
.right
這裡最主要的是用到了絕對定位，並且讓中間的 margin 左右為兩邊的寬度。
2. 自適應
body.main
.left
.right
同理，其換成百分比的形式。
四、混合布局
最後來個前面的大綜合。
head
left
middle
right
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，...