CSS常見佈局解決方案

xingxin發表於2017-06-03

　　說起css佈局，那麼一定得聊聊盒模型，清除浮動，position，display什麼的，但本篇本不是講這些基礎知識的，而是給出各種佈局的解決方案。

　水平居中佈局

　　首先我們來看看水平居中

　　1.margin + 定寬

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

<style>
  .child {
    width: 100px;
    margin: 0 auto;
  }
</style>

　　相必是個前端都見過，這定寬的水平居中，我們還可以用下面這種來實現不定寬的

　　2. table + margin

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

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

　　display: table 在表現上類似 block 元素，但是寬度為內容寬。

無需設定父元素樣式（支援 IE 8 及其以上版本）相容 IE 8 一下版本需要調整為 <table>

　　3.inline-block + text-align

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

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

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

　　4. absolute + margin-left

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

<style>
.parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    width: 100px;
    margin-left: -50px;  /* width/2 */
  }
  </style>

寬度固定

相比於使用transform ，有相容性更好

　　5. absolute + transform

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

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

絕對定位脫離文件流，不會對後續元素的佈局造成影響。

transform 為 CSS3 屬性，有相容性問題

　　6. flex + justify-content

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

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

只需設定父節點屬性，無需設定子元素

flex有相容性問題

　垂直居中

　　1.table-cell + vertical-align

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

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

相容性好(IE 8以下版本需要調整頁面結構至 table)

　　2.absolute + transform

　　強大的absolute對於這種小問題當然也是很簡單的

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

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

絕對定位脫離文件流，不會對後續元素的佈局造成影響。但如果絕對定位元素是唯一的元素則父元素也會失去高度。

transform 為 CSS3 屬性，有相容性問題

　　同水平居中，這也可以用margin-top實現，原理水平居中

　　3.flex + align-items

　　如果說absolute強大，那flex只是笑笑，因為，他才是最強的。。。但它有相容問題

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

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

　水平垂直居中

　　1. 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>

絕對定位脫離文件流，不會對後續元素的佈局造成影響。
transform 為 CSS3 屬性，有相容性問題

　　2. 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>

相容性好

　　3. 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>

只需設定父節點屬性，無需設定子元素

蛋疼的相容性問題

　##一列定寬，一列自適應

　　1.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>

　　IE 6 中會有3畫素的 BUG，解決方法可以在 .left 加入 margin-left:-3px 當然也有解決這個小bug的方案如下：

<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>

　　此方法不會存在 IE 6 中3畫素的 BUG，但 .left 不可選擇，需要設定 .left {position: relative} 來提高層級。注意此方法增加了不必要的 HTML 文字結構。

　　傲嬌的程式設計師應該放棄太低版本的瀏覽器

　　2.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>

　　設定 overflow: hidden 會觸發 BFC 模式（Block Formatting Context）塊級格式上下文。BFC是什麼呢。用通俗的來講就是，隨便你在BFC 裡面幹啥，外面都不會受到影響。此方法樣式簡單但不支援 IE 6

　　3 .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 可加速渲染，也是設定佈局優先。table-cell 中不可以設定 margin 但是可以通過 padding 來設定間距

　　4. 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;
  }
</style>

低版本瀏覽器相容問題
效能問題，只適合小範圍佈局

　　我們在學會一列定寬，一列自適應的佈局後也可以方便的實現 多列定寬，一列自適應多列不定寬加一列自適應 這裡我們不一一講解，大家自行嘗試，也可以鞏固前面學習的

　等分佈局

　　1. 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>
  .parent {
    margin-left: -20px;
  }
  .column {
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;
  }
</style>

此方法可以完美相容 IE8 以上版本

　　2. 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>
  .parent {
    display: flex;
  }
  .column {
    flex: 1;
  }
  .column+.column { /* 相鄰兄弟選擇器 */
    margin-left: 20px;
  }
</style>

強大簡單，有相容問題

　　3. 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>
  .parent-fix {
    margin-left: -20px;
  }
  .parent {
    display: table;
    width: 100%;
    /*可以佈局優先，也可以單元格寬度平分在沒有設定的情況下*/
    table-layout: fixed;
  }
  .column {
    display: table-cell;
    padding-left: 20px;
  }
</style>

　等高佈局

　　1.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>

