單列布局是最常用的一種布局，一般是將一個元素作為容器，設置一個固定的寬度，水平居中對齊。
單列布局一般有兩種形式：
(圖片來源：https://blog.csdn.net/Ace_Arm/article/details/81036129)
一欄布局頭部、內(nèi)容、底部寬度一致
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;}復制代碼一欄布局（通欄）頭部和底部寬度一致，占滿整個頁面，中間內(nèi)容區(qū)域?qū)挾容^小不占滿屏幕。
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;}復制代碼單列布局是最為基礎和簡單的一種，實現(xiàn)方法并不局限于以上兩種，大家可自由發(fā)揮，找到更多的方法來實現(xiàn)。
2列布局的使用頻率也非常高，其實現(xiàn)效果主要就是將頁面分割成左右寬度不等的兩列。一般寬度較小的一列會設置為固定寬度，作為側(cè)邊欄之類的，而另一列則充滿剩余寬度，作為內(nèi)容區(qū)。
在后臺管理系統(tǒng)及api文檔中使用較為廣泛。
先來看看效果：
實現(xiàn)兩列布局的方法有很多，這里主要介紹兩種方法。
calc() 函數(shù)用于動態(tài)計算長度值。實現(xiàn)思路很簡單，側(cè)邊欄寬度固定，設置絕對定位，使其脫離文檔流，內(nèi)容區(qū)域通過calc()函數(shù)計算剩余寬度并設置寬度，再加一個margin-left，值為側(cè)邊欄的寬度。
代碼如下：
html
<div class='slider'></div><div class='main'></div>復制代碼css
*{ margin: 0; padding: 0;}body,html{ width: 100%; height: 100%;}.slider,.main{ height: 100%;}.slider{ position: absolute; left: 0; top: 0; width: 100px; background: black;}.main{ width: calc(100% - 100px); background: red; margin-left: 100px;}復制代碼通過flex屬性實現(xiàn)思路也很簡單，將父元素設置為flex，側(cè)邊欄寬度固定，內(nèi)容區(qū)域設置flex:1即可充滿剩余區(qū)域。
代碼如下：
html
<div class='slider'></div><div class='main'></div>復制代碼css
*{ margin: 0; padding: 0;}body,html{ width: 100%; height: 100%;}body{ display: flex;}.slider,.main{ height: 100%;}.slider{ width: 100px; background: black;}.main{ flex: 1; background: red;}復制代碼3 列布局在日常開發(fā)中使用頻率也是很高的，其按照左中右的順序進行排列，通常中間列最寬，左右兩列次之。左右兩邊定寬，中間自適應，能根據(jù)屏幕大小做響應。
還是先來看看效果圖
三列布局的實現(xiàn)方法也很多，這里主要介紹兩種（雙飛翼布局、圣杯布局、flex布局）
在介紹雙飛翼布局和圣杯布局之前要先說一下margin設置負值的作用：
當margin的值設為負值的時候，元素會對應的像那個放向移動，比如margin-left為負值，元素則會左移
代碼如下：
html
<div class='main'> <div class='middle'> <div class='content'> 中間 </div> </div> <div class='left'> 左邊 </div> <div class='right'> 右邊 </div></div>復制代碼css
* { margin: 0; padding: 0;}body,html { width: 100%; height: 100%;}div{ height: 100%;}.main>div { float: left;}.left { width: 200px; background: red; margin-left: -100%;}.right { width: 200px; background: blue; margin-left: -200px;}.middle { width: 100%; background: yellow;}.content { margin-left: 200px; margin-right: 200px;}復制代碼代碼如下: html
<div class='main'> <div class='center'>中間中間中間中間中間中間中間后</div> <div class='left'>左邊</div> <div class='right'>右邊</div></div>復制代碼css
* { margin: 0; padding: 0;}.main { height: 200px; padding: 0 150px 0 200px; background: greenyellow; *zoom: 1;}.left,.center,.right { float: left;}.center { width: 100%; height: 200px; background: red;}.left { width: 200px; height: 200px; background: yellow; margin-left: -100%; position: relative; left: -200px;}.right { width: 150px; height: 200px; background: gainsboro; margin-left: -150px; position: relative; left: 150px;}復制代碼雙飛翼布局其實和圣杯布局的精髓是一樣的，都是通過設置負margin來實現(xiàn)元素的排布，不同的就是html結(jié)構(gòu)，雙飛翼是在center元素內(nèi)部又設置了一層inner-center的元素并設置它的左右margin，而非圣杯布局的padding，來排除兩邊元素的覆蓋。所以這兩種布局原理基本一樣，關(guān)鍵就是在于設置負margin的技巧，和元素浮動的相對定位技巧來實現(xiàn)。
代碼如下: html
<div class='main'> <div id='left'>左邊定寬</div> <div id='main'>中間自適應</div> <div id='right'>右邊定寬</div></div>復制代碼css
* { padding: 0px; margin: 0px;}body,html{ width: 100%; height: 100%;}body{ display: flex;}#left,#right { width: 100px; background-color: #0FC;}#main { flex: 1; background-color: #999;}復制代碼如果不考慮瀏覽器兼容問題的話，運用flex布局是最簡單的方式。
這種布局將頁面分成上、中、下三個部分，上、下部分都為固定高度，中間部分高度不定。當頁面高度小于瀏覽器高度時，下部分應固定在屏幕底部；當頁面高度超出瀏覽器高度時，下部分應該隨中間部分被撐開，顯示在頁面最底部。
這種布局也稱之為sticky footer，意思是下部分粘黏在屏幕底部。
首先我們先構(gòu)建簡單的HTML代碼
<body> <div class='content'></div> <div class='footer'></div></body>復制代碼其中content為我們的內(nèi)容區(qū)。下面開始介紹解決方法。
這種方法重要用vh(viewpoint height)來計算整體視窗的高度(1vh等于視窗高度的1%),然后減去底部footer的高度，從而求得內(nèi)容區(qū)域的最小高度。例如我們可以添加如下樣式：
.content{ min-height:calc(100vh-footer的高度); box-sizing:border-box;} 復制代碼從而這個問題就解決了，但是如果頁面的footer高度不同怎么辦?每一個頁面都要重新計算一次，這是很麻煩的，所以這種方法雖然簡單但卻是不推薦的。
這種方法就是利用flex布局對視窗高度進行分割。footer的flex設為0，這樣footer獲得其固有的高度;content的flex設為1，這樣它會充滿除去footer的其他部分。
代碼如下：
body { display: flex; flex-flow: column; min-height: 100vh; } .content { flex: 1; }.footer{ flex: 0; }復制代碼這樣的布局簡單使用，比較推薦。
這種方法就是在content的外面添加一個包裹容易，將html代碼改成這樣：
<body> <div class='wrapper'> <div class='content'></div> </div> <div class='footer'></div></body>復制代碼然后添加以下樣式：
html, body, .wrapper { height: 100%;}body > .wrapper { height: auto; min-height: 100%;}.content { padding-bottom: 150px; /* 必須使用和footer相同的高度 */} .footer { position: relative; margin-top: -150px; /* footer高度的負值 */ height: 150px; clear:both;}復制代碼另外，為了保證兼容性，需要在wrapper上添加clearfix類。其代碼如下：
<body> <div class='wrapper clearfix'> <div class='content'></div> </div> <div class='footer'></div></body>復制代碼.clearfix{ display: inline-block;}.clearfix:after { content: '.'; display: block; height: 0; clear: both; visibility: hidden;} 復制代碼ok,好，完成了，這種方法也比較推薦，但就是加入的代碼比較多，也改變了html的文檔結(jié)構(gòu)。
粘性布局是什么呢？我們先來看看效果演示
沒錯，其實就是在頁面滾動的時候保持元素（這里的是標題）在頁面視圖上方，也就是我們常?？吹降?吸附效果。
標題行設置了背景色。如果不設置背景色（背景透明），正常文檔流的文字就會和標題行文字重疊在一起顯示。
sticky定位的元素會遮住滾動而來的“正?！钡奈臋n流；后面的sticky元素會覆蓋前面的sticky元素，就好像一層層的便利貼，是不是很酷~~。
實現(xiàn)粘性布局主要依靠position的sticky屬性。
position: sticky;復制代碼先來看看兼容性：
從Can I use上查詢可以看出，sticky的兼容性并不是太好，所以大家使用的時候要慎重考慮，如果不要求兼容的情況，用這個還是相當?shù)氖娣恕?/p>
下面給出一個簡單的示例。
html:
<main> <header>標題一</header> <div class='content'> </div> <header>標題二</header> <div class='content'> </div> <header>標題三</header> <div class='content'> </div> <header>標題四</header> <div class='content'> </div></main>復制代碼js(不想寫太多p標簽，所以用js生成，偷個懶):
let num = 20let html = ''for (var i = 0; i < num; i++) { html += `<p>${i + 1}</p>`}Array.prototype.slice.call(document.getElementsByClassName('content')).forEach(item=>{ item.innerHTML = html})復制代碼css:
main { width: 400px; height: 300px; margin: 200px auto; overflow: auto;}header { position: sticky; top: 0; height: 30px; background-color: blanchedalmond;}復制代碼聯(lián)系客服
