CSS常見佈局解決方案

時間  2019-11-07
標籤 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">
  <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>

  • 寬度固定post

  • 相比於使用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 屬性，有兼容性問題flex

6. flex + justify-content

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

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

  • 只需設置父節點屬性，無需設置子元素code

  • flex有兼容性問題orm

垂直居中

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兼容性較差 傲嬌的程序員應該放棄過低版本的瀏覽器
轉自：CSS常見佈局解決方案

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程