　　2.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;
  }
</style>

　　注意這裡實際上使用了 align-items: stretch，flex 預設的 align-items 的值為 stretch

　　3. 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>

　　此方法為偽等高（只有背景顯示高度相等），左右真實的高度其實不相等。 相容性較好。

　　到此，我們瞭解常見的佈局解決方案，這些只是參考，一樣的佈局實現方式多種多樣。主要就使用position、flex 、table（從很久很久以前起，我們就拋棄了table佈局頁面，但display: table;是異常強大）、float等屬性目前flex相容性較差 傲嬌的程式設計師應該放棄太低版本的瀏覽器

總結下常見佈局解決方案
2018-07-02
CSS常見佈局技巧
2019-01-03
CSS
CSS 常見佈局方式
2017-08-20
CSS
CSS常見佈局與居中
2018-12-10
CSS
CSS 佈局解決方案（終結版)
2018-03-20
CSS
幾種常見的CSS佈局
2018-11-08
CSS
CSS-常見兩欄、三欄佈局（雙飛翼佈局、聖盃佈局）
2020-03-11
CSS
常見的佈局
2018-06-20
【整理】CSS佈局方案
2017-09-04
CSS
佈局的常用解決方案
2019-03-27
常見頁面佈局
2020-06-02
12種常見的div+css佈局例項
2012-04-01
CSS
2.佈局解決方案- 等分
2016-11-27
CSS 5種佈局方案
2018-03-30
CSS
Flex常見佈局例項
2019-03-27
Flex
前端開發常見佈局
2021-10-21
前端
css--常見左右盒子寬度高度自適應佈局
2021-06-20
CSS
常見問題及解決方案
2016-12-15
前端常見的十種佈局
2023-03-18
前端
高併發解決方案詳解(9大常見解決方案)
2024-02-29
進一步瞭解flex佈局—來實現這些常見佈局吧
2019-03-04
Flex
「前端那些事兒」③ CSS 佈局方案
2018-10-30
前端CSS
CSS佈局 --- 居中佈局
2018-08-24
CSS
css佈局-float佈局
2018-04-09
CSS
常見的跨域解決方案(全)
2019-08-13
跨域
前端常見跨域解決方案（全）
2017-09-13
前端跨域
git 常見問題的解決方案
2017-11-30
Git
常見的高可用MySQL解決方案
2016-05-05
MySql
常見的高可用 MySQL 解決方案
2016-05-17
MySql
WordPress：常見問題及解決方案
2024-03-10
使用 Grid 進行常見佈局
2019-02-23
web開發技巧-網頁排版佈局常見問題及解決辦法
2021-08-24
Web網頁
詳解CSS的Flex佈局
2018-12-13
CSSFlex
快取常見問題及解決方案
2019-10-08
快取
Java™ 教程（常見問題及其解決方案）
2019-01-19
Java
Hadoop常見錯誤及解決方案
2022-02-16
Hadoop
Kafka常見的問題及解決方案
2023-05-08
Kafka
開發常見錯誤及解決方案
2017-06-19

CSS常見佈局解決方案

水平居中佈局

1.margin + 定寬

2. table + margin

3.inline-block + text-align

4. absolute + margin-left

5. absolute + transform

6. flex + justify-content

垂直居中

1.table-cell + vertical-align

2.absolute + transform

3.flex + align-items

水平垂直居中

1. absolute + transform

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

3. flex + justify-content + align-items

##一列定寬，一列自適應

1.float + margin

2.float + overflow

3 .table

4. flex

等分佈局

1. float

2. flex

3. table

等高佈局

1.table

2.flex

3. float

相關文章

　水平居中佈局

　　1.margin + 定寬

　　2. table + margin

　　3.inline-block + text-align

　　4. absolute + margin-left

　　5. absolute + transform

　　6. flex + justify-content

　垂直居中

　　1.table-cell + vertical-align

　　2.absolute + transform

　　3.flex + align-items

　水平垂直居中

　　1. absolute + transform

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

　　3. flex + justify-content + align-items

　##一列定寬，一列自適應

　　1.float + margin

　　2.float + overflow

　　3 .table

　　4. flex

　等分佈局

　　1. float

　　2. flex

　　3. table

　等高佈局

　　1.table

　　2.flex

　　3. float