聊聊布局

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-pUErNaId-1595768517862)(https://raw.githubusercontent.com/bxm0927/picture-link/master/markdown-note/2019-2-24005.png)]

布局方法

過時的布局方法

• 表格布局（table）

傳統的布局方法

• 定位（position）
• 浮動（float）

前沿的布局方法

• 彈性盒子布局（Flexible Box Layout）
• 網格布局（Grid Layout）

經驗之談

布局可以從以下幾個方面思考：

利用 float + margin 實現

利用 absolute 絕對定位實現

利用 BFC 實現

利用 Flexbox 實現

利用 Grid 實現

幾個注意點：

• 移動端能用 Flex 就用 Flex，靈活方便并且功能強大，無愧為網頁布局的一大利器！
• 使用 float 時，注意要清除浮動，避免高度塌陷
• 避免使用老舊的 table 布局（如 display: table;、display: table-row;、display: table-cell;）。表格布局會使 margin 失效，設置間隔比較麻煩。

居中布局

水平居中

行內元素水平居中：

// 利用 text-align: center 可以將塊級元素內部的行內元素水平居中。 // 此方法對 inline、inline-block、inline-table 和 inline-flex 元素水平居中都有效。 // 也可以將 block 元素設置成 inline-block，再用這種方式實現塊級元素的水平居中 .inline-x-center {text-align: center; }

單個塊級元素水平居中：

// 可通過將左和右外邊距設置為 auto 來實現塊級元素水平居中。 // 此時需要設置寬度，如果寬度是 100%，則對齊沒有效果。 @mixin margin-auto-center($width: 80%) {width: $width;margin-left: auto;margin-right: auto; }

多個塊級元素水平居中：

注意多個 inline-block 元素間空白字符 font-size 不為 0 的問題

.parent {text-align: center;/* font-size: 0; */ }.child {display: inline-block; }

垂直居中

行內元素垂直居中：

.inline-y-center {height: 40px;line-height: 40px; }

垂直對齊一幅圖像、字體圖標：

// vertical-align 屬性設置元素的垂直對齊方式，默認情況下，元素放置在父元素的基線(baseline)上。 .img-y-center {vertical-align: middle; }

水平垂直居中

總結：一般情況下，水平垂直居中，我們最常用的就是絕對定位加負邊距，缺點就是需要知道寬高，使用 transform 倒是可以不需要知道寬高，但是兼容性不好（IE9+）

高度寬度已知：

// Negative margin @mixin margin-center($width, $height) {position: absolute;top: 50%;left: 50%;width: $width;height: $height;margin-left: -($width / 2);margin-top: -($height / 2); }

高度寬度未知：

// Transform centering // Horizontally and vertically centers a child element within a parent element using `position: absolute` and `transform: translate()`. // Similar to `flexbox`, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications. .transform-center {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); } // Flexbox centering // Horizontally and vertically centers a child element within a parent element using `flexbox`. .flexbox-center {display: flex; // enables flexbox.align-items: center; // centers the child vertically.justify-content: center; // centers the child horizontally. } // Grid centering // Horizontally and vertically centers a child element within a parent element using `grid`. .grid-center {display: grid; // enables grid.align-items: center; // centers the child vertically.justify-content: center; // centers the child horizontally. }

兩列布局

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-2pFm3AN3-1595768517865)(https://raw.githubusercontent.com/bxm0927/picture-link/master/markdown-note/2019-2-24001.png)]

左列定寬，右列自適應

利用 float + margin 實現：

.left {float: left;width: 100px; }.right {margin-left: 120px; /* 大于等于 `.left` 的寬度 */ }

利用 BFC 實現：

.left {float: left;width: 100px; }.right {overflow: hidden; /* 觸發 BFC 達到自適應 */ }

利用 absolute 絕對定位實現：

.parent {position: relative; }.left {position: absolute;top: 0;left: 0;width: 100px; }.right {position: absolute;top: 0;left: 100px; /* 大于等于 `.left` 的寬度 */right: 0; }

利用 Flexbox 實現：

.parent {display: flex; }.left {width: 100px;flex: 0 0 100px; }.right {flex: 1; /* 均分了父元素剩余空間 */ }

利用 Grid 實現：

.parent {display: grid;grid-template-columns: 100px auto; /* 設定 2 列就 ok 了, auto 換成 1fr 也行 */width: 100%; }

左列自適應，右列定寬

利用 float + margin 實現：

.parent {height: 500px;padding-left: 100px; /* 抵消 left 的 margin-left 以達到 parent 水平居中 */ }.left {float: left;margin-left: -100px; /* 正值等于 right 的寬度 */width: 100%; }.right {float: right;width: 100px; }

利用 BFC 實現：

<style>.left {overflow: hidden; /* 觸發 BFC 達到自適應 */}.right {float: right;margin-left: 10px; /* margin 需要定義在 right 上 */width: 100px;} </style><!-- right 先渲染 --> <div id="right">右列定寬</div> <div id="left">左列自適應</div>

利用 absolute 絕對定位實現：

.parent {position: relative; }.left {position: absolute;top: 0;left: 0;right: 100px; /* 大于等于 `.right` 的寬度 */ }.right {position: absolute;top: 0;right: 0;width: 100px; }

利用 Flexbox 實現：

.parent {display: flex; }.left {flex: 1; /* 均分了父元素剩余空間 */ }.right {width: 100px;flex: 0 0 100px; }

利用 Grid 實現：

.parent {display: grid;grid-template-columns: auto 100px; /* 設定 2 列就 ok 了, auto 換成 1fr 也行 */width: 100%; }

一列不定，一列自適應

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

這里演示左列不定寬，右列自適應。左列自適應，右列不定寬同理。

利用 BFC 實現：

.left {float: left; /* 只設置浮動，不設寬度 */margin-right: 10px; }.right {overflow: hidden; /* 觸發 BFC */ }

利用 Flexbox 實現：

.parent {display: flex; }.left {/* 不設寬度 */margin-right: 10px; }.right {flex: 1; /* 均分 parent 剩余的部分 */ }

利用 Grid 實現：

.parent {display: grid;grid-template-columns: auto 1fr; /* auto 和 1fr 換一下順序就是“左列自適應，右列不定寬”了 */ }.left {margin-right: 10px; }

三列布局

兩列定寬，一列自適應

利用 float + margin 實現：

.parent {min-width: 310px; /* 100 + 10 + 200，防止寬度不夠，子元素換行*/ }.left {float: left;margin-right: 10px; /* left 和 center 間隔 */width: 100px; }.center {float: left;width: 200px; }.right {margin-left: 320px; /* 等于 left 和 center 的寬度之和加上間隔，多出來的就是 right 和 center 的間隔 */ }

利用 BFC 實現：

.parent {min-width: 320px; /* 防止寬度不夠，子元素換行 */ }.left {float: left;margin-right: 10px;width: 100px; }.center {float: left;margin-right: 10px; /* 在此定義和 right 的間隔 */width: 200px; }.right {overflow: hidden; }

利用 Flexbox 實現：

.parent {display: flex; }.left {margin-right: 10px;width: 100px; }.center {margin-right: 10px;width: 200px; }.right {flex: 1; }

利用 Grid 實現：

.parent {display: grid;grid-template-columns: 100px 200px auto; /* 設置3列，固定第一第二列的寬度，第三列 auto 或者 1fr */ }

左右定寬，中間自適應

利用 Flexbox 實現

.parent {display: flex; }.left {width: 100px; }.center {flex: 1; }.right {width: 200px; }

利用 absolute 絕對定位實現

.parent {position: relative; }.left {position: absolute;top: 0;left: 0;width: 100px; }.center {margin-left: 100px; /* 大于等于 left 的寬度，或者給 parent 添加同樣大小的 padding-left */margin-right: 200px; /* 大于等于 right 的寬度，或者給 parent 添加同樣大小的 padding-right */ }.right {position: absolute;top: 0;right: 0;width: 200px; }

圣杯布局

圣杯布局又叫做固比固布局，即兩邊固定寬度，中間自適應的三欄布局。

具體操作是三欄全部浮動，左右兩欄負 margin 讓其跟中間欄并排。

注意：中間欄要在放在文檔流前面以優先渲染。

<div class="grail"><!-- 中間盒子優先渲染 --><div class="middle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, ut.</div><div class="left">left</div><div class="right">right</div> </div><style>.grail {box-sizing: border-box;width: 100%;min-width: 1024px;height: 400px;/* 讓中間自適應的盒子安全顯示 */padding: 0 300px;background-color: darkseagreen;}.middle {float: left;width: 100%;height: 300px;background-color: deepskyblue;}.left {float: left;position: relative;left: -300px;width: 300px;height: 300px;/* 左側盒子上浮; */margin-left: -100%;background-color: red;}.right {float: left;position: relative;right: -300px;width: 300px;height: 300px;/* 右側盒子上浮 */margin-left: -300px;background-color: red;} </style>

雙飛翼布局

事實上，圣杯布局和雙飛翼布局是一回事，它們實現的都是三欄布局，但是雙飛翼布局可以更好地解決中欄內容超出的情景。

<div class="grail"><div class="middle-wrapper"><div class="middle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, ut.</div></div><div class="left">left</div><div class="right">right</div> </div><style>.grail {width: 100%;min-width: 1024px;height: 400px;background-color: darkseagreen;}.middle-wrapper {float: left;width: 100%;height: 300px;background-color: deepskyblue;}.middle {height: 300px;margin-left: 300px;margin-right: 300px;background-color: yellowgreen;}.left {float: left;width: 300px;height: 300px;margin-left: -100%;background-color: red;}.right {float: left;width: 300px;height: 300px;margin-left: -300px;background-color: red;} </style>

多列布局

等寬布局

浮動等寬布局：

.column {float: left;width: 25%; /* 100 ÷ 列數，得出百分比 */ }

彈性盒子等寬布局：

.parent {display: flex; }.column {flex: 1; }

網格等寬布局：

.parent {display: grid;grid-template-columns: repeat(6, 1fr); /* 6 就是列數 */ }

九宮格布局

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-1ddl5zQf-1595768517869)(https://raw.githubusercontent.com/bxm0927/picture-link/master/markdown-note/2019-2-24003.png)]

DOM結構：

<div class="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>

使用 table 表格布局實現：

display:table 相當于 table 標簽

display:table-row 相當于 tr 標簽

display:table-cell 相當于 td 標簽

.parent {display: table; } .row {display: table-row; } .item {display: table-cell; }

使用 Flex 彈性盒子布局實現：

.parent {display: flex;flex-direction: column; } .row {display: flex;flex: 1; } .item {flex: 1; }

使用 Grid 網格布局實現：

.parent {display: grid;grid-template-columns: repeat(3, 1fr); /* 等同于 1fr 1fr 1fr，此為重復的合并寫法 */grid-template-rows: repeat(3, 1fr); /* 等同于 1fr 1fr 1fr，此為重復的合并寫法 */ }

柵格系統

@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; }

滾動場景

橫向滾動：overflow-x: auto;

縱向滾動：overflow-y: auto;

橫向、縱向滾動：overflow: auto;

更復雜的滾動場景可以借助第三方庫實現，如 better-scroll

總結

以上是生活随笔為你收集整理的聊聊前端的Html布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。