CSS布局有哪些？css常見的布局方式（附代碼）

css布局有哪些？css布局可以讓頁面看起來比較美觀整潔，接下來的這篇文章給大家總結了css中常見的幾種布局方式，讓我們具體的看一看。

水平置中布局

1、margin + 定寬

<div class="parent">  <div class="child">Demo</div></div><style>  .child {    width: 50px;    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相容性較差。