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

来源:https://www.cnblogs.com/kk-here/archive/2018/03/13/8534742.html
-Advertisement-
Play Games

各種頁面常見佈局+知名網站實例分析+相關閱讀推薦 閱前必看：本文總結了各種常見的佈局實現,每個方法的優缺點分析往後在github上陸續補充。還有就是這篇文章沒提到的其他佈局，待本人後續想到或遇到定會在github上及時更新。由於文章篇幅較長,排版有些混亂,希望別介意哈。為了方便閱讀，還特意做了個錨點 ...


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

閱前必看：本文總結了各種常見的佈局實現,每個方法的優缺點分析往後在github上陸續補充。還有就是這篇文章沒提到的其他佈局，待本人後續想到或遇到定會在github上及時更新。由於文章篇幅較長,排版有些混亂,希望別介意哈。為了方便閱讀，還特意做了個錨點目錄,一個個標題重寫,真心累~~在github上還是保留原版本md語法的,這樣我以後更新就不用改標題了。各位讀者如果發現問題或者有什麼意見，歡迎提出！——歡迎收藏！歡迎Star！

from github https://github.com/Sweet-KK/css-layout(內容隨時更新)
本文原創，轉載請標明出處，摘要引流則隨意。

目錄

註：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>
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一. 數組去重的幾個方法
    一 . ES6數組去重 1.拓展運算符(...)內部使用for...of迴圈, Set數據結構，它類似於數組，其成員的值都是唯一的. var arr = [3,5,6,5,4,6,9] console.log(...new Set(arr)) // [3,5,6,4,9] 2.利用Array.fro ...
  • Css float 盒子模型 position
    屬性： float 浮動 浮動的內容用div包起來，給div設置寬高 clear 清除浮動。 box-sizing 標準模式下的盒模型 content-box：(預設屬性) padding和border不被包含在定義的width和height之內。對象的實際寬度等於設置的width值和border、 ...
  • js去重合併
    1.去重 for(var q = 0;q<jsonArr.length;q++){ for(var e=0;e<jsonArr[q].data.length;e++){ var matchCode = jsonArr[q].data[e]; var chua = jsonArr[q].jsonObj ...
  • 淺談對js原型的理解
    一. 在JavaScript中，一切皆對象，每個對象都有一個原型對象(prototype)，而指向該原型對象的內部指針則是__proto__。當我們對對象進行for in 或者for of遍歷時，就會通過__proto__依次遍歷對象關聯的所有對象。這就是原型鏈，遍歷所有對象的父對象直到object ...
  • 用Canvas寫一個簡單的游戲--別踩白塊兒
    第一次寫博客也不知怎麼寫，反正就按照我自己的想法來吧！怎麼說呢？還是不要扯那些多餘的話了，直接上正題吧! 第一次用canvas寫游戲，所以挑個簡單實現點的來乾：別踩白塊兒，其他那些怎麼操作的那些就不用再扯了，大家應該都懂，不懂的看到黑色的就點就是了，扯多了我打字手也累，大概。鏈接給你們：http:/ ...
  • 淘寶cnpm
    npm install -g cnpm --registry=https://registry.npm.taobao.org ...
  • js判斷當前移動設備平臺
    //js判斷當前移動設備平臺 var isiOs = false; var isAndroid = false; var isWindowsPhone = false; if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { isiOS = ...
  • js判斷中文字元串長度和js截取中文字元串
    //獲取字元串長度String.prototype.strLen = function() { var len = 0; for (var i = 0; i < this.length; i++) { if (this.charCodeAt(i) > 255 || this.charCodeAt(i ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類