乾貨!各種常見佈局實現+知名網站例項分析

Sweet_KK發表於2019-03-04
網站

各種頁面常見佈局+知名網站例項分析+相關閱讀推薦

閱前必看：本文總結了各種常見的佈局實現,每個方法的優缺點分析往後在github上陸續補充。還有就是這篇文章沒提到的其他佈局，待本人後續想到或遇到定會在github上及時更新。
由於文章篇幅較長,排版有些混亂,希望別介意哈。掘金PC端是會自動生成目錄的,為了方便移動端閱讀，還特意做了個錨點目錄,一個個標題重寫,真心累！(==後來發現掘金對文章的標題經過處理的,錨點不生效,在其他網站沒問題的，移動端可以進去github的線上demo閱讀)。各位讀者如果發現問題或者有什麼意見，歡迎提出！——歡迎收藏！歡迎Star！

from github github.com/Sweet-KK/cs…
本文原創，轉載請標明出處，摘要引流則隨意。

目錄

注：PC端推薦用法後面加▲，至於移動端在相容性允許的情況下優先考慮flex

一、水平居中
(1)文字/行內元素/行內塊級元素▲
(2)單個塊級元素▲
(3)多個塊級元素
(4)使用絕對定位實現▲
(5)任意個元素(flex)
★本章小結：

二、垂直居中
(1)單行文字/行內元素/行內塊級元素▲
(2)多行文字/行內元素/行內塊級元素
(3)圖片▲
(4)單個塊級元素
–(1) 使用tabel-cell實現:
–(2) 使用絕對定位實現:▲
–(3) 使用flex實現:
(5)任意個元素(flex)
★本章小結：

三、水平垂直居中
(1)行內/行內塊級/圖片▲
(2)table-cell
(3)button作為父元素
(4)絕對定位▲
(5)絕對居中▲
(6)flex
(7)視窗居中
★本章小結：

四、兩列布局
4.1 左列定寬,右列自適應
–(1)利用float+margin實現
–(2)利用float+margin(fix)實現
–(3)使用float+overflow實現▲
–(4)使用table實現▲
–(5)使用絕對定位實現
–(6)使用flex實現
–(7)使用Grid實現
4.2 左列自適應,右列定寬
–(1)使用float+margin實現
–(2)使用float+overflow實現▲
–(3)使用table實現▲
–(4)使用絕對定位實現
–(5)使用flex實現
–(6)使用Grid實現
4.3 一列不定,一列自適應
–(1)使用float+overflow實現▲
–(2)使用flex實現
–(3)使用Grid實現

五、三列布局
5.1 兩列定寬,一列自適應
–(1)使用float+margin實現
–(2)使用float+overflow實現▲
–(3)使用table實現▲
–(4)使用flex實現
–(5)使用Grid實現
5.2 兩側定寬,中間自適應
5.2.1 雙飛翼佈局方法
5.2.2 聖盃佈局方法
5.2.3 使用Grid實現
5.2.4 其他方法
–(1)使用table實現▲
–(2)使用flex實現
–(3)使用position實現▲

六、多列布局
6.1 等寬佈局
6.1.1四列等寬
–(1)使用float實現▲
–(2)使用table實現▲
–(3)使用flex實現
6.1.2多列等寬
–(1)使用float實現▲
–(2)使用table實現▲
–(3)使用flex實現
–(4)使用Grid實現
6.2 九宮格佈局
–(1)使用table實現▲
–(2)使用flex實現
–(3)使用Grid實現
6.3 柵格系統▲
–(1)用Less生成

七、全屏佈局
(1)使用絕對定位實現▲
(2)使用flex實現
(3)使用Grid實現

八、網站例項佈局分析：
8.1 小米官網
8.1.1 相容IE9+的方法
–(1)頁面整體
–(2)區域性——header
–(3)區域性——top
–(4)區域性——center
–(5)區域性——bottom
–(6)區域性——footer
–(7)全部程式碼(優化後)
8.1.2 Flexbox+Grid搭配用法(未來…)

九、其他補充：
9.1 移動端viewport
–設定viewport：
–閱讀推薦：
9.2 媒體查詢
–程式碼示例：
–閱讀推薦：
9.3 REM
–閱讀推薦：
9.4 Flexbox
–閱讀推薦：
9.5 CSS Grid
–閱讀推薦：

End：感謝
​
​
​

一、水平居中

一,二,三章都是parent+son的簡單結構,html程式碼和效果圖就不貼出來了,第四章以後才有

(1)文字/行內元素/行內塊級元素▲

原理：text-align只控制行內內容(文字、行內元素、行內塊級元素)如何相對他的塊父元素對齊

#parent{
    text-align: center;
}
複製程式碼

優缺點

  • 優點：簡單快捷，容易理解，相容性非常好
  • 缺點：只對行內內容有效；屬性會繼承影響到後代行內內容；如果子元素寬度大於父元素寬度則無效，只有後代行內內容中寬度小於設定text-align屬性的元素寬度的時候，才會水平居中
(2)單個塊級元素▲

原理：根據規範介紹得很清楚了，有這麼一種情況：在margin有節餘的同時如果左右margin設定了auto，將會均分剩餘空間。另外，如果上下的margin設定了auto，其計算值為0

#son{
    width: 100px; /*必須定寬*/
    margin: 0 auto;
}
複製程式碼

優缺點

  • 優點：簡單；相容性好
  • 缺點：必須定寬，並且值不能為auto；寬度要小於父元素，否則無效
(3)多個塊級元素

原理：text-align只控制行內內容(文字、行內元素、行內塊級元素)如何相對他的塊父元素對齊

#parent{
    text-align: center;
}
.son{
    display: inline-block; /*改為行內或者行內塊級形式，以達到text-align對其生效*/
}
複製程式碼

優缺點

  • 優點：簡單，容易理解，相容性非常好
  • 缺點：只對行內內容有效；屬性會繼承影響到後代行內內容；塊級改為inline-block換行、空格會產生元素間隔
(4)使用絕對定位實現▲

原理：子絕父相，top、right、bottom、left的值是相對於父元素尺寸的，然後margin或者transform是相對於自身尺寸的，組合使用達到水平居中的目的

#parent{
    height: 200px;
    width: 200px;  /*定寬*/
    position: relative;  /*父相*/
    background-color: #f00;
}
#son{
    position: absolute;  /*子絕*/
    left: 50%;  /*父元素寬度一半,這裡等同於left:100px*/
    transform: translateX(-50%);  /*自身寬度一半,等同於margin-left: -50px;*/
    width: 100px;  /*定寬*/
    height: 100px;
    background-color: #00ff00;
}
複製程式碼

優缺點

  • 優點：使用margin-left相容性好；不管是塊級還是行內元素都可以實現
  • 缺點：程式碼較多；脫離文件流；使用margin-left需要知道寬度值；使用transform相容性不好（ie9+）
(5)任意個元素(flex)

原理：就是設定當前主軸對齊方式為居中。說不上為什麼，flex無非就是主軸側軸是重點，然後就是排列方式的設定，可以去看看文末的flex閱讀推薦

#parent{
    display: flex;
    justify-content: center;
}
複製程式碼

優缺點

  • 優點：功能強大；簡單方便；容易理解
  • 缺點：PC端相容性不好，移動端（Android4.0+）
本章小結：
  • 對於水平居中，我們應該先考慮，哪些元素有自帶的居中效果，最先想到的應該就是 text-align:center 了，但是這個只對行內內容有效，所以我們要使用 text-align:center 就必須將子元素設定為 display: inline; 或者 display: inline-block; ；
  • 其次就是考慮能不能用margin: 0 auto; ，因為這都是一兩句程式碼能搞定的事，實在不行就是用絕對定位去實現了。
  • 移動端能用flex就用flex，簡單方便，靈活並且功能強大，無愧為網頁佈局的一大利器！

二、垂直居中

一,二,三章都是parent+son的簡單結構,html程式碼和效果圖就不貼出來了,第四章以後才有

(1)單行文字/行內元素/行內塊級元素▲

原理：line-height的最終表現是通過inline box實現的，而無論inline box所佔據的高度是多少（無論比文字大還是比文字小），其佔據的空間都是與文字內容公用水平中垂線的。

#parent{
    height: 150px;
    line-height: 150px;  /*與height等值*/
}
複製程式碼

優缺點

  • 優點：簡單；相容性好
  • 缺點：只能用於單行行內內容；要知道高度的值
(2)多行文字/行內元素/行內塊級元素

原理同上

#parent{  /*或者用span把所有文字包裹起來，設定display：inline-block轉換成圖片的方式解決*/
    height: 150px;
    line-height: 30px;  /*元素在頁面呈現為5行,則line-height的值為height/5*/
}
複製程式碼

優缺點

  • 優點：簡單；相容性好
  • 缺點：只能用於行內內容；需要知道高度和最終呈現多少行來計算出line-height的值，建議用span包裹多行文字
(3)圖片▲

原理：vertical-align和line-height的基友關係

#parent{
    height: 150px;
    line-height: 150px;
    font-size: 0;
}
img#son{vertical-align: middle;} /*預設是基線對齊，改為middle*/
複製程式碼

優缺點

  • 優點：簡單；相容性好
  • 缺點：需要新增font-size: 0; 才可以完全的垂直居中；不過需要主要，html#parent包裹img之間需要有換行或空格
