閱讀(4.2k) 書簽贊(1) 我要糾錯(cuò)

布局解決方案

2018-07-10 15:36 更新

了解 CSS 中屬性的值及其特性，透徹分析問(wèn)題和需求才可以選擇和設(shè)計(jì)最適合的布局解決方案。

居中布局

水平居中

子元素于父元素水平居中且其（子元素與父元素）寬度均可變。

inline-block + text-align

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .child {
    display: inline-block;
  }
  .parent {
    text-align: center;
  }
</style>

優(yōu)點(diǎn)

兼容性佳（甚至可以兼容 IE 6 和 IE 7）

table + margin

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .child {
    display: table;
    margin: 0 auto;
  }
</style>

NOTE: display: table 在表現(xiàn)上類似 block 元素，但是寬度為內(nèi)容寬。

優(yōu)點(diǎn)

無(wú)需設(shè)置父元素樣式（支持 IE 8 及其以上版本）

NOTE：兼容 IE 8 一下版本需要調(diào)整為 <table> 的結(jié)果

absolute + transform

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
</style>

優(yōu)點(diǎn)

絕對(duì)定位脫離文檔流，不會(huì)對(duì)后續(xù)元素的布局造成影響。

缺點(diǎn)

transform 為 CSS3 屬性，有兼容性問(wèn)題

flex + justify-content

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    display: flex;
    justify-content: center;
  }

  /* 或者下面的方法，可以達(dá)到一樣的效果 */

  .parent {
    display: flex;
  }
  .child {
    margin: 0 auto;
  }
</style>

優(yōu)點(diǎn)

只需設(shè)置父節(jié)點(diǎn)屬性，無(wú)需設(shè)置子元素

缺點(diǎn)

有兼容性問(wèn)題

垂直居中

子元素于父元素垂直居中且其（子元素與父元素）高度均可變。

table-cell + vertical-align

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    display: table-cell;
    vertical-align: middle;
  }
</style>

優(yōu)點(diǎn)

兼容性好（支持 IE 8，以下版本需要調(diào)整頁(yè)面結(jié)構(gòu)至 table）

absolute + transform

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
</style>

優(yōu)點(diǎn)

絕對(duì)定位脫離文檔流，不會(huì)對(duì)后續(xù)元素的布局造成影響。但如果絕對(duì)定位元素是唯一的元素則父元素也會(huì)失去高度。

缺點(diǎn)

transform 為 CSS3 屬性，有兼容性問(wèn)題

flex + align-items

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    display: flex;
    align-items: center;
  }
</style>

優(yōu)點(diǎn)

只需設(shè)置父節(jié)點(diǎn)屬性，無(wú)需設(shè)置子元素

缺點(diǎn)

有兼容性問(wèn)題

水平與垂直居中

子元素于父元素垂直及水平居中且其（子元素與父元素）高度寬度均可變。

inline-block + text-align + table-cell + vertical-align

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
  }
  .child {
    display: inline-block;
  }
</style>

優(yōu)點(diǎn)

兼容性好

absolute + transform

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

優(yōu)點(diǎn)

絕對(duì)定位脫離文檔流，不會(huì)對(duì)后續(xù)元素的布局造成影響。

缺點(diǎn)

transform 為 CSS3 屬性，有兼容性問(wèn)題

flex + justify-content + align-items

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

優(yōu)點(diǎn)

只需設(shè)置父節(jié)點(diǎn)屬性，無(wú)需設(shè)置子元素

缺點(diǎn)

有兼容性問(wèn)題

多列布局

多列布局在網(wǎng)頁(yè)中非常常見(jiàn)（例如兩列布局），多列布局可以是兩列定寬，一列自適應(yīng)，或者多列不定寬一列自適應(yīng)還有等分布局等。

一列定寬，一列自適應(yīng)

float + margin

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right {
    margin-left: 100px
    /*間距可再加入 margin-left */
  }
