四十二種布局可以細(xì)分為如下幾類：
- 水平居中
- 垂直居中
- 水平垂直居中
- 兩列布局
- 三列布局
- 等分布局
- Sticky Footer布局
- 全屏布局
水平居中
實(shí)現(xiàn)水平布局比較簡(jiǎn)單，方法也比較多，這里總結(jié)了7種常用的布局方法，其公共的CSS代碼如下所示：
.parent { background: #ff8787; }.child { height: 300px; width: 300px; background: #e599f7; }
其 HTML 結(jié)構(gòu)也是固定的，就是一個(gè)父級(jí)，其寬度繼承了 的寬度，還有一個(gè)子級(jí)，這里是固定的300px*300px，代碼如下：
最終的實(shí)現(xiàn)效果如下：
上圖中玫瑰色的塊是父級(jí)，隨頁(yè)面寬度增加的；淡紫色是子級(jí)，相對(duì)于父級(jí)居中的。
1. 使用text-align屬性
若元素為行內(nèi)塊級(jí)元素，也就是 display: inline-block 的元素，可以通過(guò)為其父元素設(shè)置t ext-align: center 實(shí)現(xiàn)水平居中。實(shí)現(xiàn)的CSS代碼如下：
.parent { /* 對(duì)于子級(jí)為 display: inline-block; 可以通過(guò) text-align: center; 實(shí)現(xiàn)水平居中 */ text-align: center;}.child { display: inline-block;}
2. 定寬塊級(jí)元素水平居中(方法一)
對(duì)于定寬的的塊級(jí)元素實(shí)現(xiàn)水平居中，最簡(jiǎn)單的一種方式就是 margin: 0 auto;，但是值得注意的是一定需要設(shè)置寬度。實(shí)現(xiàn) CSS 代碼如下：
.child { /* 對(duì)于定寬的子元素，直接 margin:0 auto; 即可實(shí)現(xiàn)水平居中 */ margin: 0 auto;}
3. 定寬塊級(jí)元素水平居中(方法二)
對(duì)于開(kāi)啟定位的元素，可以通過(guò) left 屬性 和 margin 實(shí)現(xiàn)。實(shí)現(xiàn)CSS代碼如下：
.child { /* 開(kāi)啟定位 */ position: relative; left: 50%; /* margin-left 為 負(fù)的寬度的一半 */ margin-left: -150px;}
4. 定寬塊級(jí)元素水平居中(方法三)
當(dāng)元素開(kāi)啟決定定位或者固定定位時(shí)， left 屬性和 right 屬性一起設(shè)置就會(huì)拉伸元素的寬度，再配合 width 屬性與 margin 屬性就可以實(shí)現(xiàn)水平居中。
實(shí)現(xiàn) CSS 代碼如下：
.parent { position: relative; height: 300px;}.child { /* 開(kāi)啟定位 父相子絕 */ position: absolute; /* 水平拉滿屏幕 */ left: 0; right: 0; width: 300px; /* 拉滿屏幕之后設(shè)置寬度，最后通過(guò) margin 實(shí)現(xiàn)水平居中 */ margin: auto;}
5. 定寬塊級(jí)元素水平居中(方法四)
當(dāng)元素開(kāi)啟絕對(duì)定位或者固定定位時(shí)， left 屬性和 transform 屬性即可實(shí)現(xiàn)水平居中。
實(shí)現(xiàn)CSS代碼如下：
.parent { position: relative;}.child { /* 開(kāi)啟定位 */ position: absolute; /* 該方法類似于 left 于 -margin 的用法，但是該方法不需要手動(dòng)計(jì)算寬度。 */ left: 50%;// 距離父元素50% transform: translateX(-50%); // 移動(dòng)自身寬度的50%}
6. Flex方案
通過(guò) Flex 可以有很多方式實(shí)現(xiàn)這個(gè)居中布局的效果。
實(shí)現(xiàn) CSS 代碼如下
.parent { height: 300px; /* 開(kāi)啟 Flex 布局 */ display: flex; /* 通過(guò) justify-content 屬性實(shí)現(xiàn)居中 */ justify-content: center;}.child { /* 或者 子元素 margin: auto*/ margin: auto;}
7. Grid方案
通過(guò)Grid實(shí)現(xiàn)居中布局比通過(guò)Flex實(shí)現(xiàn)的方式更多一些。
實(shí)現(xiàn)CSS代碼如下：
.parent { height: 300px; /* 開(kāi)啟 Grid 布局 */ display: grid; /* 方法一 */ justify-items: center; /* 方法二 */ justify-content: center;}.child { /* 方法三 子元素 margin: auto*/ margin: auto;}
以上就是水平居中布局常用的幾種方式。
垂直居中
實(shí)現(xiàn)垂直布局也是比較簡(jiǎn)單的，方法也比較多，這里總結(jié)了6種常用的布局方法，其公共的 CSS 代碼如下所示：
.parent { height: 500px; width: 300px; margin: 0 auto; background-color: #ff8787;}.child { width: 300px; height: 300px; background-color: #91a7ff;}
其 HTML 結(jié)構(gòu)也是固定的，就是一個(gè)父級(jí)包裹一個(gè)子級(jí)，這里的子級(jí)是固定的300px*300px，代碼如下：
最終的實(shí)現(xiàn)效果如下：
1. 行內(nèi)塊級(jí)元素垂直居中
若元素是行內(nèi)塊級(jí)元素, 基本思想是子元素使用display: inline-block, vertical-align: middle;并讓父元素行高等同于高度。
實(shí)現(xiàn)CSS代碼如下：
.parent { /* 為父級(jí)容器設(shè)置行高 */ line-height: 500px;}.child { /* 將子級(jí)元素設(shè)置為 inline-block 元素 */ display: inline-block; /* 通過(guò) vertical-align: middle; 實(shí)現(xiàn)居中 */ vertical-align: middle;}
2. 定位方式實(shí)現(xiàn)(方法一)
第一種通過(guò)定位的方式實(shí)現(xiàn)就比較簡(jiǎn)單，實(shí)際就是通過(guò)top: 50%; margin-top: 等于負(fù)的高度的一半就可以實(shí)現(xiàn)垂直居中。
實(shí)現(xiàn)CSS代碼如下：
.parent { /* 為父級(jí)容器開(kāi)啟相對(duì)定位 */ position: relative;}.child { position: absolute; top: 50%; /* margin-top: 等于負(fù)高度的一半 */ margin-top: -150px;}
3. 定位方式實(shí)現(xiàn)(方法二)
第二種通過(guò)定位的方式實(shí)現(xiàn)實(shí)現(xiàn)思路：top 和 bottom 將子元素拉伸至100%，設(shè)置指定的高度，通過(guò)margin:auto;即可實(shí)現(xiàn)垂直居中。
實(shí)現(xiàn)CSS代碼如下：
.parent { /* 為父級(jí)容器開(kāi)啟相對(duì)定位 */ position: relative;}.child { height: 300px; position: absolute; /* 垂直拉滿 */ top: 0; bottom: 0; /* margin: auto 即可實(shí)現(xiàn) */ margin: auto;}
4. 定位方式實(shí)現(xiàn)(方法三)
第三種通過(guò)定位的方式就比較靈活，適用于多種場(chǎng)合，使用 top 配合 tansform 即可。
實(shí)現(xiàn)CSS代碼如下：
.parent { /* 為父級(jí)容器開(kāi)啟相對(duì)定位 */ position: relative;}.child { position: absolute; top: 50%; transform: translateY(-50%);}
5. Flex方案
通過(guò) Flex 可以有很多方式實(shí)現(xiàn)這個(gè)垂直居中布局的效果。
實(shí)現(xiàn)CSS代碼如下：
.parent { /* 開(kāi)啟 flex 布局 */ display: flex; /* 方法一 */ /* align-items: center; */}.child { /* 方法二 */ margin: auto;}
通過(guò) Flex 布局實(shí)現(xiàn)不僅僅只有上面兩種，這里只介紹最簡(jiǎn)單的方式。
6. Grid方案
通過(guò) Grid 實(shí)現(xiàn)居中布局比通過(guò) Flex 實(shí)現(xiàn)的方式更多一些。
實(shí)現(xiàn)CSS代碼如下：
.parent { display: grid; /* 方法一 */ /* align-items: center; */ /* 方法二 */ /* align-content: center; */}.child { /* 方法三 */ /* margin: auto; */ /* 方法四 */ align-self: center;}
以上就是垂直居中布局常用的幾種方式。
水平垂直居中
實(shí)現(xiàn)水平垂直布局基本就是將上面幾種方式結(jié)合使用，這里總結(jié)了7種常用的布局方法，其公共的 CSS 代碼如下所示：
body { margin: 0;}.parent { height: 500px; width: 500px; background-color: #eebefa; margin: 0 auto;}.child { height: 300px; width: 300px; background-color: #f783ac;}
其 HTML 結(jié)構(gòu)也是固定的，就是一個(gè)父級(jí)包裹一個(gè)子級(jí)，這里的子級(jí)是固定的300px*300px，代碼如下：
最終的實(shí)現(xiàn)效果如下：
1. 行內(nèi)塊級(jí)水平垂直居中方案
步驟如下：
- 容器元素行高等于容器高度
- 通過(guò) text-align: center; 實(shí)現(xiàn)水平居中
- 將子級(jí)元素設(shè)置為水平塊級(jí)元素
- 通過(guò) vertical-align: middle; 實(shí)現(xiàn)垂直居中
實(shí)現(xiàn)CSS代碼如下：
.parent { /* 1. 設(shè)置行高等于容器高度 */ line-height: 500px; /* 通過(guò) text-align: center; 實(shí)現(xiàn)水平居中 */ text-align: center;}.child { /* 將子級(jí)元素設(shè)置為水平塊級(jí)元素 */ display: inline-block; /* 通過(guò) vertical-align: middle; 實(shí)現(xiàn)垂直居中 */ vertical-align: middle;}
2. 定位實(shí)現(xiàn)水平垂直居中方案(一)
步驟如下：
- 使子元素相對(duì)于容器元素定位
- 子元素開(kāi)啟絕對(duì)定位
- 設(shè)置該元素的偏移量，值為50% 減去寬度/高度的一半
實(shí)現(xiàn)CSS代碼如下：
.parent { /* 1. 使子元素相對(duì)于本元素定位 */ position: relative;}.child { /* 2. 開(kāi)啟絕對(duì)定位 */ position: absolute; /* 3. 設(shè)置該元素的偏移量，值為 50%減去寬度/高度的一半 */ left: calc(50% – 150px); top: calc(50% – 150px);}
3. 定位實(shí)現(xiàn)水平垂直居中方案(二)
步驟如下：
- 使子元素相對(duì)于容器元素定位
- 子元素開(kāi)啟絕對(duì)定位
- 設(shè)置該元素的偏移量，值為50%
- 通過(guò)外邊距-值的方式將元素移動(dòng)回去
實(shí)現(xiàn)CSS代碼如下：
.parent { /* 1. 使子元素相對(duì)于本元素定位 */ position: relative;}.child { /* 2. 開(kāi)啟絕對(duì)定位 */ position: absolute; /* 3. 設(shè)置該元素的偏移量，值為 50% */ left: 50%; top: 50%; margin-left: -150px; margin-top: -150px;}
4. 定位實(shí)現(xiàn)水平垂直居中方案(三)
步驟如下：
- 使子元素相對(duì)于容器元素定位
- 子元素開(kāi)啟絕對(duì)定位
- 將子元素拉滿整個(gè)容器
- 通過(guò)margin:auto實(shí)現(xiàn)水平垂直居中
實(shí)現(xiàn)CSS代碼如下：
.parent { /* 1. 使子元素相對(duì)于本元素定位 */ position: relative;}.child { /* 2. 開(kāi)啟絕對(duì)定位 */ position: absolute; /* 3. 將子元素拉滿整個(gè)容器 */ top: 0; left: 0; right: 0; bottom: 0; /* 4. 通過(guò) margin:auto 實(shí)現(xiàn)水平垂直居中 */ margin: auto;}
5. 定位實(shí)現(xiàn)水平垂直居中方案(四)
步驟如下：
- 使子元素相對(duì)于容器元素定位
- 子元素開(kāi)啟絕對(duì)定位
- 設(shè)置該元素的偏移量，值為50%
- 通過(guò) translate 反向偏移的方式，實(shí)現(xiàn)居中
實(shí)現(xiàn) CSS 代碼如下：
.parent { /* 1. 使子元素相對(duì)于本元素定位 */ position: relative;}.child { /* 2. 開(kāi)啟絕對(duì)定位 */ position: absolute; /* 3. 設(shè)置該元素的偏移量，值為 50%*/ left: 50%; top: 50%; /* 通過(guò)translate反向偏移的方式，實(shí)現(xiàn)居中 */ transform: translate(-50%, -50%);}
6. Flex方案
步驟如下：
- 將元素設(shè)置為 Flex 布局
- 通過(guò) justify-content: center 以及 align-items: center 實(shí)現(xiàn)或者 margin: auto; 實(shí)現(xiàn)。
實(shí)現(xiàn)CSS代碼如下：
.parent { /* 1. 將元素設(shè)置為 Flex 布局 */ display: flex; /* 2. 通過(guò) justify-content 以及 align-items: center 實(shí)現(xiàn) */ /* justify-content: center; align-items: center; */}.child { /* 或者通過(guò) margin auto 實(shí)現(xiàn) */ margin: auto;}
7. Grid方案
Grid 方案的實(shí)現(xiàn)方式相對(duì)來(lái)說(shuō)比較簡(jiǎn)單，方式也較多。
實(shí)現(xiàn)CSS代碼如下：
.parent { /* 1. 元素設(shè)置為Grid 元素 */ display: grid; /* 通過(guò) items 屬性實(shí)現(xiàn)*/ /* align-items: center; */ /* justify-items: center; */ /* items 的縮寫 */ /* place-items: center; */ /* 或者通過(guò) content 屬性 */ /* align-content: center; */ /* justify-content: center; */ /* content 的縮寫 */ /* place-content: center; */}.child { /* 或者通過(guò) margin auto 實(shí)現(xiàn) */ /* margin: auto; */ /* 或者通過(guò) self 屬性 */ /* align-self: center; justify-self: center; */ /* self 的縮寫 */ place-self: center;}
實(shí)現(xiàn)水平垂直居中布局的方式大多是通過(guò)上面兩種布局的方式相結(jié)合。
兩列布局
所謂的兩列布局就是一列定寬(也有可能由子元素決定寬度)，一列自適應(yīng)的布局。最終效果如下所示：
這里用到的 HTML 結(jié)構(gòu)如下：
定寬 自適應(yīng)
公共的 CSS 代碼如下:
body { margin: 0;}.container { height: 400px; background-color: #eebefa;}.left { height: 400px; width: 200px; background-color: #f783ac; font-size: 70px; line-height: 400px; text-align: center;}.right { height: 400px; background-color: #c0eb75; font-size: 70px; line-height: 400px;}/* 清除浮動(dòng) */.clearfix:after { content: ”; display: block; height: 0; clear: both; visibility: hidden;}
1. float+calc()函數(shù)完成左列定寬右列自適應(yīng)
步驟如下：
- 左邊列開(kāi)啟浮動(dòng)
- 右邊列開(kāi)啟浮動(dòng)
- 右邊列寬度為父級(jí) 100%減去左列的寬度
實(shí)現(xiàn)CSS代碼如下：
.left { /* 左邊列開(kāi)啟浮動(dòng) */ float: left;}.right { /* 右邊列開(kāi)啟浮動(dòng) */ float: left; /* 寬度減去左列的寬度 */ width: calc(100% – 200px);}
2. float+margin-left完成左列定寬右列自適應(yīng)
步驟如下：
- 左邊列開(kāi)啟浮動(dòng)
- 通過(guò)外邊距的方式使該容器的左邊有左邊列容器的寬度的外邊距
實(shí)現(xiàn)CSS代碼如下：
.left { /* 左邊列開(kāi)啟浮動(dòng) */ float: left;}.right { /* 通過(guò)外邊距的方式使該容器的左邊有200px */ margin-left: 200px;}
3. absolute+margin-left完成左列定寬右列自適應(yīng)
步驟如下：
- 開(kāi)啟定位脫離文檔流
- 通過(guò)外邊距的方式使該容器的左邊有左邊列容器的寬度的外邊距
實(shí)現(xiàn)CSS代碼如下：
.left { /* 開(kāi)啟定位脫離文檔流 */ position: absolute;}.right { /* 通過(guò)外邊距的方式使該容器的左邊有200px */ margin-left: 200px;}
值得注意的是 以上幾種方案左邊列必須定寬，才可以實(shí)現(xiàn)，下面這幾種方案左邊列可以由子級(jí)撐起。
4. float+overflow完成左列定寬右列自適應(yīng)
步驟如下：
- 左側(cè)元素開(kāi)始浮動(dòng)
- 右側(cè)自適應(yīng)元素設(shè)置overflow會(huì)創(chuàng)建一個(gè)BFC完成自適應(yīng)
實(shí)現(xiàn)CSS代碼如下：
.left { /* 1. 左側(cè)元素開(kāi)始浮動(dòng) */ float: left;}.right { /* 2. 右側(cè)自適應(yīng)元素設(shè)置 overflow 會(huì)創(chuàng)建一個(gè)BFC 完成自適應(yīng) */ overflow: hidden;}
5. Flex方案
通過(guò)Flex布局實(shí)現(xiàn)該功能主要是通過(guò) flex 屬性來(lái)實(shí)現(xiàn)示例代碼如下：
.container { display: flex;}.right { flex: 1; /* flex: 1; 表示 flex-grow: 1; 即該項(xiàng)占所有剩余空間 */}
6. Grid方案
通過(guò) Grid 布局實(shí)現(xiàn)該功能主要是通過(guò)template屬性實(shí)現(xiàn)，具體代碼如下所示：
.container { display: grid; /* 將其劃分為兩行，其中一列有本身寬度決定， 一列占剩余寬度*/ grid-template-columns: auto 1fr;}
三列布局
三列布局主要分為兩種：
- 第一種是前兩列定寬，最后一列自適應(yīng)，這一種本質(zhì)上與兩列布局沒(méi)有什么區(qū)別，可以參照兩列布局實(shí)現(xiàn)。
- 第二種是前后兩列定寬，中間自適應(yīng)，最終效果圖如下
公共 CSS 如下：
body { margin: 0;}.container { height: 400px; background-color: #eebefa;}.left { height: 400px; width: 200px; background-color: #f783ac;}.content { height: 400px; background-color: #d9480f;}.right { height: 400px; width: 200px; background-color: #c0eb75;}.left,.content,.right { font-size: 70px; line-height: 400px; text-align: center;}/* 清除浮動(dòng) */.clearfix:after { content: ”; display: block; height: 0; clear: both; visibility: hidden;}
HTML 結(jié)構(gòu)如下：
左 內(nèi)容 右
1. 通過(guò)float實(shí)現(xiàn)(一)
實(shí)現(xiàn)步驟：
- 為了完成效果需要調(diào)整HTML結(jié)構(gòu)，調(diào)整后如下：
左 右 內(nèi)容
- 左列容器開(kāi)啟左浮動(dòng)
- 右列容器開(kāi)啟右浮動(dòng)
- 自適應(yīng)元素設(shè)置overflow會(huì)創(chuàng)建一個(gè)BFC完成自適應(yīng)
實(shí)現(xiàn)CSS代碼如下
.left { /* 1. 左列容器開(kāi)啟左浮動(dòng) */ float: left;}.content { /* 自適應(yīng)元素設(shè)置 overflow 會(huì)創(chuàng)建一個(gè)BFC 完成自適應(yīng) */ overflow: hidden;}.right { /* 2. 右列容器開(kāi)啟右浮動(dòng) */ float: right;}
2. 通過(guò)float實(shí)現(xiàn)(二)
實(shí)現(xiàn)步驟：
- 為了完成效果需要調(diào)整 HTML 結(jié)構(gòu)，調(diào)整后如下：
左 右 內(nèi)容
- 左列容器開(kāi)啟左浮動(dòng)
- 右列容器開(kāi)啟右浮動(dòng)
- 使中間自適應(yīng)的寬度為父級(jí)容器減去兩個(gè)定寬的列
實(shí)現(xiàn)CSS代碼如下：
.left { /* 1. 左列容器開(kāi)啟左浮動(dòng) */ float: left;}.content { /* 3. 使中間自適應(yīng)的寬度為父級(jí)容器減去兩個(gè)定寬的列 */ width: calc(100%-400px);}.right { /* 2. 右列容器開(kāi)啟右浮動(dòng) */ float: right;}
3. 通過(guò)position實(shí)現(xiàn)
實(shí)現(xiàn)步驟
- 左右兩列脫離文檔流，并通過(guò)偏移的方式到達(dá)自己的區(qū)域
- 使中間自適應(yīng)的寬度為父級(jí)容器減去兩個(gè)定寬的列
- 通過(guò)外邊距將容器往內(nèi)縮小
實(shí)現(xiàn)CSS代碼如下：
.left { /* 1. 左右兩列脫離文檔流，并通過(guò)偏移的方式到達(dá)自己的區(qū)域 */ position: absolute; left: 0; top: 0;}.content { /* 2. 使中間自適應(yīng)的寬度為父級(jí)容器減去兩個(gè)定寬的列 */ width: calc(100%-400px); /* 3. 通過(guò)外邊距將容器往內(nèi)縮小 */ margin-right: 200px; margin-left: 200px;}.right { position: absolute; right: 0; top: 0;}
4. Flex方案
通過(guò) Flex 布局實(shí)現(xiàn)該功能主要是通過(guò) flex 屬性來(lái)實(shí)現(xiàn)。
實(shí)現(xiàn)CSS代碼如下：
.container { display: flex;}.right { flex: 1; /* flex: 1; 表示 flex-grow: 1; 即該項(xiàng)占所有剩余空間 */}
5. Grid方案
通過(guò) Grid 布局實(shí)現(xiàn)該功能主要是通過(guò) template 屬性實(shí)現(xiàn)。
實(shí)現(xiàn)CSS代碼如下：
.container { display: grid; /* 將其劃分為兩行，其中一列有本身寬度決定， 一列占剩余寬度*/ grid-template-columns: auto 1fr auto;}
等分布局
等分布局就是將一個(gè)容器平均分成幾等份，這里以 4 等分為例，主要介紹4種方法。
公共CSS部分如下：
body { margin: 0;}.container { height: 400px; background-color: #eebefa;}.item { height: 100%;}.item1 { background-color: #eccc68;}.item2 { background-color: #a6c1fa;}.item3 { background-color: #fa7d90;}.item4 { background-color: #b0ff70;}/* 清除浮動(dòng) */.clearfix:after { content: ”; display: block; height: 0; clear: both; visibility: hidden;}
公共HTML代碼如下：
最終的效果如下圖所示：
1. 浮動(dòng)+百分比方式
這種方式比較簡(jiǎn)單，開(kāi)啟浮動(dòng)，使每個(gè)元素占25%的寬度。
實(shí)現(xiàn)CSS代碼如下：
.item { /* 開(kāi)啟浮動(dòng)，每個(gè)元素占 25% 的寬度 */ width: 25%; float: left;}
2. 行內(nèi)塊級(jí)+百分比方式
這種方式與上面那種方式類似，不過(guò)需要注意的是行內(nèi)塊級(jí)元素有一些類似于邊距的幾個(gè)像素，導(dǎo)致各25%會(huì)超出容器。
實(shí)現(xiàn)CSS代碼如下：
.item { /* 設(shè)置每個(gè)元素為行內(nèi)塊級(jí)元素，每個(gè)元素占 24.5% 的寬度 */ width: 24.5%; /* 因?yàn)樾袃?nèi)塊級(jí)元素有一些類似于邊距的幾個(gè)像素，導(dǎo)致各占25會(huì)超出容器 */ display: inline-block;}
3. Flex方案
通過(guò) Flex 布局實(shí)現(xiàn)該功能主要是通過(guò) flex 屬性來(lái)實(shí)現(xiàn)。
實(shí)現(xiàn)CSS代碼如下：
.container { /* 開(kāi)啟 flex 布局 */ display: flex;}.item { /* 每個(gè)元素占相同的寬度 */ flex: 1;}
4. Grid方案
通過(guò) Grid 布局實(shí)現(xiàn)該功能主要是通過(guò) template 屬性實(shí)現(xiàn)。
實(shí)現(xiàn)CSS代碼如下
.container { /* 開(kāi)啟 grid 布局 */ display: grid; grid-template-columns: repeat(4, 1fr); /* 使用 repeat 函數(shù)生成如下代碼 */ /* grid-template-columns: 1fr 1fr 1fr 1fr; */}
Sticky Footer布局
所謂的 Sticky Footer 布局并不是一種新的前端技術(shù)和概念，它就是一種網(wǎng)頁(yè)布局。如果頁(yè)面內(nèi)容不夠長(zhǎng)時(shí)，底部欄就會(huì)固定到瀏覽器的底部；如果足夠長(zhǎng)時(shí)，底部欄就后跟隨在內(nèi)容的后面。如下圖所示：
這里來(lái)介紹實(shí)現(xiàn)該布局的4種方式
公共的CSS代碼如下：
body { margin: 0;}.container { height: 400px; display: flex;}.left { height: 400px; width: 200px; background-color: #f759ab;}.content { height: 400px; background-color: #52c41a; flex: 1;}.right { height: 400px; width: 200px; background-color: #f759ab;}.left,.content,.right { font-size: 70px; line-height: 400px; text-align: center;}.header { height: 100px; background-color: #70a1ff;}.footer { height: 100px; background-color: #ff7a45;}.header,.footer { line-height: 100px; font-size: 52px; text-align: center;}
公共的HTML如下：
header left content right footer
1. 絕對(duì)定位的方式
通過(guò)絕對(duì)定位的方式實(shí)現(xiàn)Sticky Footer布局的步驟如下：
- 設(shè)置最外層容器高度為100%；
- 讓子元素元素相對(duì)于容器元素進(jìn)行定位，并設(shè)置容器元素最小高度為100%；
- 在中間區(qū)域設(shè)置padding-bottom為footer的高度 ；
- 底部欄絕對(duì)定位，并一直吸附在底部即可實(shí)現(xiàn)。
實(shí)現(xiàn)CSS代碼如下：
/* 1. 設(shè)置最外層容器為100% */html,body { height: 100%;}/* 2. 讓子元素元素相對(duì)于容器元素進(jìn)行定位，并設(shè)置容器元素最小高度為100% */.main { position: relative; min-height: 100%;}/* 3. 在中間區(qū)域設(shè)置 padding-bottom 為footer 的高度 */.container { padding-bottom: 100px;}/* 由于開(kāi)啟了絕對(duì)定位，寬度成了自適應(yīng)，設(shè)置為100% bottom:0 始終保持底部 */.footer { position: absolute; width: 100%; bottom: 0;}
2. 使用calc函數(shù)實(shí)現(xiàn)
使用 calc 函數(shù)實(shí)現(xiàn)的方式會(huì)比較簡(jiǎn)單，中間的容器最少高度為視口寬度的100% – 頭部和底部?jī)刹糠值母叨燃纯赏瓿稍摴δ堋?/p>
實(shí)現(xiàn)CSS代碼如下：
.container { /* 這里的 中間 部分的容器最少為視口寬度的 100% – 頭部和底部?jī)刹糠值母叨燃纯赏瓿稍摴δ?*/ min-height: calc(100vh – 200px);}
3. Flex方案
實(shí)現(xiàn)步驟如下
- 開(kāi)啟 flex 布局
- 將子元素布局方向修改為垂直排列
- 設(shè)置最小高度為當(dāng)前視口，使不管中間部分有多高，始終都可以保持在底部
- 設(shè)置中間部分容器高度為自適應(yīng)
實(shí)現(xiàn)CSS代碼如下：
.main { /* 開(kāi)啟flex布局 */ display: flex; /* 將子元素布局方向修改為垂直排列 */ flex-flow: column; /* 設(shè)置最小高度為當(dāng)前視口，使不管中間部分有多高，始終都可以保持在底部 */ min-height: 100vh;}.container { /* 設(shè)置 中間 部分自適應(yīng) */ flex: 1;}
4. Grid方案
實(shí)現(xiàn)步驟如下
- 開(kāi)啟 grid 布局
- 置最小高度為當(dāng)前視口，使不管中間部分有多高，始終都可以保持在底部
實(shí)現(xiàn)CSS代碼如下：
.main { /* 開(kāi)啟grid布局 */ display: grid; grid-template-rows: auto 1fr auto; /* 設(shè)置最小高度為當(dāng)前視口，使不管中間部分有多高，始終都可以保持在底部 */ min-height: 100vh;}
全屏布局
全部布局主要應(yīng)用在后臺(tái)，主要效果如下所示：
這里介紹三種全屏布局的實(shí)現(xiàn)方法。
公共的CSS代碼如下：
body { margin: 0;}body,html,.container { height: 100vh; box-sizing: border-box; text-align: center; overflow: hidden;}.content { background-color: #52c41a; /* * 中間部門的布局可以參考 兩列 三列 布局 */ display: grid; grid-template-columns: auto 1fr;}.left { width: 240px; background-color: #52c41a; font-size: 80px; line-height: calc(100vh – 200px);}.right { background-color: #f759ab; font-size: 60px;}.header { height: 100px; background-color: #70a1ff;}.footer { height: 100px; background-color: #ff7a45;}.header,.footer { line-height: 100px; font-size: 52px;}
HTML結(jié)構(gòu)如下：
header 導(dǎo)航 自適應(yīng)，超出高度出現(xiàn)滾動(dòng)條 footer
1. 使用calc函數(shù)實(shí)現(xiàn)
實(shí)現(xiàn)步驟如下：
- 通過(guò) calc 函數(shù)計(jì)算出中間容器的高度。
- 中間出現(xiàn)滾動(dòng)條的容器設(shè)置overflow: auto即出現(xiàn)滾動(dòng)條的時(shí)候出現(xiàn)滾動(dòng)條。
實(shí)現(xiàn)CSS代碼如下：
.content { overflow: hidden; /* 通過(guò) calc 計(jì)算容器的高度 */ height: calc(100vh – 200px);}.left { height: 100%;}.right { /* 如果超出出現(xiàn)滾動(dòng)條 */ overflow: auto; height: 100%;}.right-in { /* 假設(shè)容器內(nèi)有500px的元素 */ height: 500px;}
2. Flex 方案
使用 Flex 方式實(shí)現(xiàn)該布局比較簡(jiǎn)單。
實(shí)現(xiàn)CSS代碼如下
.container { /* 開(kāi)啟flex布局 */ display: flex; /* 將子元素布局方向修改為垂直排列 */ flex-flow: column;}.content { /* 如果超出出現(xiàn)滾動(dòng)條 */ overflow: auto; /* 設(shè)置 中間 部分自適應(yīng) */ flex: 1;}.right-in { /* 假設(shè)容器內(nèi)有500px的元素 */ height: 500px;}
3. Grid 方案
grid布局對(duì)于這種布局來(lái)說(shuō)，實(shí)現(xiàn)起來(lái)是非常得心應(yīng)手的，通過(guò)template屬性即可實(shí)現(xiàn)。
實(shí)現(xiàn)CSS代碼如下
.container { /* 開(kāi)啟grid布局 */ display: grid; grid-template-rows: auto 1fr auto;}.content { /* 如果超出出現(xiàn)滾動(dòng)條 */ overflow: auto;}.right-in { /* 假設(shè)容器內(nèi)有500px的元素 */ height: 500px;}
https://juejin.cn/post/7028962991345254407