(4)單個塊級元素

html程式碼:

<div id="parent">
    <div id="son"></div>
</div>
複製程式碼
(4-1) 使用tabel-cell實現:

原理：CSS Table，使表格內容對齊方式為middle

#parent{
    display: table-cell;
    vertical-align: middle;
}
複製程式碼

優缺點

  • 優點：簡單；寬高不定；相容性好（ie8+）
  • 缺點：設定tabl-cell的元素，寬度和高度的值設定百分比無效，需要給它的父元素設定display: table; 才生效；table-cell不感知margin，在父元素上設定table-row等屬性，也會使其不感知height；設定float或position會對預設佈局造成破壞，可以考慮為之增加一個父div定義float等屬性；內容溢位時會自動撐開父元素
(4-2) 使用絕對定位實現:▲ 
/*原理：子絕父相，top、right、bottom、left的值是相對於父元素尺寸的，然後margin或者transform是相對於自身尺寸的，組合使用達到水平居中的目的*/
#parent{
    height: 150px;
    position: relative;  /*父相*/
}
#son{
    position: absolute;  /*子絕*/
    top: 50%;  /*父元素高度一半,這裡等同於top:75px;*/
    transform: translateY(-50%);  /*自身高度一半,這裡等同於margin-top:-25px;*/
    height: 50px;
}

/*優缺點
- 優點：使用margin-top相容性好；不管是塊級還是行內元素都可以實現
- 缺點：程式碼較多；脫離文件流；使用margin-top需要知道高度值；使用transform相容性不好（ie9+）*/

或

/*原理：當top、bottom為0時,margin-top&bottom會無限延伸佔滿空間並且平分*/
#parent{position: relative;}
#son{
    position: absolute;
    margin: auto 0;
    top: 0;
    bottom: 0;
    height: 50px;
}

/*優缺點
- 優點：簡單;相容性較好(ie8+)
- 缺點：脫離文件流*/
複製程式碼
(4-3) 使用flex實現:

原理：flex設定對齊方式罷了，請查閱文末flex閱讀推薦

#parent{
    display: flex;
    align-items: center;
}

或

#parent{display: flex;}
#son{align-self: center;}

或
/*原理：這個尚未搞清楚，應該是flex使margin上下邊界無限延伸至剩餘空間並平分了*/
#parent{display: flex;}
#son{margin: auto 0;}
複製程式碼

優缺點

  • 優點：簡單靈活；功能強大
  • 缺點：PC端相容性不好，移動端（Android4.0+）
(5)任意個元素(flex)

原理：flex設定對齊方式罷了，請查閱文末flex閱讀推薦

#parent{
    display: flex;
    align-items: center;
}

或

#parent{
    display: flex;
}
.son{
    align-self: center;
}

或 

#parent{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
複製程式碼

優缺點

  • 優點：簡單靈活；功能強大
  • 缺點：PC端相容性不好，移動端（Android4.0+）
★本章小結：
  • 對於垂直居中，最先想到的應該就是 line-height 了，但是這個只能用於行內內容；
  • 其次就是考慮能不能用vertical-align: middle; ，不過這個一定要熟知原理才能用得順手，建議看下vertical-align和line-height的基友關係 ；
  • 然後便是絕對定位，雖然程式碼多了點，但是勝在適用於不同情況；
  • 移動端相容性允許的情況下能用flex就用flex

三、水平垂直居中

一,二,三章都是parent+son的簡單結構,html程式碼和效果圖就不貼出來了,第四章以後才有

(1)行內/行內塊級/圖片▲

原理：text-align: center; 控制行內內容相對於塊父元素水平居中,然後就是line-height和vertical-align的基友關係使其垂直居中，font-size: 0; 是為了消除近似居中的bug

#parent{
    height: 150px;
    line-height: 150px;  /*行高的值與height相等*/
    text-align: center;
    font-size: 0;   /*消除幽靈空白節點的bug*/
}
#son{
    /*display: inline-block;*/  /*如果是塊級元素需改為行內或行內塊級才生效*/
    vertical-align: middle;
}
複製程式碼

優缺點

  • 優點：程式碼簡單；相容性好（ie8+）
  • 缺點：只對行內內容有效；需要新增font-size: 0; 才可以完全的垂直居中；不過需要注意html中#parent包裹#son之間需要有換行或空格；熟悉line-height和vertical-align的基友關係較難
(2)table-cell

原理：CSS Table，使表格內容垂直對齊方式為middle,然後根據是行內內容還是塊級內容採取不同的方式達到水平居中

#parent{
    height: 150px;
    width: 200px;
    display: table-cell;
    vertical-align: middle;
    /*text-align: center;*/   /*如果是行內元素就新增這個*/
}
#son{
    /*margin: 0 auto;*/    /*如果是塊級元素就新增這個*/
    width: 100px;
    height: 50px;
}
複製程式碼

優缺點

  • 優點：簡單；適用於寬度高度未知情況；相容性好（ie8+）
  • 缺點：設定tabl-cell的元素，寬度和高度的值設定百分比無效，需要給它的父元素設定display: table; 才生效；table-cell不感知margin，在父元素上設定table-row等屬性，也會使其不感知height；設定float或position會對預設佈局造成破壞，可以考慮為之增加一個父div定義float等屬性；內容溢位時會自動撐開父元素
(3)button作為父元素

原理：button的預設樣式，再把需要居中的元素表現形式改為行內或行內塊級就好

button#parent{  /*改掉button預設樣式就好了,不需要居中處理*/
    height: 150px;
    width: 200px;
    outline: none;  
    border: none;
}
#son{
    display: inline-block; /*button自帶text-align: center,改為行內水平居中生效*/
}
複製程式碼

優缺點

  • 優點：簡單方便，充分利用預設樣式
  • 缺點：只適用於行內內容；需要清除部分預設樣式；水平垂直居中相容性很好，但是ie下點選會有凹陷效果！
(4)絕對定位

原理：子絕父相，top、right、bottom、left的值是相對於父元素尺寸的，然後margin或者transform是相對於自身尺寸的，組合使用達到幾何上的水平垂直居中

#parent{
    position: relative;
}
#son{
    position: absolute;
    top: 50%;
    left: 50%;
    /*定寬高時等同於margin-left:負自身寬度一半;margin-top:負自身高度一半;*/
    transform: translate(-50%,-50%); 
}
複製程式碼

優缺點

  • 優點：使用margin相容性好；不管是塊級還是行內元素都可以實現
  • 缺點：程式碼較多；脫離文件流；使用margin需要知道寬高；使用transform相容性不好（ie9+）
(5)絕對居中

原理：當top、bottom為0時,margin-top&bottom設定auto的話會無限延伸佔滿空間並且平分；當left、right為0時,margin-left&right設定auto的話會無限延伸佔滿空間並且平分

#parent{
    position: relative;
}
#son{
    position: absolute;
    margin: auto;
    width: 100px;
    height: 50px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
複製程式碼

優缺點

  • 優點：無需關注寬高；相容性較好(ie8+)
  • 缺點：程式碼較多；脫離文件流
(6)flex

原理：flex設定對齊方式罷了，請查閱文末flex閱讀推薦

#parent{
    display: flex;
}
#son{
    margin: auto;
}

或

#parent{
    display: flex;
    justify-content: center;
    align-items: center;
}

或

#parent{
    display: flex;
    justify-content: center;
}
#son{
    align-self: center;
}
複製程式碼

優缺點

  • 優點：簡單靈活；功能強大
  • 缺點：PC端相容性不好，移動端（Android4.0+）
(7)視窗居中

原理：vh為視口單位，視口即文件可視的部分，50vh就是視口高度的50/100，設定50vh上邊距再

#son{
	/*0如果去掉，則會多出滾動條並且上下都是50vh的margin。如果去掉就給body加上overflow:hidden;*/
    margin: 50vh auto 0;  
    transform: translateY(-50%);
}
複製程式碼

優缺點

  • 優點：簡單；容易理解；兩句程式碼達到螢幕水平垂直居中
  • 缺點：相容性不好（ie9+，Android4.4+）
★本章小結：
  • 一般情況下，水平垂直居中，我們最常用的就是絕對定位加負邊距了，缺點就是需要知道寬高，使用transform倒是可以不需要，但是相容性不好（ie9+）；
  • 其次就是絕對居中，絕對定位設定top、left、right、bottom為0，然後margin:auto; 讓瀏覽器自動平分邊距以達到水平垂直居中的目的；
  • 如果是行內/行內塊級/圖片這些內容，可以優先考慮line-height和vertical-align 結合使用，不要忘了還有text-align ，這個方法程式碼其實不多，就是理解原理有點困難，想要熟練應對各種情況還需好好研究；
  • 移動端相容性允許的情況下能用flex就用flex。

四、兩列布局

4.1 左列定寬,右列自適應

效果:

乾貨!各種常見佈局實現+知名網站例項分析
(1)利用float+margin實現

html程式碼:

<body>
<div id="left">左列定寬</div>
<div id="right">右列自適應</div>
</body>
複製程式碼

css程式碼:

#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right {
    background-color: #0f0;
    height: 500px;
    margin-left: 100px; /*大於等於#left的寬度*/
}
複製程式碼
(2)利用float+margin(fix)實現

html程式碼:

<body>
<div id="left">左列定寬</div>
<div id="right-fix">
    <div id="right">右列自適應</div>
</div>
</body>
複製程式碼

css程式碼:

#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right-fix {
    float: right;
    width: 100%;
    margin-left: -100px; /*正值大於或等於#left的寬度,才能顯示在同一行*/
}
#right{
    margin-left: 100px; /*大於或等於#left的寬度*/
    background-color: #0f0;
    height: 500px;
}
複製程式碼
(3)使用float+overflow實現

html程式碼:

<body>
<div id="left">左列定寬</div>
<div id="right">右列自適應</div>
</body>
複製程式碼

css程式碼:

#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right {
    background-color: #0f0;
    height: 500px;
    overflow: hidden; /*觸發bfc達到自適應*/
}
複製程式碼

優缺點：

  • 優點：程式碼簡單，容易理解，無需關注定寬的寬度，利用bfc達到自適應效果
  • 缺點：浮動脫離文件流，需要手動清除浮動，否則會產生高度塌陷；不支援ie6
(4)使用table實現

html程式碼:

<div id="parent">
    <div id="left">左列定寬</div>
    <div id="right">右列自適應</div>
</div>
複製程式碼

css程式碼:

#parent{
    width: 100%;
    display: table;
    height: 500px;
}
#left {
    width: 100px;
    background-color: #f00;
}
#right {
    background-color: #0f0;
}
#left,#right{
    display: table-cell;  /*利用單元格自動分配寬度*/
}
複製程式碼

優缺點：

  • 優點：程式碼簡單，容易理解，無需關注定寬的寬度，利用單元格自動分配達到自適應效果
  • 缺點：margin失效；設定間隔比較麻煩；不支援ie8-
(5)使用絕對定位實現

html程式碼:

<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>
複製程式碼

css程式碼:

#parent{
    position: relative;  /*子絕父相*/
}
#left {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f00;
    width: 100px;
    height: 500px;
}
#right {
    position: absolute;
    top: 0;
    left: 100px;  /*值大於等於#left的寬度*/
    right: 0;
    background-color: #0f0;
    height: 500px;
}
複製程式碼
(6)使用flex實現

html程式碼:

<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>


複製程式碼

css程式碼:

#parent{
    width: 100%;
    height: 500px;
    display: flex;
}
#left {
    width: 100px;
    background-color: #f00;
}
#right {
    flex: 1; /*均分了父元素剩餘空間*/
    background-color: #0f0;
}

複製程式碼
(7)使用Grid實現

html程式碼:

<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

複製程式碼

css程式碼:

#parent {
    width: 100%;
    height: 500px;
    display: grid;
    grid-template-columns: 100px auto;  /*設定2列就ok了,auto換成1fr也行*/
}
#left {
    background-color: #f00;
}
#right {
    background-color: #0f0;
}

複製程式碼

4.2 左列自適應,右列定寬

效果:

image.png
(1)使用float+margin實現

html程式碼:

<body>
<div id="parent">
    <div id="left">左列自適應</div>
    <div id="right">右列定寬</div>
</div>
</body>

複製程式碼

css程式碼:

#parent{
    height: 500px;
    padding-left: 100px;  /*抵消#left的margin-left以達到#parent水平居中*/
}
#left {
    width: 100%;
    height: 500px;
    float: left;
    margin-left: -100px; /*正值等於#right的寬度*/
    background-color: #f00;
}
#right {
    height: 500px;
    width: 100px;
    float: right;
    background-color: #0f0;
}

複製程式碼
(2)使用float+overflow實現

html程式碼:

<body>
<div id="parent">
    <div id="right">右列定寬</div>
    <div id="left">左列自適應</div>   <!--順序要換一下-->
</div>
</body>

複製程式碼

css程式碼:

#left {
    overflow: hidden;  /*觸發bfc*/
    height: 500px;
    background-color: #f00;
}
#right {
    margin-left: 10px;  /*margin需要定義在#right中*/
    float: right;
    width: 100px;
    height: 500px;
    background-color: #0f0;
}

複製程式碼

優缺點：

  • 優點：程式碼簡單，容易理解，無需關注定寬的寬度，利用bfc達到自適應效果
  • 缺點：浮動脫離文件流，需要手動清除浮動，否則會產生高度塌陷；不支援ie6
(3)使用table實現

html程式碼:

<body>
<div id="parent">
    <div id="left">左列自適應</div>
    <div id="right">右列定寬</div>
</div>
</body>

複製程式碼

css程式碼:

#parent{
    width: 100%;
    height: 500px;
    display: table;
}
#left {
    background-color: #f00;
    display: table-cell;
}
#right {
    width: 100px;
    background-color: #0f0;
    display: table-cell;
}

複製程式碼

優缺點：

  • 優點：程式碼簡單，容易理解，無需關注定寬的寬度，利用單元格自動分配達到自適應效果
  • 缺點：margin失效；設定間隔比較麻煩；不支援ie8-
(4)使用絕對定位實現

html程式碼:

<body>
<div id="parent">
    <div id="left">左列自適應</div>
    <div id="right">右列定寬</div>
</div>
</body>

複製程式碼

css程式碼:

#parent{
    position: relative;  /*子絕父相*/
}
#left {
    position: absolute;
    top: 0;
    left: 0;
    right: 100px;  /*大於等於#rigth的寬度*/
    background-color: #f00;
    height: 500px;
}
#right {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #0f0;
    width: 100px;
    height: 500px;
}

複製程式碼
(5)使用flex實現

html程式碼:

<body>
<div id="parent">
    <div id="left">左列自適應</div>
    <div id="right">右列定寬</div>
</div>
</body>

複製程式碼

css程式碼:

#parent{
    height: 500px;
    display: flex;
}
#left {
    flex: 1;
    background-color: #f00;
}
#right {
    width: 100px;
    background-color: #0f0;
}

複製程式碼
(6)使用Grid實現

html程式碼:

<body>
<div id="parent">
    <div id="left">左列自適應</div>
    <div id="right">右列定寬</div>
</div>
</body>

複製程式碼

css程式碼:

#parent {
    height: 500px;
    display: grid;
    grid-template-columns: auto 100px;  /*設定2列,auto換成1fr也行*/
}
#left {
    background-color: #f00;
}
#right {
    background-color: #0f0;
}

複製程式碼

4.3 一列不定,一列自適應

(盒子寬度隨著內容增加或減少發生變化,另一個盒子自適應)

效果圖:

image.png

變化後:

image.png
(1)使用float+overflow實現

html程式碼:

<body>
<div id="parent">
    <div id="left">左列不定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

複製程式碼

css程式碼:

#left {
    margin-right: 10px;
    float: left;  /*只設定浮動,不設寬度*/
    height: 500px;
    background-color: #f00;
}
#right {
    overflow: hidden;  /*觸發bfc*/
    height: 500px;
    background-color: #0f0;
}

複製程式碼

優缺點：

  • 優點：程式碼簡單，容易理解，無需關注寬度，利用bfc達到自適應效果
  • 缺點：浮動脫離文件流，需要手動清除浮動，否則會產生高度塌陷；不支援ie6
(2)使用flex實現

html程式碼:

<body>
<div id="parent">
    <div id="left">左列不定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

複製程式碼

css程式碼:

#parent{
    display: flex;
}
#left { /*不設寬度*/
    margin-right: 10px;
    height: 500px;
    background-color: #f00;
}
#right {
    height: 500px;
    background-color: #0f0;
    flex: 1;  /*均分#parent剩餘的部分*/
}

複製程式碼
(3)使用Grid實現

html程式碼:

<body>
<div id="parent">
    <div id="left">左列不定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

複製程式碼

css程式碼:

#parent{
    display: grid;
    grid-template-columns: auto 1fr;  /*auto和1fr換一下順序就是左列自適應,右列不定寬了*/
}
#left {
    margin-right: 10px;
    height: 500px;
    background-color: #f00;
}
#right {
    height: 500px;
    background-color: #0f0;
}

複製程式碼

左列自適應,右列不定寬同理(參考4.1和4.3對應程式碼示例)

五、三列布局

5.1 兩列定寬,一列自適應

效果圖:

image.png
(1)使用float+margin實現

html程式碼:

<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

複製程式碼

css程式碼:

#parent{
    min-width: 310px; /*100+10+200,防止寬度不夠,子元素換行*/
}
#left {
    margin-right: 10px;  /*#left和#center間隔*/
    float: left;
    width: 100px;
    height: 500px;
    background-color: #f00;
}
#center{
    float: left;
    width: 200px;
    height: 500px;
    background-color: #eeff2b;
}
#right {
    margin-left: 320px;  /*等於#left和#center的寬度之和加上間隔,多出來的就是#right和#center的間隔*/
    height: 500px;
    background-color: #0f0;
}

複製程式碼
(2)使用float+overflow實現

html程式碼:

<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

複製程式碼

css程式碼:

#parent{
    min-width: 320px; /*100+10+200+20,防止寬度不夠,子元素換行*/
}
#left {
    margin-right: 10px; /*間隔*/
    float: left;
    width: 100px;
    height: 500px;
    background-color: #f00;
}
#center{
    margin-right: 10px; /*在此定義和#right的間隔*/
    float: left;
    width: 200px;
    height: 500px;
    background-color: #eeff2b;
}
#right {
    overflow: hidden;  /*觸發bfc*/
    height: 500px;
    background-color: #0f0;
}