</style>

NOTE：IE 6 中會(huì)有3像素的 BUG，解決方法可以在 .left 加入 margin-left:-3px。

float + margin + (fix) 改造版

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right-fix">
    <div class="right">
      <p>right</p>
      <p>right</p>
    </div>
  </div>
</div>

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right-fix {
    float: right;
    width: 100%;
    margin-left: -100px;
  }
  .right {
    margin-left: 100px
    /*間距可再加入 margin-left */
  }
</style>

NOTE：此方法不會(huì)存在 IE 6 中3像素的 BUG，但 .left 不可選擇，需要設(shè)置 .left {position: relative} 來(lái)提高層級(jí)。此方法可以適用于多版本瀏覽器（包括 IE6）。缺點(diǎn)是多余的 HTML 文本結(jié)構(gòu)。

float + overflow

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right {
    overflow: hidden;
  }
</style>

設(shè)置 overflow: hidden 會(huì)觸發(fā) BFC 模式（Block Formatting Context）塊級(jí)格式化文本。 BFC 中的內(nèi)容與外界的元素是隔離的。

優(yōu)點(diǎn)

樣式簡(jiǎn)單

缺點(diǎn)

不支持 IE 6

table

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .parent {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .left {
    display: table-cell;
    width: 100px;
  }
  .right {
    display: table-cell;
    /*寬度為剩余寬度*/
  }
</style>

table 的顯示特性為每列的單元格寬度合一定等與表格寬度。 table-layout: fixed; 可加速渲染，也是設(shè)定布局優(yōu)先。

NOTE：table-cell 中不可以設(shè)置 margin 但是可以通過(guò) padding 來(lái)設(shè)置間距。

flex

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .parent {
    display: flex;
  }
  .left {
    width: 100px;
    margin-left: 20px;
  }
  .right {
    flex: 1;
    /*等價(jià)于*/
    /*flex: 1 1 0;*/
  }
</style>

NOTE：flex-item 默認(rèn)為內(nèi)容寬度。

缺點(diǎn)

低版本瀏覽器兼容問(wèn)題
性能問(wèn)題，只適合小范圍布局。

兩列定寬，一列自適應(yīng)

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="center">
    <p>center<p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .left, .center {
    float: left;
    width: 100px;
    margin-right: 20px;
  }
  .right {
    overflow: hidden;
    /*等價(jià)于*/
    /*flex: 1 1 0;*/
  }
</style>

多列定寬的實(shí)現(xiàn)可以更具單列定寬的例子進(jìn)行修改與實(shí)現(xiàn)。

一列不定寬加一列自適應(yīng)

不定寬的寬度為內(nèi)容決定，下面為可以實(shí)現(xiàn)此效果的方法：

float + overflow，此方法在 IE6 中有兼容性問(wèn)題
table，此方法在 IE6 中有兼容性問(wèn)題
flex，此方法在 IE9及其以下版本中有兼容性問(wèn)題

多列不定寬加一列自適應(yīng)

其解決方案同一列不定寬加一列自適應(yīng)相仿。

多列等分布局

每一列的寬度和間距均相等，下面為多列等分布局的布局特定。

父容器寬度為 C，C = W * N + G * N - G => C + G = (W + G) * N。

float

<div class="parent">
  <div class="column">
    <p>1</p>
  </div>
  <div class="column">
    <p>2</p>
  </div>
  <div class="column">
    <p>3</p>
  </div>
  <div class="column">
    <p>4</p>
  </div>
</div>
<style media="screen">
  .parent {
    margin-left: -20px;
  }
  .column {
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;
  }
</style>

NOTE：此方法可以完美兼容 IE8 以上版本。 NOTE+：此方法結(jié)構(gòu)和樣式具有耦合性。

table

<div class='parent-fix'>
  <div class="parent">
    <div class="column">
      <p>1</p>
    </div>
    <div class="column">
      <p>2</p>
    </div>
    <div class="column">
      <p>3</p>
    </div>
    <div class="column">
      <p>4</p>
    </div>
  </div>
</div>

<style media="screen">
  .parent-fix {
    margin-left: -20px;
  }
  .parent {
    display: table;
    width: 100%;
    /*可以布局優(yōu)先，也可以單元格寬度平分在沒(méi)有設(shè)置的情況下*/
    table-layout: fixed;
  }
  .column {
    display: table-cell;
    padding-left: 20px;
  }
</style>

NOTE：缺點(diǎn)是多了文本結(jié)果

flex

<div class="parent">
  <div class="column">
    <p>1</p>
  </div>
  <div class="column">
    <p>2</p>
  </div>
  <div class="column">
    <p>3</p>
  </div>
  <div class="column">
    <p>4</p>
  </div>
</div>


<style media="screen">
  .parent {
    display: flex;
  }
  .column {
    /*等價(jià)于 flex: 1 1 0;*/
    flex: 1;
  }
  .column+.column {
    margin-left: 20px;
  }
</style>

NOTE：flex 的特性為分配剩余空間。 NOTE+：兼容性有問(wèn)題。

#

table

table 的特性為每列等寬，每行等高可以用于解決此需求。

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .parent {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .left {
    display: table-cell;
    width: 100px;
  }
  .right {
    display: table-cell;
    /*寬度為剩余寬度*/
  }
</style>

flex

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .parent {
    display: flex;
  }
  .left {
    width: 100px;
    margin-left: 20px;
  }
  .right {
    flex: 1;
    /*等價(jià)于*/
    /*flex: 1 1 0;*/
  }
</style>

NOTE：flex 默認(rèn)的 align-items 的值為 stretch。

float

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .parent {
    overflow: hidden;
  }
  .left,
  .right {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
  }
  .left {
    float: left;
    width: 100px;
    margin-right: 20px;
  }
  .right {
    overflow: hidden;
  }
</style>

NOTE：此方法為偽等高（只有背景顯示高度相等），左右真實(shí)的高度其實(shí)不相等。 NOTE+：此方法兼容性較好。

全屏布局

例如管理系統(tǒng)，監(jiān)控與統(tǒng)計(jì)平臺(tái)均廣泛的使用全屏布局。

定寬需求

實(shí)現(xiàn)方案

Position 常規(guī)方案
Flex CSS3 新實(shí)現(xiàn)

Position

<div class="parent">
  <div class="top"></div>
  <div class="left"></div>
  <div class="right">
    /*輔助結(jié)構(gòu)用于滾動(dòng)*/
    <div class="inner"></div>
  </div>
  <div class="bottom"></div>
</div>
<style>
  html,
  body,
  .parent {
    height: 100%;
    /*用于隱藏滾動(dòng)條*/
    overflo: hidden;
  }
  .top {
    /*相對(duì)于 body 定位*/
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
  }
  .left {
    position: absolute;
    left: 0;
    top: 100px;
    bottom: 50px;
    width: 200px;
  }
  .right {
    position: absolute;
    left: 200px;
    right: 0;
    top: 100px;
    bottom: 50px;
    overflow: auto;
  }
  .right .inner {
    /*此樣式為演示所有*/
    min-height: 1000px;
  }
  .bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
  }
</style>

Position 兼容

此方法不支持 IE6 可以使用下面的方法解決兼容問(wèn)題。

<div class="g-hd"></div>
<div class="g-sd"></div>
<div class="g-mn"></div>
<div class="g-ft"></div>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
  }

  html {
    _height: auto;
    _padding: 100px 0 50px;
  }

  .g-hd,
  .g-sd,
  .g-mn,
  .g-ft {
    position: absolute;
    left: 0;
  }

  .g-hd,
  .g-ft {
    width: 100%;
  }

  .g-sd,
  .g-mn {
    top: 100px;
    bottom: 50px;
    _height: 100%;
    overflow: auto;
  }

  .g-hd {
    top: 0;
    height: 100px;
  }

  .g-sd {
    width: 300px;
  }

  .g-mn {
    _position: relative;
    left: 300px;
    right: 0;
    _top: 0;
    _left: 0;
    _margin-left: 300px;
  }

  .g-ft {
    bottom: 0;
    height: 50px;
  }
