## 前言 最近忙裡偷閒，給自己加油充電的時候，發現自己腦海中佈局這塊非常的凌亂混雜，於是花了一些時間將一些常用的佈局及其實現方法整理梳理了出來，在這裡，分享給大家。 ## 單列布局 單列布局是最常用的一種佈局，一般是將一個元素作為容器，設定一個固定的寬度，水平居中對齊。 單列布局一般有兩種形式：  (圖片來源：https://blog.csdn.net/Ace_Arm/article/details/81036129) ### 一欄佈局 一欄佈局頭部、內容、底部寬度一致 #### 效果圖  #### 程式碼實現 html ```

``` css ``` header,footer{ width: 1200px; height: 100px; margin: 0 auto; background: black; } main{ width: 1200px; height: 600px; background: red; margin: 0 auto; } ``` ### 一欄佈局（通欄） 一欄佈局（通欄）頭部和底部寬度一致，佔滿整個頁面，中間內容區域寬度較小不佔滿螢幕。 #### 效果圖  #### 程式碼實現 html ```

``` css ``` header,footer{ width: 100%; height: 100px; background: black; } main{ width: 1200px; height: 600px; background: red; margin: 0 auto; } ``` > 單列布局是最為基礎和簡單的一種，實現方法並不侷限於以上兩種，大家可自由發揮，找到更多的方法來實現。 ## 2列布局 2列布局的使用頻率也非常高，其實現效果主要就是將頁面分割成左右寬度不等的兩列。一般寬度較小的一列會設定為固定寬度，作為側邊欄之類的，而另一列則充滿剩餘寬度，作為內容區。 在後臺管理系統及api文件中使用較為廣泛。 ### 效果圖 先來看看效果：  ### 程式碼實現 實現兩列布局的方法有很多，這裡主要介紹兩種方法。 #### calc函式 calc() 函式用於動態計算長度值。實現思路很簡單，側邊欄寬度固定，設定絕對定位，使其脫離文件流，內容區域通過calc()函式計算剩餘寬度並設定寬度，再加一個margin-left，值為側邊欄的寬度。 程式碼如下： html ``` ``` 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屬性 通過flex屬性實現思路也很簡單，將父元素設定為flex，側邊欄寬度固定，內容區域設定`flex:1`即可充滿剩餘區域。 程式碼如下： html ``` ``` 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列布局 3 列布局在日常開發中使用頻率也是很高的，其按照左中右的順序進行排列，通常中間列最寬，左右兩列次之。左右兩邊定寬，中間自適應，能根據螢幕大小做響應。 ### 效果圖 還是先來看看效果圖  ### 程式碼實現 三列布局的實現方法也很多，這裡主要介紹兩種（雙飛翼佈局、聖盃佈局、flex佈局） 在介紹雙飛翼佈局和聖盃佈局之前要先說一下margin設定負值的作用： > 當margin的值設為負值的時候，元素會對應的像那個放向移動，比如margin-left為負值，元素則會左移 #### 雙飛翼佈局 程式碼如下： html ``` 中間 左邊 右邊 ``` 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 ``` 中間中間中間中間中間中間中間後 左邊 右邊 ``` 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來實現元素的排布，不同的就是html結構，雙飛翼是在center元素內部又設定了一層inner-center的元素並設定它的左右margin，而非聖盃佈局的padding，來排除兩邊元素的覆蓋。所以這兩種佈局原理基本一樣，關鍵就是在於設定負margin的技巧，和元素浮動的相對定位技巧來實現。 #### flex佈局 程式碼如下: html ``` 左邊定寬 中間自適應 右邊定寬 ``` 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） 這種佈局將頁面分成上、中、下三個部分，上、下部分都為固定高度，中間部分高度不定。當頁面高度小於瀏覽器高度時，下部分應固定在螢幕底部；當頁面高度超出瀏覽器高度時，下部分應該隨中間部分被撐開，顯示在頁面最底部。 這種佈局也稱之為`sticky footer`，意思是下部分粘黏在螢幕底部。 ### 程式碼實現 首先我們先構建簡單的HTML程式碼 ``` 　　 　　 ``` 其中content為我們的內容區。下面開始介紹解決方法。 #### 為內容區域新增最小的高度 這種方法重要用vh(viewpoint height)來計算整體視窗的高度(1vh等於視窗高度的1%),然後減去底部footer的高度，從而求得內容區域的最小高度。例如我們可以新增如下樣式： ``` .content{ min-height:calc(100vh-footer的高度); box-sizing:border-box; } ``` 從而這個問題就解決了，但是如果頁面的footer高度不同怎麼辦?每一個頁面都要重新計算一次，這是很麻煩的，所以這種方法雖然簡單但卻是不推薦的。 #### 使用flex佈局 這種方法就是利用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的外面可以新增一個wrapper 這種方法就是在content的外面新增一個包裹容易，將html程式碼改成這樣： ``` 　 　　 ``` 然後新增以下樣式： ``` 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類。其程式碼如下： ``` 　 　　 ``` ``` .clearfix{ display: inline-block; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } ``` ok,好，完成了，這種方法也比較推薦，但就是加入的程式碼比較多，也改變了html的文件結構。 ## 粘性佈局（sticky） 粘性佈局是什麼呢？我們先來看看效果演示  沒錯，其實就是在頁面滾動的時候保持元素（這裡的是標題）在頁面檢視上方，也就是我們常常看到的 吸附效果。 標題行設定了背景色。如果不設定背景色（背景透明），正常文件流的文字就會和標題行文字重疊在一起顯示。 sticky定位的元素會遮住滾動而來的“正常”的文件流；後面的sticky元素會覆蓋前面的sticky元素，就好像一層層的便利貼，是不是很酷~~。 ### 程式碼實現 實現粘性佈局主要依靠`position`的`sticky`屬性。 ``` position: sticky; ``` 先來看看相容性：  從`Can I use`上查詢可以看出，sticky的相容性並不是太好，所以大家使用的時候要慎重考慮，如果不要求相容的情況，用這個還是相當的舒服了。 下面給出一個簡單的示例。 html: ```

標題一

標題二

標題三

標題四

``` js(不想寫太多p標籤，所以用js生成，偷個懶): ``` let num = 20 let html = '' for (var i = 0; i < num; i++) { html += `

${i + 1}

` } 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