複製程式碼

優缺點：

  • 優點：程式碼簡單，容易理解，無需關注定寬的寬度，利用bfc達到自適應效果
  • 缺點：浮動脫離文件流，需要手動清除浮動，否則會產生高度塌陷；不支援ie6
(3)使用table實現

html程式碼:

<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

複製程式碼

css程式碼:

#parent {
    width: 100%; 
    height: 520px; /*抵消上下間距10*2的高度影響*/
    margin: -10px 0;  /*抵消上下邊間距10的位置影響*/
    display: table;
    /*左右兩邊間距大了一點,子元素改用padding設定盒子間距就沒有這個問題*/
    border-spacing: 10px;  /*關鍵!!!設定間距*/
}
#left {
    display: table-cell;
    width: 100px;
    background-color: #f00;
}
#center {
    display: table-cell;
    width: 200px;
    background-color: #eeff2b;
}
#right {
    display: table-cell;
    background-color: #0f0;
}

複製程式碼

優缺點：

  • 優點：程式碼簡單，容易理解，無需關注定寬的寬度，利用單元格自動分配達到自適應效果
  • 缺點：margin失效；設定間隔比較麻煩；不支援ie8-
(4)使用flex實現

html程式碼:

<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

複製程式碼

css程式碼:

#parent {
    height: 500px;
    display: flex;
}
#left {
    margin-right: 10px;  /*間距*/
    width: 100px;
    background-color: #f00;
}
#center {
    margin-right: 10px;  /*間距*/
    width: 200px;
    background-color: #eeff2b;
}
#right {
    flex: 1;  /*均分#parent剩餘的部分達到自適應*/
    background-color: #0f0;
}

複製程式碼
(5)使用Grid實現

html程式碼:

<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間定寬</div>
    <div id="right">右列自適應</div>
</div>
</body>

複製程式碼

css程式碼:

#parent {
    height: 500px;
    display: grid;
    grid-template-columns: 100px 200px auto; /*設定3列,固定第一第二列的寬度,第三列auto或者1fr*/
}
#left {
    margin-right: 10px;  /*間距*/
    background-color: #f00;
}
#center {
    margin-right: 10px;  /*間距*/
    background-color: #eeff2b;
}
#right {
    background-color: #0f0;
}

複製程式碼

5.2 兩側定寬,中間自適應

5.2.1 雙飛翼佈局方法

效果圖:

image.png

html程式碼:

<body>
<div id="header"></div>
<!--中間欄需要放在前面-->
<div id="parent">
    <div id="center">
        <div id="center_inbox">中間自適應</div>
        <hr>  <!--方便觀察原理-->
    </div>
    <div id="left">左列定寬</div>
    <div id="right">右列定寬</div>
</div>
<div id="footer"></div>
</body>

複製程式碼

css程式碼:

#header {
    height: 60px;
    background-color: #ccc;
}
#left {
    float: left;
    width: 100px;
    height: 500px;
    margin-left: -100%; /*調整#left的位置,值等於自身寬度*/
    background-color: #f00;
    opacity: 0.5;
}
#center {
    height: 500px;
    float: left;
    width: 100%;
    background-color: #eeff2b;
}
#center_inbox{
    height: 480px;
    border: 1px solid #000;
    margin: 0 220px 0 120px;  /*關鍵!!!左右邊界等於左右盒子的寬度,多出來的為盒子間隔*/
}
#right {
    float: left;
    width: 200px;
    height: 500px;
    margin-left: -200px;  /*使right到指定的位置,值等於自身寬度*/
    background-color: #0f0;
    opacity: 0.5;
}
#footer {
    clear: both;  /*注意清除浮動!!*/
    height: 60px;
    background-color: #ccc;
}

複製程式碼
5.2.2 聖盃佈局方法

效果圖:

image.png

html程式碼:

<body>
<div id="header"></div>
<div id="parent">
    <!--#center需要放在前面-->
    <div id="center">中間自適應
        <hr>
    </div>
    <div id="left">左列定寬</div>
    <div id="right">右列定寬</div>
</div>
<div id="footer"></div>
</body>

複製程式碼

css程式碼:

#header{
    height: 60px;
    background-color: #ccc;
}
#parent {
    box-sizing: border-box;
    height: 500px;
    padding: 0 215px 0 115px;  /*為了使#center擺正,左右padding分別等於左右盒子的寬,可以結合左右盒子相對定位的left調整間距*/
}
#left {
    margin-left: -100%;  /*使#left上去一行*/
    position: relative;
    left: -115px;  /*相對定位調整#left的位置,正值大於或等於自身寬度*/
    float: left;
    width: 100px;
    height: 500px;
    background-color: #f00;
    opacity: 0.5;
}
#center {
    float: left;
    width: 100%;  /*由於#parent的padding,達到自適應的目的*/
    height: 500px;
    box-sizing: border-box;
    border: 1px solid #000;
    background-color: #eeff2b;
}
#right {
    position: relative;
    left: 215px; /*相對定位調整#right的位置,大於或等於自身寬度*/
    width: 200px;
    height: 500px;
    margin-left: -200px;  /*使#right上去一行*/
    float: left;
    background-color: #0f0;
    opacity: 0.5;
}
#footer{
    height: 60px;
    background-color: #ccc;
}

複製程式碼
5.2.3 使用Grid實現

效果圖:

image.png

html程式碼:

<body>
<div id="parent">
    <div id="header"></div>
    <!--#center需要放在前面-->
    <div id="center">中間自適應
        <hr>
    </div>
    <div id="left">左列定寬</div>
    <div id="right">右列定寬</div>
    <div id="footer"></div>
</div>
</body>

複製程式碼

css程式碼:

#parent {
    height: 500px;
    display: grid;
    grid-template-columns: 100px auto 200px; /*設定3列*/
    grid-template-rows: 60px auto 60px; /*設定3行*/
    /*設定網格區域分佈*/
    grid-template-areas: 
        "header header header" 
        "leftside main rightside" 
        "footer footer footer";
}
#header {
    grid-area: header; /*指定在哪個網格區域*/
    background-color: #ccc;
}
#left {
    grid-area: leftside;
    background-color: #f00;
    opacity: 0.5;
}
#center {
    grid-area: main; /*指定在哪個網格區域*/
    margin: 0 15px; /*設定間隔*/
    border: 1px solid #000;
    background-color: #eeff2b;
}
#right {
    grid-area: rightside; /*指定在哪個網格區域*/
    background-color: #0f0;
    opacity: 0.5;
}
#footer {
    grid-area: footer; /*指定在哪個網格區域*/
    background-color: #ccc;
}

複製程式碼
5.2.4 其他方法

效果圖:

image.png
(1)使用table實現

html程式碼:

<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間自適應</div>
    <div id="right">右列定寬</div>
</div>
</body>

複製程式碼

css程式碼:

#parent {
    width: 100%;
    height: 500px;
    display: table;
}
#left {
    display: table-cell;
    width: 100px;
    background-color: #f00;
}
#center {
    display: table-cell;
    background-color: #eeff2b;
}
#right {
    display: table-cell;
    width: 200px;
    background-color: #0f0;
}

複製程式碼

優缺點：

  • 優點：程式碼簡潔，容易理解；
  • 缺點：margin失效，採用border-spacing表格兩邊的間隔無法消除；不支援ie8-
(2)使用flex實現

html程式碼:

<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間自適應</div>
    <div id="right">右列定寬</div>
</div>
</body>

複製程式碼

css程式碼:

#parent {
    height: 500px;
    display: flex;
}
#left {
    width: 100px;
    background-color: #f00;
}
#center {
    flex: 1;  /*均分#parent剩餘的部分*/
    background-color: #eeff2b;
}
#right {
    width: 200px;
    background-color: #0f0;
}

複製程式碼
(3)使用position實現

html程式碼:

<body>
<div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間自適應</div>
    <div id="right">右列定寬</div>
</div>
</body>

複製程式碼

css程式碼:

#parent {
    position: relative; /*子絕父相*/
}
#left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 500px;
    background-color: #f00;
}
#center {
    height: 500px;
    margin-left: 100px; /*大於等於#left的寬度,或者給#parent新增同樣大小的padding-left*/
    margin-right: 200px;  /*大於等於#right的寬度,或者給#parent新增同樣大小的padding-right*/
    background-color: #eeff2b;
}
#right {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 500px;
    background-color: #0f0;
}

複製程式碼

優缺點：

  • 優點：容易理解，相容性比較好
  • 缺點：需手動計算寬度確定邊距；脫離文件流；程式碼繁多

六、多列布局

6.1 等寬佈局

6.1.1 四列等寬
(1)使用float實現

效果圖:

image.png

html程式碼:

<body>
<div id="parent">
    <div class="column">1 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">2 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">3 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">4 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
</div>
</body>

複製程式碼

css程式碼:

#parent {
    margin-left: -20px; /*使整體內容看起來居中,抵消padding-left的影響*/
}
.column{
    padding-left: 20px;  /*盒子的邊距*/
    width: 25%;
    float: left;
    box-sizing: border-box;
    border: 1px solid #000;
    background-clip: content-box; /*背景色從內容開始繪製,方便觀察*/
    height: 500px;
}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

複製程式碼