</style>

Flex

<div class="parent">
  <div class="top"></div>
  <div class="middle">
    <div class="left"></div>
    <div class="right">
      <div class="inner"></div>
    </div>
  </div>
  <div class="bottom"></div>
</div>
<style media="screen">
  html,
  body,
  parent {
    height: 100%;
    overflow: hidden;
  }

  .parent {
    display: flex;
    flex-direction: column;
  }

  .top {
    height: 100px;
  }

  .bottom {
    height: 50px;
  }

  .middle {
    // 居中自適應(yīng)
    flex: 1;
    display: flex;
    /*flex-direction: row 為默認(rèn)值*/
  }

  .left {
    width: 200px;
  }

  .right {
    flex: 1;
    overflow: auto;
  }
  .right .inner {
    min-height: 1000px;
  }
</style>

Flex 兼容性

CSS3 中的新概念所有 IE9 及其也行版本都不兼容。

百分比寬度需求

只需把定寬高（px 為單位的值）的實(shí)現(xiàn)改成百分比（%）既可。

內(nèi)容自適應(yīng)

只有右側(cè)欄占據(jù)剩余位置，其余空間均需根據(jù)內(nèi)容改變。所以 Postion 的定位方法不適合實(shí)現(xiàn)此方案。下面列出了兩種布局方案：

