一些布局：
- 行布局
- 多列布局
- 聖杯布局
- 雙飛翼布局
會使用到：html和css基礎；會使用div + css進行排版；熟悉 float屬性、position屬性。
（1） 經典的行布局
+ 基礎的行布局
+ 行布局自適應
+ 行布局自適應限制最大寬
+ 行布局垂直水平居中
.container水平與垂直居中：
.container2
.container2
乙個平常的行布局：
這是頁面的頭部
這是頁面的banner圖
這是頁面的內容
這是頁面的底部
（2） 經典的列布局
+ 兩列布局固定
+ 兩列布局自適應
+ 三列布局固定
+ 三列布局自適應
兩列布局（三列的話，也是用float屬性，調整一下width就可以）：
這是頁面左側
這是頁面右側
（3） 混合布局
混合布局固定
混合布局自適應
這是頭部
左邊右邊
這是頁面的底部
（3） 聖杯布局
是一種三列布局，是由國外的kevin cornell提出的乙個布局模型概念，在國內由**ued的工程師傳播開來。
布局要求
- 三列布局，中間寬度自適應，兩邊定寬
- 中間欄在瀏覽器中優先展示渲染（需要在寫div框架的時候先寫中間欄）
- 允許任意列的高度最高
- 用最簡單的css、最少的hack語句
這是頭部
middle
中間left
左邊right
右邊這是頁面的底部
對聖杯布局改良後得到的布局，其去掉了相對布局（relative）,只需要浮動和負邊距。
header
main
中間部分
sub左邊 extra
右邊 這是頁面的底部
CSS 網頁布局
頭部區域位於整個網頁的頂部，一般用於設定網頁的標題或者網頁的 logo 鏈結鏈結 鏈結 重置瀏覽器大小檢視效果。鏈結鏈結 鏈結學的不僅是技術，更學的不僅是技術，更是夢想！學的不僅是技術，更是夢想！學的不僅是技術，更是夢想！學的不僅是技術，更是學的不僅是技術，更是夢想 學的不僅是技術，更是夢想！學的不...
CSS網頁布局
本文作為個人筆記，內容大多從網上查閱 提到布局就不得不提一提標準文件流了 文件流指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。並最終窗體自上而下分成一行行，並在每行中從左至右的順序排放元素。標準流的微觀現像 1.空白摺疊現象 多個空格會被合併成乙個空格顯示到瀏覽器頁面中。img標...
css網頁布局基礎
塊級元素，行級元素都是盒子模型 三種定位機制 標準文件流 浮動 float 及絕對定位 margin auto 1 設定了浮動的元素仍然處於標準文件流中 2 當設定浮動，沒有輸入內容，就會縮成乙個點 3 浮動會影響接下來的下乙個元素 4 清除浮動 clear both width 100 overf...