前言
最近忙里偷閑，給自己加油充電的時(shí)候，發(fā)現(xiàn)自己腦海中布局這塊非常的凌亂混雜，于是花了一些時(shí)間將一些常用的布局及其實(shí)現(xiàn)方法整理梳理了出來，在這里，分享給大家。
單列布局
單列布局是最常用的一種布局，一般是將一個(gè)元素作為容器，設(shè)置一個(gè)固定的寬度，水平居中對齊。
單列布局一般有兩種形式：
一欄布局
一欄布局頭部、內(nèi)容、底部寬度一致
效果圖
代碼實(shí)現(xiàn)
html
<header></header>
<main></main>
<footer></footer>
css
header,footer{
width: 1200px;
height: 100px;
margin: 0 auto;
background: black;
}
main{
width: 1200px;
height: 600px;
background: red;
margin: 0 auto;
}
一欄布局（通欄）
一欄布局（通欄）頭部和底部寬度一致，占滿整個(gè)頁面，中間內(nèi)容區(qū)域?qū)挾容^小不占滿屏幕。
效果圖
代碼實(shí)現(xiàn)
html
<header></header>
<main></main>
<footer></footer>
css
header,footer{
width: 100%;
height: 100px;
background: black;
}
main{
width: 1200px;
height: 600px;
background: red;
margin: 0 auto;
}
單列布局是最為基礎(chǔ)和簡單的一種，實(shí)現(xiàn)方法并不局限于以上兩種，大家可自由發(fā)揮，找到更多的方法來實(shí)現(xiàn)。
2列布局
2列布局的使用頻率也非常高，其實(shí)現(xiàn)效果主要就是將頁面分割成左右寬度不等的兩列。一般寬度較小的一列會(huì)設(shè)置為固定寬度，作為側(cè)邊欄之類的，而另一列則充滿剩余寬度，作為內(nèi)容區(qū)。
在后臺管理系統(tǒng)及api文檔中使用較為廣泛。
效果圖
先來看看效果：
代碼實(shí)現(xiàn)
實(shí)現(xiàn)兩列布局的方法有很多，這里主要介紹兩種方法。
calc函數(shù)
calc() 函數(shù)用于動(dòng)態(tài)計(jì)算長度值。實(shí)現(xiàn)思路很簡單，側(cè)邊欄寬度固定，設(shè)置絕對定位，使其脫離文檔流，內(nèi)容區(qū)域通過calc()函數(shù)計(jì)算剩余寬度并設(shè)置寬度，再加一個(gè)margin-left，值為側(cè)邊欄的寬度。。。。。。。。。
作者：MonkeySoft
篇幅有限更多請見擴(kuò)展鏈接：
http://www.mark-to-win.com/tutorial/50662.html
