CSS常見布局解決方案

阿新 • • 發佈：2017-11-29

nbsp 設置 pre 瀏覽器兼容 lin 需要選擇 wid 適應

最近要準備移動端項目，大半年沒好好寫過CSS了，今天惡補了一下CSS的一些布局，下面做一些分享。

水平居中布局

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">
  <span class="child">Demo</span>
</div>

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

display: table 在這裏的作用有兩個：一、將span元素轉為塊元素性質，二、設置了span寬度為內容寬。

* 無需設置父元素樣式（支持 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>

display: inline-block 將div塊元素轉為行內塊元素性質(具備了一些行內元素的特性),固給父元素設置text-align: center 能起到居中效果。

* 兼容性佳（甚至可以兼容 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

<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

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

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>
  </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>
    </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>
  </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="left">
    <p>left</p>
  </div>
  <div class="right">
    <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>
  </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>

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

結語：一樣的布局可能有很多種方法實現，以上只作為參考！

CSS常見布局解決方案

nbsp 設置 pre 瀏覽器兼容 lin 需要選擇 wid 適應最近要準備移動端項目，大半年沒好好寫過CSS了，今天惡補了一下CSS的一些布局，下面做一些分享。水平居中布局 1.margin + 定寬 <div class="parent"> &l

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

相關推薦