Flex
Grid，W3C 草案并不穩(wěn)定，瀏覽器支持也并不理想

Flex

只有不為寬高做出限制，既可對(duì)其中的內(nèi)容做出自適應(yīng)的布局。

<div class="parent">
  <div class="top"></div>
  <div class="middle">
    <div class="left"></div>
    <div class="right">
      <div class="inner"></div>
    </div>
  </div>
  <div class="bottom"></div>
</div>

<style media="screen">
  html,
  body,
  parent {
    height: 100%;
    overflow: hidden;
  }

  .parent {
    display: flex;
    flex-direction: column;
  }

  .middle {
    // 居中自適應(yīng)
    flex: 1;
    display: flex;
    /*flex-direction: row 為默認(rèn)值*/
  }

  .right {
    flex: 1;
    overflow: auto;
  }
  .right .inner {
    min-height: 1000px;
  }
</style>

方案比較

方案	兼容性	性能	自適應(yīng)
Position	好	好	部分自適應(yīng)
Flex	較差	差	可自適應(yīng)
Grid	差	較好	可自適應(yīng)

以上內(nèi)容是否對(duì)您有幫助：

← CSS Reset

響應(yīng)式布局 →

寫筆記

我要補(bǔ)充

布局解決方案

居中布局

水平居中

inline-block + text-align

table + margin

absolute + transform

flex + justify-content

垂直居中

table-cell + vertical-align

absolute + transform

flex + align-items

水平與垂直居中

inline-block + text-align + table-cell + vertical-align

absolute + transform

flex + justify-content + align-items

多列布局

一列定寬，一列自適應(yīng)

float + margin

float + margin + (fix) 改造版

float + overflow

table

flex

兩列定寬，一列自適應(yīng)

一列不定寬加一列自適應(yīng)

多列不定寬加一列自適應(yīng)

多列等分布局

float

table

flex

#

table

flex

float

全屏布局

定寬需求

Position

Position 兼容

Flex

Flex 兼容性

百分比寬度需求

內(nèi)容自適應(yīng)

Flex

方案比較

一列定寬，一列自適應(yīng)

兩列定寬，一列自適應(yīng)