優缺點：

  • 優點：程式碼簡單，容易理解；相容性較好
  • 缺點：需要手動清除浮動，否則會產生高度塌陷
(2)使用table實現

效果圖:

image.png

html程式碼:

<body>
<div id="parent">
    <div class="column">1 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">2 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">3 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">4 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
</div>
</body>

複製程式碼

css程式碼:

#parent {
    height: 540px;  /*抵消上下邊20*2間距的高度影響*/
    display: table;
    margin: -20px 0;  /*抵消上下邊20*2間距的位置影響*/
    /*兩邊離頁面間距較大,改用子元素設定padding來當成間隔就不會有這樣的問題*/
    border-spacing: 20px;  /*設定間距*/
}
.column{
    display: table-cell;
}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

複製程式碼

優缺點：

  • 優點：程式碼簡單，容易理解；無需關注寬度，單元格自動等分
  • 缺點：margin失效；設定間隔比較麻煩；不支援ie8-
(3)使用flex實現

效果圖:

image.png

html程式碼:

<body>
<div id="parent">
    <div class="column">1 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">2 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">3 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">4 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
</div>
</body>

複製程式碼

css程式碼:

#parent {
    margin-left: -15px;  /*使內容看起來居中*/
    height: 500px;
    display: flex;
}
.column{
    flex: 1; /*一起平分#parent*/
    margin-left: 15px; /*設定間距*/
}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

複製程式碼
多列等寬

效果圖:

image.png
(1)使用float實現

html程式碼:

<body>
<div id="parent">
    <div class="column">1 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">2 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">3 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">4 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">5 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">6 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
</div>
</body>

複製程式碼

css程式碼:

#parent {
    height: 500px;
}
.column{
    float: left;  /*新增浮動*/
    width: 16.66666666666667%;  /*100÷列數,得出百分比*/
    height: 500px;
}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

複製程式碼

優缺點：

  • 優點：程式碼簡單，容易理解；相容性較好
  • 缺點：需要手動清除浮動，否則會產生高度塌陷
(2)使用table實現

html程式碼

<body>
<div id="parent">
    <div class="column">1 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">2 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">3 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">4 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">5 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">6 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
</div>
</body>

複製程式碼

css程式碼:

#parent {
    width: 100%;
    height: 500px;
    display: table;
}
.column{
    display: table-cell; /*無需關注列數,單元格自動平分*/
}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

複製程式碼

優缺點：

  • 優點：程式碼簡單，容易理解；無需關注寬度。單元格自動等分
  • 缺點：margin失效；設定間隔比較麻煩；不相容ie8-
(3)使用flex實現

html程式碼:

<body>
<div id="parent">
    <div class="column">1 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">2 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">3 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">4 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">5 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">6 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
</div>
</body>

複製程式碼

css程式碼:

#parent {
    height: 500px;
    display: flex;
}
.column{
    flex: 1;  /*無需關注列數,一起平分#parent*/
}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

複製程式碼
(4)使用Grid實現

html程式碼:

<body>
<div id="parent">
    <div class="column">1 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">2 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">3 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">4 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">5 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
    <div class="column">6 <p>我是文字我是文字我輸文字我是文字我是文字</p></div>
</div>
</body>

複製程式碼

css程式碼:

#parent {
    height: 500px;
    display: grid;
    grid-template-columns: repeat(6,1fr);  /*6就是列數*/
}
.column{}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

複製程式碼

6.2 九宮格佈局

效果圖:

image.png
(1)使用table實現

html程式碼:

<body>
<div id="parent">
    <div class="row">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <div class="row">
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <div class="row">
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
</div>
</body>

複製程式碼

css程式碼:

#parent {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    display: table;
}
.row {
    display: table-row;
}
.item {
    border: 1px solid #000;
    display: table-cell;
}

複製程式碼

優缺點：

  • 優點：程式碼簡潔，容易理解；
  • 缺點：margin失效，採用border-spacing表格兩邊的間隔無法消除；不支援ie8-
(2)使用flex實現

html程式碼:

<body>
<div id="parent">
    <div class="row">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <div class="row">
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <div class="row">
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
</div>
</body>

複製程式碼

css程式碼:

#parent {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.row {
    display: flex;
    flex: 1;
}
.item {
    flex: 1;
    border: 1px solid #000;
}

複製程式碼
(3)使用Grid實現

CSS Grid非常強大,可以實現各種各樣的三維佈局,可查閱本文結尾的閱讀推薦

html程式碼:

<body>
<div id="parent">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>
</body>

複製程式碼

css程式碼:

#parent {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /*等同於1fr 1fr 1fr,此為重複的合併寫法*/
    grid-template-rows: repeat(3, 1fr);  /*等同於1fr 1fr 1fr,此為重複的合併寫法*/
}
.item {
    border: 1px solid #000;
}

複製程式碼

6.3 柵格系統

優缺點：

  • 優點：程式碼簡潔，容易理解；提高頁面內容的流動性，能適應多種裝置；
(1)用Less生成 
/*生成柵格系統*/
@media screen and (max-width: 768px){
  .generate-columns(12);     /*此處設定生成列數*/
  .generate-columns(@n, @i: 1) when (@i <= @n) {
    .column-xs-@{i} {
      width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i+1));
  }
}
@media screen and (min-width: 768px){
  .generate-columns(12);    /*此處設定生成列數*/
  .generate-columns(@n, @i: 1) when (@i <= @n) {
    .column-sm-@{i} {
      width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i+1));
  }
}
div[class^="column-xs-"]{
	float: left;
}
div[class^="column-sm-"]{
	float: left;
}
複製程式碼

編譯後的CSS程式碼:

@media screen and (max-width: 768px) {
  .column-xs-1 {  width: 8.33333333%;  }
  .column-xs-2 {  width: 16.66666667%;  }
  .column-xs-3 {  width: 25%;  }
  .column-xs-4 {  width: 33.33333333%;  }
  .column-xs-5 {  width: 41.66666667%;  }
  .column-xs-6 {  width: 50%;  }
  .column-xs-7 {  width: 58.33333333%;  }
  .column-xs-8 {  width: 66.66666667%;  }
  .column-xs-9 {  width: 75%;  }
  .column-xs-10 {  width: 83.33333333%;  }
  .column-xs-11 {  width: 91.66666667%;  }
  .column-xs-12 {  width: 100%;  }
}
@media screen and (min-width: 768px) {
  .column-sm-1 {  width: 8.33333333%;  }
  .column-sm-2 {  width: 16.66666667%;  }
  .column-sm-3 {  width: 25%;  }
  .column-sm-4 {  width: 33.33333333%;  }
  .column-sm-5 {  width: 41.66666667%;  }
  .column-sm-6 {  width: 50%;  }
  .column-sm-7 {  width: 58.33333333%;  }
  .column-sm-8 {  width: 66.66666667%;  }
  .column-sm-9 {  width: 75%;  }
  .column-sm-10 {  width: 83.33333333%;  }
  .column-sm-11 {  width: 91.66666667%;  }  
  .column-sm-12 {  width: 100%;  }
}
div[class^="column-xs-"]{
	float: left;
}
div[class^="column-sm-"]{
	float: left;
}

複製程式碼

七、全屏佈局

效果圖:

image.png
(1)使用絕對定位實現

html程式碼:

<body>
<div id="parent">
    <div id="top">top</div>
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="bottom">bottom</div>
</div>
</body>

複製程式碼

css程式碼:

html, body, #parent {height: 100%;overflow: hidden;}
#parent > div {
    border: 1px solid #000;
}
#top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
}
#left {
    position: absolute;
    top: 100px;  /*值大於等於#top的高度*/
    left: 0;
    bottom: 50px;  /*值大於等於#bottom的高度*/
    width: 200px;
}
#right {
    position: absolute;
    overflow: auto;
    left: 200px;  /*值大於等於#left的寬度*/
    right: 0;
    top: 100px;  /*值大於等於#top的高度*/
    bottom: 50px;  /*值大於等於#bottom的高度*/
}
#bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
}

複製程式碼

優缺點：

  • 優點：容易理解
  • 缺點：程式碼繁多；需要計算好各個盒子的寬高；
(2)使用flex實現

html程式碼:

<body>
<div id="parent">
    <div id="top">top</div>
    <div id="middle">
        <div id="left">left</div>
        <div id="right">right</div>
    </div>
    <div id="bottom">bottom</div>
</div>
</body>

複製程式碼

css程式碼:

*{
    margin: 0;
    padding: 0;
}
html,body,#parent{
    height:100%;
}
#parent {
    display: flex;
    flex-direction: column;
}
#top {
    height: 100px;
}
#bottom {
    height: 50px;
}
#middle {
    flex: 1;
    display: flex;
}
#left {
    width: 200px;
}
#right {
    flex: 1;
    overflow: auto;
}

複製程式碼
(3)使用Grid實現

html程式碼:

<body>
<div id="parent">
    <div id="top">top</div>
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="bottom">bottom</div>
</div>
</body>

複製程式碼

css程式碼:

*{
    margin: 0;
    padding: 0;
}
html, body, #parent {
    height: 100%;
}
#parent {
    width: 100%;
    height: 100%;
    display: grid;
    /*分成2列,第一列寬度200px,第二列1fr平分剩餘的部分,此處換成auto也行*/
    grid-template-columns: 200px 1fr;  
    /*分成3行,第一行高度100px,第二行auto為自適應,此處換成1fr也行,第3行高度為50px*/
    grid-template-rows: 100px auto 50px; 
    /*定義網格區域分佈*/
    grid-template-areas:
        "header header"
        "aside main"
        "footer footer";
}
#parent>div{
    border: 1px solid #000;
}
#top{
    grid-area: header;  /*指定在哪個網格區域*/
}
#left{
    grid-area: aside;  /*指定在哪個網格區域*/
}
#right{
    grid-area: main;  /*指定在哪個網格區域*/
}
#bottom{
    grid-area: footer;  /*指定在哪個網格區域*/
}

複製程式碼

八、網站例項佈局分析：

由於方法眾多,分析的時候想到哪種用哪種了，只要IE9和谷歌上表現一致，我就不一一測試其他瀏覽器了，如果有什麼問題或意見，請留言！

8.1 小米官網

https://www.mi.com/

8.1.1 相容IE9+的方法
(1)頁面整體

整個頁面我們可以分成頂、上、中、下、底五個結構,如圖所示:

image.png

html程式碼:

<body>
<div class="header"></div>
<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>
<div class="footer"></div>
</body>

複製程式碼

css程式碼:

*{  /*為了方便,就這樣清空預設樣式了*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}
body{
    background-color: #f5f5f5;
}
.header{
    margin-bottom: 20px;
    height: 40px;
    background-color: #333;
}
.top{
    height: 1210px;
    background-color: #fff;
}
.center{
    width: 1226px;
    margin: 0 auto;
    margin-bottom: 60px;
    height: 1791px;
    background-color: #fff;
}
.bottom{
    height: 274px;
    background-color: #fff;
}
.footer{
    margin: 0 auto;
    width: 1226px;
    height: 166px;
    border: 1px solid #000;
}

複製程式碼
(2)區域性——header

header部分首先是一個水平居中的內容，內容盒子可以分成左右兩個部分，如圖所示：

image.png

html程式碼：

<div class="header">
    <div class="container">
        <div class="header-left"></div>
        <div class="header-rigth"></div>
    </div>
</div>

複製程式碼

css程式碼：

.container{  /*後面會繼續用到*/
    width: 1226px;
    height: 100%;
    margin: 0 auto;
    border: 1px solid #f00;
}
.header-left{
    width: 380px;
    height: 100%;
    float: left;
    background-color: #0f0;
}
.header-rigth{
    width: 260px;
    height: 100%;
    float: right;
    background-color: #0f0;
}

複製程式碼
(3)區域性——top

top部分先有一個水平居中的內容，再就是內容由上到下可以分成四個部分，然後每個部分再細分……說不下去了，直接上圖：

image.png

html程式碼：

<div class="top">
    <div class="container">
        <div class="top-nav"></div>
        <div class="top-slider">
            <div class="slider-navbar"></div>
        </div>
        <div class="top-recommend">
            <div class="recommend-left"></div>
            <div class="recommend-right">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <div class="top-flashsale">
            <div class="flashsale-title"></div>
            <div class="flashsale-content">
                <div class="content-timer"></div>
                <ul class="content-shops">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
</div>

複製程式碼

css程式碼：

.top {
    height: 1210px;
    background-color: #fff;
}
.top-nav {
    height: 100px;
    background-color: #f00;
}
.top-slider {
    margin-bottom: 14px;
    position: relative;
    height: 460px;
    background-color: #00f;
}
.slider-navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 234px;
    height: 100%;
    background-color: black;
    opacity: .5;
}
.top-recommend {
    margin-bottom: 26px;
    height: 170px;
    background-color: #0f0;
}
.recommend-left {
    float: left;
    height: 100%;
    width: 234px;
    background-color: skyblue;
}
.recommend-right {
    float: right;
    width: 978px;
    height: 100%;
    border: 1px solid #000;
}
.recommend-right > ul {
    height: 100%;
}
.recommend-right > ul li {
    float: left;
    width: 316px;
    height: 100%;
    background-color: deepskyblue;
}
.recommend-right > ul li + li {
    margin-left: 14px;
}
.top-flashsale {
    height: 438px;
    background-color: #ff4455;
}
.flashsale-title {
    height: 58px;
    background-color: purple;
}
.flashsale-content {
    border: 1px solid #000;
    padding-bottom: 40px;
    height: 380px;
}
.content-timer {
    margin-right: 14px;
    float: left;
    width: 234px;
    height: 100%;
    background-color: #fff;
}
.content-shops {
    overflow: hidden;
    height: 100%;
    background-color: #6effb1;
}
.content-shops > li {
    float: left;
    width: 234px;
    height: 100%;
    background-color: #fff;
}
.content-shops > li+li {
    margin-left: 12.5px;
}

複製程式碼
(4)區域性——center

center部分都是一些單元格展示,有很多類似的模組,就挑幾個來實現了，直接看圖吧：

image.png
image.png
image.png

html程式碼：

<div class="center">
    <div class="center-phone">
        <div class="phone-title"></div>
        <div class="phone-content">
            <div class="phone-left"></div>
            <ul class="phone-right">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

    <div class="center-household">
        <div class="household-title"></div>
        <div class="household-content">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li>
                <p></p>
                <p></p>
            </li>
        </div>
    </div>

    <div class="center-video">
        <div class="video-title"></div>
        <ul class="video-content">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

複製程式碼

css程式碼：

.center {
    margin: 0 auto;
    margin-bottom: 60px;
    padding-top: 60px;
    width: 1226px;
    height: 1791px;
    background-color: #fff;
}
.center-phone{
    margin-bottom: 8px;
    height: 686px;
    background-color: yellow;
}
.phone-title{
    height: 58px;
    background-color: black;
}
.phone-content{
    height: 628px;
    background-color: pink;
}
.phone-left{
    margin-right: 14px;
    float: left;
    width: 234px;
    height: 100%;
    background-color: darkseagreen;
}
.phone-right{
    overflow: hidden;
    height: 100%;
    background-color: #ccc;
}
.phone-right>li{
    margin-bottom: 28px;
    padding-left: 14px;
    float: left;
    width: 25%;
    height: 300px;
    border: 1px solid #000;
    background-color: #f00;
    background-clip: content-box;
}
.phone-right>li:nth-child(1),
.phone-right>li:nth-child(5){
    margin-left: 0;
}
.center-household{
    margin-bottom: 8px;
    height: 686px;
    background-color: yellow;
}
.household-title{
    height: 58px;
    background-color: black;
}
.household-content{
    height: 614px;
}
.household-content>li{
    position: relative;
    margin-left: 14px;
    margin-bottom: 28px;
    float: left;
    width: 234px;
    height: 300px;
    background-color: #d7d7d7;
}
.household-content>li:nth-child(1),
.household-content>li:nth-child(6){
    margin-left: 0;
}
.household-content>li:last-child p:first-child{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 143px;
    border: 1px solid #000;
}
.household-content>li:last-child p:last-child{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 143px;
    border: 1px solid #000;
}
.center-video{
    height: 343px;
    background-color: pink;
}
.video-title{
    height: 58px;
    background-color: black;
}
.video-content{
    height: 285px;
}
.video-content>li{
    float: left;
    width: 296px;
    height: 100%;
    border: 1px solid #000;
}
.video-content>li+li{
    margin-left: 14px;
}

複製程式碼
(5)區域性——bottom

bottom部分首先是一個水平居中的內容,然後內容可以劃分為上下兩部分,每個部分都是浮動的li,如圖:

image.png

html程式碼:

<div class="bottom">
    <div class="container">
        <div class="bottom-service">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="bottom-links">
            <div class="links-left">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="links-right"></div>
        </div>
    </div>
</div>

複製程式碼

css程式碼:

.bottom {
    height: 274px;
    background-color: #fff;
}
.bottom-service{
    height: 80px;
    background-color: seagreen;
}
.bottom-service>ul{
    height: 100%;
}
.bottom-service>ul li{
    position: relative;
    padding: 0 50px;
    float: left;
    width: 20%;
    height: 100%;
    background-color: goldenrod;
    background-clip: content-box;
}
.bottom-service>ul li+li::before{
    position: absolute;
    top: 28px;
    left: 0;
    content: ``;
    width: 1px;
    height: 24px;
    background-color: #999;
}
.bottom-links{
    height: 192px;
    background-color: #8545e0;
}
.links-left{
    float: left;
    width: 960px;
    height: 100%;
    background-color: yellow;
}
.links-left>ul{
    height: 100%;
}
.links-left>ul li{
    padding-right: 60px;
    float: left;
    width: 16.666666666666667%;
    height: 100%;
    border: 1px solid #000;
    background-color: #ff0000;
    background-clip: content-box;
}
.links-right{
    float: right;
    width: 252px;
    height: 100%;
    background-color: yellow;
}

複製程式碼
(6)區域性——footer

footer劃分如圖:

image.png

html程式碼:

<div class="footer">
    <div class="footer-info">
        <div class="info-left"></div>
        <div class="info-right"></div>
    </div>
    <div class="footer-slogan"></div>
</div>

複製程式碼

css程式碼:

.footer {
    margin: 0 auto;
    padding: 30px 0;
    width: 1226px;
    height: 166px;
    border: 1px solid #000;
}
.footer-info{
    height: 57px;
    background-color: #6effb1;
}
.info-left{
    float: left;
    width: 630px;
    height: 100%;
    border: 1px solid #000;
}
.info-right{
    float: right;
    width: 436px;
    height: 100%;
    border: 1px solid #000;
}
.footer-slogan{
    margin-top: 30px;
    height: 19px;
    background-color: #8545e0;
}

複製程式碼
(7)全部程式碼(優化後)

html程式碼:

<body>
<div class="header">
    <div class="container">
        <div class="header-left fl"></div>
        <div class="header-rigth fr"></div>
    </div>
</div>
<div class="top">
    <div class="container">
        <div class="top-nav"></div>
        <div class="top-slider">
            <div class="slider-navbar"></div>
        </div>
        <div class="top-recommend">
            <div class="recommend-left fl"></div>
            <div class="recommend-right fr">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <div class="top-flashsale">
            <div class="flashsale-title common-title"></div>
            <div class="flashsale-content">
                <div class="content-timer fl"></div>
                <ul class="content-shops">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="center">
    <div class="center-phone module-box">
        <div class="phone-title common-title"></div>
        <div class="phone-content">
            <div class="phone-left fl"></div>
            <ul class="phone-right">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

    <div class="center-household module-box">
        <div class="household-title common-title"></div>
        <div class="household-content">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li>
                <p></p>
                <p></p>
            </li>
        </div>
    </div>

    <div class="center-video">
        <div class="video-title common-title"></div>
        <ul class="video-content">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
<div class="bottom">
    <div class="container">
        <div class="bottom-service">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="bottom-links">
            <div class="links-left fl">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="links-right fr"></div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footer-info">
        <div class="info-left fl"></div>
        <div class="info-right fr"></div>
    </div>
    <div class="footer-slogan"></div>
</div>
</body>

複製程式碼

css程式碼:

/*-------------------抽取公共樣式-----------------*/
* { /*為了方便,就這樣清空預設樣式了*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}
body {
    background-color: #f5f5f5;
}
.container {  /*水平居中的內容盒子*/
    width: 1226px;
    height: 100%;
    margin: 0 auto;
    border: 1px solid #f00;
}
.common-title {
    height: 58px;
    background-color: #000;
}
.fl {float: left;}
.fr {float: right;}
.recommend-right,
.flashsale-content,
.phone-right > li,
.household-content > li:last-child > p,
.video-content > li,
.links-left > ul li,
.footer,
.info-left,
.info-right {border: 1px solid #000;}  /*新增邊框樣式只是為了方便觀察,不是佈局必須,可刪*/


/*-----header部分-----*/
.header {
    margin-bottom: 20px;
    height: 40px;
    background-color: #333;
}
.header-left {
    width: 380px;
    height: 100%;
    background-color: #0f0;
}
.header-rigth {
    width: 260px;
    height: 100%;
    background-color: #0f0;
}


/*--------top部分--------*/
.top {
    /*height: 1210px;*/
    background-color: #fff;
}
.top-nav {
    height: 100px;
    background-color: #f00;
}
.top-slider {
    margin-bottom: 14px;
    position: relative; /*父相*/
    height: 460px;
    background-color: #00f;
}
.slider-navbar {
    position: absolute; /*子絕*/
    top: 0;
    left: 0;
    width: 234px;
    height: 100%;
    background-color: black;
    opacity: .5;
}
.top-recommend {
    margin-bottom: 26px;
    height: 170px;
    background-color: #0f0;
}
.recommend-left {
    height: 100%;
    width: 234px;
    background-color: skyblue;
}
.recommend-right {
    width: 978px;
    height: 100%;
}
.recommend-right > ul {height: 100%;}
.recommend-right > ul li {
    float: left; /*三列等寬,浮動佈局*/
    width: 316px;
    height: 100%;
    background-color: deepskyblue;
}
.recommend-right > ul li + li { margin-left: 14px;}  /*設定浮動間隔*/
.top-flashsale {
    height: 438px;
    background-color: #ff4455;
}
.flashsale-title {}
.flashsale-content {
    padding-bottom: 40px;
    height: 380px;
}
.content-timer {
    margin-right: 14px;
    width: 234px;
    height: 100%;
    background-color: #fff;
}
.content-shops {
    overflow: hidden; /*觸發bfc,以達到自適應*/
    height: 100%;
    background-color: #6effb1;
}
.content-shops > li {
    float: left; /*四列等寬,浮動佈局*/
    width: 234px;
    height: 100%;
    background-color: #fff;
}
.content-shops > li + li {margin-left: 12.5px;}  /*設定浮動間隔*/


/*--------center部分--------*/
.module-box {  /*類似的模組*/
    margin-bottom: 8px;
    height: 686px;
}
.center {
    margin: 0 auto;
    margin-bottom: 60px;
    padding-top: 60px;
    width: 1226px;
    /*height: 1791px;*/
    background-color: #fff;
}
.center-phone {background-color: yellow;}
.phone-title {}
.phone-content {
    height: 628px;
    background-color: pink;
}
.phone-left {
    width: 234px;
    height: 100%;
    background-color: darkseagreen;
}
.phone-right {
    overflow: hidden; /*觸發bfc以達到自適應*/
    height: 100%;
    background-color: #ccc;
}
.phone-right > li {
    margin-bottom: 28px; /*設定下邊距*/
    padding-left: 14px; /*用padding模擬盒子間隔*/
    float: left; /*四列等寬,浮動佈局*/
    width: 25%;
    height: 300px;
    background-color: #f00;
    background-clip: content-box; /*背景色從content開始繪起*/
}
.center-household {background-color: yellow;}
.household-title {}
.household-content {height: 614px;}
.household-content > li {
    position: relative; /*父相*/
    margin-left: 14px; /*設定浮動間隔*/
    margin-bottom: 28px; /*設定下邊距*/
    float: left; /*五列等寬,浮動佈局*/
    width: 234px;
    height: 300px;
    background-color: #d7d7d7;
}
.household-content > li:nth-child(1),
.household-content > li:nth-child(6) {margin-left: 0; }  /*消除每行第一個的間隔*/
.household-content > li:last-child p:first-child {
    position: absolute; /*子絕*/
    top: 0;
    left: 0;
    right: 0;
    height: 143px;
}
.household-content > li:last-child p:last-child {
    position: absolute; /*子絕*/
    bottom: 0;
    left: 0;
    right: 0;
    height: 143px;
}
.center-video {
    height: 343px;
    background-color: pink;
}
.video-title {}
.video-content {height: 285px;}
.video-content > li {
    float: left; /*四列等寬,浮動佈局*/
    width: 296px;
    height: 100%;
}
.video-content > li + li {margin-left: 14px; }   /*設定浮動間隔*/


/*--------bottom部分--------*/
.bottom {
    /*height: 274px;*/
    background-color: #fff;
}
.bottom-service {
    height: 80px;
    background-color: seagreen;
}
.bottom-service > ul {height: 100%;}
.bottom-service > ul li {
    position: relative; /*父相*/
    padding: 0 50px; /*用padding模擬盒子間隔*/
    float: left; /*五列等寬,浮動佈局*/
    width: 20%;
    height: 100%;
    background-color: goldenrod;
    background-clip: content-box; /*背景色從content開始繪起*/
}
.bottom-service > ul li + li::before { /*用偽元素模擬分割線*/
    position: absolute; /*子絕*/
    top: 28px;
    left: 0;
    content: ``; /*偽元素必須有content*/
    width: 1px;
    height: 24px;
    background-color: #999;
}
.bottom-links {
    height: 192px;
    background-color: #8545e0;
}
.links-left {
    width: 960px;
    height: 100%;
    background-color: yellow;
}
.links-left > ul {height: 100%;}
.links-left > ul li {
    padding-right: 60px;
    float: left; /*六列等寬,浮動佈局*/
    width: 16.666666666666667%;
    height: 100%;
    background-color: #ff0000;
    background-clip: content-box; /*背景色從content開始繪起*/
}
.links-right {
    width: 252px;
    height: 100%;
    background-color: yellow;
}


/*--------footer部分---------*/
.footer {
    margin: 0 auto;
    padding: 30px 0;
    width: 1226px;
    height: 166px;
}
.footer-info {
    height: 57px;
    background-color: #6effb1;
}
.info-left {
    width: 630px;
    height: 100%;
}
.info-right {
    width: 436px;
    height: 100%;
}
.footer-slogan {
    margin-top: 30px;
    height: 19px;
    background-color: #8545e0;
}

複製程式碼

以上就是優化後的程式碼了，由於在下才疏學淺，所用方法不敢保證是最簡單的，優化也肯定不是最優的，僅僅是的我的一種思路而已，各位參考參考就好。

8.1.2 Flexbox+Grid搭配用法(未來…)

html程式碼:

<body>
<div class="header">
    <div class="container">
        <div class="header-left"></div>
        <div class="header-rigth"></div>
    </div>
</div>
<div class="top">
    <div class="container">
        <div class="top-nav"></div>
        <div class="top-slider">
            <div class="slider-navbar"></div>
        </div>
        <div class="top-recommend-left"></div>
        <div class="top-recommend-right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="top-flashsale-title"></div>
        <div class="top-flashsale-timer"></div>
        <ul class="top-flashsale-shops">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
<div class="center">
    <div class="center-phone-title"></div>
    <div class="center-phone-content">
        <div class="phone-content-item1"></div>
        <div class="phone-content-item2"></div>
        <div class="phone-content-item3"></div>
        <div class="phone-content-item4"></div>
        <div class="phone-content-item5"></div>
        <div class="phone-content-item6"></div>
        <div class="phone-content-item7"></div>
        <div class="phone-content-item8"></div>
        <div class="phone-content-item9"></div>
    </div>

    <div class="center-household-title"></div>
    <div class="center-household-content">
        <div class="row">
            <div class="household-content-item"></div>
            <div class="household-content-item"></div>
            <div class="household-content-item"></div>
            <div class="household-content-item"></div>
            <div class="household-content-item"></div>
        </div>
        <div class="row">
            <div class="household-content-item"></div>
            <div class="household-content-item"></div>
            <div class="household-content-item"></div>
            <div class="household-content-item"></div>
            <div class="household-content-item">
                <p></p>
                <p></p>
            </div>
        </div>


    </div>

    <div class="center-video-title"></div>
    <ul class="center-video-content">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<div class="bottom">
    <div class="container">
        <div class="bottom-service">
            <div class="service-item"></div>
            <div class="service-item"></div>
            <div class="service-item"></div>
            <div class="service-item"></div>
            <div class="service-item"></div>
        </div>
        <div class="bottom-links-left">
            <div class="links-left-item"></div>
            <div class="links-left-item"></div>
            <div class="links-left-item"></div>
            <div class="links-left-item"></div>
            <div class="links-left-item"></div>
            <div class="links-left-item"></div>
        </div>
        <div class="bottom-links-right"></div>
    </div>
</div>
<div class="footer">
    <div class="footer-info">
        <div class="info-left"></div>
        <div class="info-right"></div>
    </div>
    <div class="footer-slogan"></div>
</div>
</body>

複製程式碼

css程式碼:

/*-------------------抽取公共樣式-----------------*/
* { /*為了方便,就這樣清空預設樣式了*/
    margin: 0;
    padding: 0;
    list-style: none;
}
body {
    background-color: #f5f5f5;
    display: grid;
    /*整體佈局 設定網格列,設定網格行,再設定網格區域*/
    grid-template-columns: 1fr 1226px 1fr;
    grid-template-rows: 40px 20px auto auto 274px 166px;
    grid-template-areas:
        "header header header"
        ". . ." 
        "top top top"
        ". center ."
        "bottom bottom bottom"
        ". footer .";
}
.container { /*水平居中的內容盒子*/
    width: 1226px;
    height: 100%;
    margin: 0 auto;
    border: 1px solid #f00;
}
.top-recommend-right,
.top-flashsale-timer,
.top-flashsale-shops li,
.center-phone-content > div,
.center-household-content .row,
.household-content-item:last-of-type p,
.center-video-content li,
.service-item,
.links-left-item,
.info-left,
.info-right,
.info-right {border: 1px solid #000;}  /*新增邊框樣式只是為了方便觀察,不是佈局必須,可刪*/


/*-----header部分-----*/
.header {
    grid-area: header; /*指定網格區域*/
    background-color: #333;
}
.header .container {
    display: flex;
    justify-content: space-between;
}
.header-left {
    width: 380px;
    background-color: #0f0;
}
.header-rigth {
    width: 260px;
    background-color: #0f0;
}


/*--------top部分--------*/
.top {
    grid-area: top; /*指定網格區域*/
    background-color: #fff;
}
.top .container {
    display: grid;
    /*top部分佈局 設定網格行,設定網格列,再設定網格區域*/
    grid-template-rows: 100px 460px 14px 170px 26px 58px 340px 40px;
    grid-template-columns: auto 14px 978px;
    grid-template-areas:
        "top-nav top-nav top-nav"
        "top-slider top-slider top-slider"
        ". . ."
        "recommend-left . recommend-right"
        ". . ."
        "flashsale-title flashsale-title flashsale-title"
        "flashsale-timer . flashsale-shops"
        ". . .";
}
.top-nav {
    grid-area: top-nav;
    background-color: #f00;
}
.top-slider {
    position: relative;
    grid-area: top-slider;
    background-color: #00f;
}
.top-slider .slider-navbar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 234px;
    background-color: black;
    opacity: .5;
}
.top-recommend-left {
    grid-area: recommend-left;
    background-color: skyblue;
}
.top-recommend-right {grid-area: recommend-right;}
.top-recommend-right > ul {
    display: flex;
    justify-content: space-between;
    height: 100%;
}
.top-recommend-right li {
    width: 316px;
    background-color: deepskyblue;
}
.top-flashsale-title {
    grid-area: flashsale-title;
    background-color: #000;
}
.top-flashsale-timer {
    grid-area: flashsale-timer;
    background-color: #fff;
}
.top-flashsale-shops {
    display: flex;
    justify-content: space-between;
    grid-area: flashsale-shops;
    background-color: #6effb1;
}
.top-flashsale-shops li {width: 234px;}


/*--------center部分--------*/
.center {
    margin-bottom: 60px;  /*邊距可以在網格分割槽的時候考慮進去,把邊距設成一行或一列,不要放內容就好了*/
    padding-top: 60px;
    grid-area: center; /*指定網格區域*/
    display: flex;
    flex-direction: column;
    background-color: #fff;
}
.center-phone-title {
    height: 58px;
    background-color: black;
}
.center-phone-content {
    margin-bottom: 8px;
    display: grid;
    /*這裡用flex分格更好,程式碼更少更簡潔*/
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
        "big1 normal2 normal3 normal4 normal5"
        "big1 normal6 normal7 normal8 normal9";
    grid-gap: 14px; /*網格間隔*/
    height: 628px;
    background-color: pink;
}
.phone-content-item1 {grid-area: big1;}
.phone-content-item2 {grid-area: normal2;}
.phone-content-item3 {grid-area: normal3;}
.phone-content-item4 {grid-area: normal4;}
.phone-content-item5 {grid-area: normal5;}
.phone-content-item6 {grid-area: normal6;}
.phone-content-item7 {grid-area: normal7;}
.phone-content-item8 {grid-area: normal8;}
.phone-content-item9 {grid-area: normal9;}
.center-household-title {
    height: 58px;
    background-color: black;
}
.center-household-content {
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    height: 614px;
    background-color: pink;
}
.center-household-content .row {
    display: flex;
    justify-content: space-between;
    flex: 1;
}
.row .household-content-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 234px;
    background-color: #fff;
}
.household-content-item:last-of-type p {height: 143px;}
.center-video-title {
    height: 58px;
    background-color: black;
}
.center-video-content {
    display: flex;
    justify-content: space-between;
    height: 285px;
    background-color: pink;
}
.center-video-content li {width: 296px;}


