首頁 >web前端 >css教學 >CSS佈局有哪些？ css常見的佈局方式（附程式碼）

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

不言原創: 2018-08-07 17:23:254086瀏覽

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

水平居中佈局

#1、margin 定寬

<div>
  <div>Demo</div>
</div>

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

運行結果：

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

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

2、table margin

<div>
  <div>Demo</div>
</div>

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

運行結果：

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

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

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

3、inline-block text-align

<div>
  <div>Demo</div>
</div>

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

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

4、absolute margin-left

<div>
  <div>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>
  <div>Demo</div>
</div>

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

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

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

6、flex justify-content

<div>
  <div>Demo</div>
</div>

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

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

flex有相容性問題

#垂直居中：

1、table-cell vertical-align

<div>
  <div>Demo</div>
</div>

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

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

#2、absolute transform

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

<div>
  <div>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>
  <div>Demo</div>
</div>

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

水平垂直居中：

1、absolute transform

<div>
  <div>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>
  <div>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>
  <div>Demo</div>
</div>

<style>
  .parent {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /*垂直居中*/
  }
</style>

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

蛋白的相容性問題

一列定寬，一列自適應

#1、float margin

<div>
  <div>
    <p>left</p>
  </div>
  <div>
    <p>right</p>
    <p>right</p>
  </div>
</div>

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

<span style="font-family: 微软雅黑, Microsoft YaHei;">#IE 6 中會有3像素的BUG，解決方法可以在.left 加入margin-left:-3px 當然也有解決這個小bug的方案如下：</span>

<div>
  <div>
    <p>left</p>
  </div>
  <div>
    <div>
      <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>
  <div>
    <p>left</p>
  </div>
  <div>
    <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>
  <div>
    <p>left</p>
  </div>
  <div>
    <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>
  <div>
    <p>left</p>
  </div>
  <div>
    <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>
  <div>
    <p>1</p>
  </div>
  <div>
    <p>2</p>
  </div>
  <div>
    <p>3</p>
  </div>
  <div>
    <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>
  <div>
    <p>1</p>
  </div>
  <div>
    <p>2</p>
  </div>
  <div>
    <p>3</p>
  </div>
  <div>
    <p>4</p>
  </div>
</div>


<style>
  .parent {
    display: flex;
  }
  .column {
    flex: 1;
  }
  .column+.column { /* 相邻兄弟选择器 */
    margin-left: 20px;
  }
</style>

強大簡單，有相容問題

## 3、table

<div>
  <div>
    <div>
      <p>1</p>
    </div>
    <div>
      <p>2</p>
    </div>
    <div>
      <p>3</p>
    </div>
    <div>
      <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>
  <div>
    <p>left</p>
  </div>
  <div>
    <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>
  <div>
    <p>left</p>
  </div>
  <div>
    <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>
  <div>
    <p>left</p>
  </div>
  <div>
    <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兼容性较差。

相关文章推荐：

常见css水平自适应布局_html/css_WEB-ITnose

DIV+CSS布局中常见的10大错误_html/css_WEB-ITnose

CSS常用布局实现方法_html/css_WEB-ITnose

以上是CSS佈局有哪些？ css常見的佈局方式（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css浮動是什麼意思？ css浮動的原理以及css清除浮動的方法（附程式碼）下一篇：css浮動是什麼意思？ css浮動的原理以及css清除浮動的方法（附程式碼）

看更多