點擊右上方紅色按鈕關注“web秀”，讓你真正秀起來
前言
佈局是CSS中一個很重要的部分，也是最不好處理的一部分，其他諸如字體大小、顏色等等都是很容易的。總結一下使用過的CSS常用佈局，包括水平居中、垂直居中、單列布局、多列布局等，以及flex佈局，希望能給前端同學一些幫助。
CSS常用佈局方式
居中對齊
這裡就不做過多的說明了，前面有文章，詳細講過，沒有看的小夥伴請點擊：
單列布局
主要有兩種:
- header, content, footer寬度相同，有一個max-width
- header和footer佔滿瀏覽器100%寬度，content有一個max-width
第一種
頭部 內容
CSS常用佈局方式
第二種
頭部 內容
CSS常用佈局方式
兩列布局
float + margin
用float將邊欄與主要內容拉到一行，然後設置主要內容的margin。
主要內容
CSS常用佈局方式
position: absolute + margin
左邊欄
主要內容
CSS常用佈局方式
右邊欄
主要內容
CSS常用佈局方式
三列布局
比較經典有聖盃佈局，以及據說是淘寶UED（玉伯）提出的雙飛翼佈局。
聖盃佈局
CSS常用佈局方式
CSS常用佈局方式
雙飛翼佈局
CSS常用佈局方式
CSS常用佈局方式
CSS常用佈局方式
flex佈局
flex佈局目前已經很常用了，瀏覽器支持得也很好
CSS常用佈局方式
後續提供文章，詳細說明。
公告
分享到:
閱讀更多 web秀 的文章