/*--------bottom部分--------*/
.bottom {
    grid-area: bottom; /*指定網格區域*/
    background-color: #fff;
}
.bottom .container {
    display: grid;
    grid-template-columns: auto 252px;
    grid-template-rows: 80px auto;
    grid-template-areas: "service service" "links-left links-right";
}
.container .bottom-service {
    display: flex;
    grid-area: service;
    background-color: seagreen;
}
.service-item {flex: 1;}
.container .bottom-links-left {
    display: flex;
    grid-area: links-left;
    background-color: yellow;
}
.links-left-item {flex: 1;}
.container .bottom-links-right {
    grid-area: links-right;
    background-color: yellowgreen;
}


/*--------footer部分---------*/
.footer {
    padding: 30px 0;
    grid-area: footer; /*指定網格區域*/
}
.footer-info {
    display: flex;
    justify-content: space-between;
    height: 57px;
    background-color: #6effb1;
}
.info-left {width: 630px;}
.info-right {width: 436px;}
.footer-slogan {
    margin-top: 30px;
    height: 19px;
    background-color: #8545e0;
}

複製程式碼

九、其他補充：

9.1 移動端viewport

設定viewport：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

複製程式碼
閱讀推薦：

解讀 viewport—網頁自適應移動 app 神器

https://juejin.im/entry/58e750a02f301e0062367ded

9.2 媒體查詢

程式碼示例: 
@media (max-width: 767px) { ...css程式碼... }
@media (min-width: 768px) and (max-width: 991px) { ...css程式碼... }
@media (min-width: 992px) and (max-width: 1199px) { ...css程式碼... }
@media (min-width: 1200px) { ...css程式碼... }

複製程式碼
閱讀推薦:

MDN文件介紹

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

隨方逐圓 — 全面理解 CSS 媒體查詢

https://juejin.im/entry/595b6208f265da6c3902041e

9.3 REM

閱讀推薦:

Rem佈局的原理解析

http://yanhaijing.com/css/2017/09/29/principle-of-rem-layout/

rem是如何實現自適應佈局的？

rem是如何實現自適應佈局的？

9.4 Flexbox

閱讀推薦

理解Flexbox：你需要知道的一切

https://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html

深入理解 flex 佈局以及計算

https://www.w3cplus.com/css3/flexbox-layout-and-calculation.html?from=groupmessage

9.5 CSS Grid

閱讀推薦

grid佈局學習指南

IT兄弟連2019年課程升級—Java學科課程升級說明

grid規範草稿

https://drafts.csswg.org/css-grid/

End：感謝

感謝大家閱讀，喜歡的就點個收藏或者Star吧！各位的支援，就是本人的最大動力，謝謝！

相關文章