前端面試頁面佈局——五種三欄佈局的實現即其優缺點

頁面佈局

題目：假設已知高度，請寫出三欄佈局，其中左欄，右欄寬度各爲300px，中間自適應

浮動佈局

問題：

• 元素浮動以後是脫離文檔流的，若處理不好會帶來問題

優點：

• 兼容性十分好

html

<!-- 浮動解決方案 -->
  <section class="layout float">
    <article class="left-right-center">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        <h1>浮動解決方案</h1>
        1.這是三欄佈局的中間部分
        1.這是三欄佈局的中間部分
        1.這是三欄佈局的中間部分
      </div>
    </article>
  </section>

css

	.layout article div {
      min-height: 100px;
    }
    /* 浮動佈局========== start=================== */
    .layout.float .left {
      float: left;
      width: 300px;
      background: rosybrown;
    }

    .layout.float .right {
      float: right;
      width: 300px;
      background: royalblue;
    }

    .layout.float .center {
      background: yellow;
    }

絕對定位佈局

問題：

• 佈局是脫離文檔流的，那下面的子元素也必須脫離文檔流

優點：

• 快捷，配合js使用很快，不容易出問題

html

<section class="layout absolute">
    <article class="left-right-center">
      <div class="left"></div>
      <div class="center">
        <h1>絕對定位方案</h1>
        1.這是三欄佈局的中間部分
        1.這是三欄佈局的中間部分
        1.這是三欄佈局的中間部分
      </div>
      <div class="right"></div>
    </article>
  </section>

css

	.layout.absolute .left-right-center>div {
      position: absolute;
    }

    .layout.absolute .left {
      left: 0;
      width: 300px;
      background: rgb(44, 151, 212);
    }

    .layout.absolute .center {
      right: 300px;
      left: 300px;
      background: rgba(150, 22, 201, 0.5);
    }

    .layout.absolute .right {
      right: 0;
      width: 300px;
      background: springgreen;
    }

flex佈局

問題：

• 沒有太多問題，哈哈隔~

優點：

• 比較完美，移動端基本使用flex佈局

html

<section class="layout flexbox">
    <article class="left-right-center">
      <div class="left"></div>
      <div class="center">
        <h1>彈性佈局方案</h1>
        1.這是三欄佈局的中間部分
        1.這是三欄佈局的中間部分
        1.這是三欄佈局的中間部分
      </div>
      <div class="right"></div>
    </article>
  </section>

css

    .layout.flexbox .left-right-center {
      display: flex;
    }

    .layout.flexbox .left {
      width: 300px;
      background: violet;
    }

    .layout.flexbox .center {
      flex: 1;
      background: lightblue;
    }

    .layout.flexbox .right {
      width: 300px;
      background: yellowgreen;
    }

表格佈局

問題：

• 對SEO不友好，麻煩，操作有點繁瑣

優點：

• 兼容性很好
• 三欄會同時增高和降低（也可能是缺點~）

html

<section class="layout table">
    <article class="left-right-center">
      <div class="left"></div>
      <div class="center">
        <h1>表格佈局方案</h1>
        1.這是三欄佈局的中間部分
        1.這是三欄佈局的中間部分
        1.這是三欄佈局的中間部分
      </div>
      <div class="right"></div>
    </article>
  </section>

css

	.layout.table .left-right-center {
      width: 100%;
      display: table;
      height: 100px;
    }
    .layout.table .left-right-center>div{
      display: table-cell;
    }
    .layout.table .left{
      width: 300px;
      background: lightslategray;
    }
    .layout.table .center{
      background: rgb(223, 19, 145);
    }
    .layout.table .right{
      width: 300px;
      background: mediumblue;
    }	

網格佈局

問題：
emmmm基本沒有…
優點：
可以做複雜的事，同時代碼量也不多,是新技術
html

<section class="layout grid">
    <article class="left-right-center">
      <div class="left"></div>
      <div class="center">
        <h1>網格佈局方案</h1>
        1.這是三欄佈局的中間部分
        1.這是三欄佈局的中間部分
        1.這是三欄佈局的中間部分
      </div>
      <div class="right"></div>
    </article>
  </section>

css

	.layout.grid .left-right-center{
      display: grid;
      width: 100%;
      grid-template-rows: 100px;
      grid-template-columns: 300px auto 300px;
    }
    .layout.grid .left{
      background: red;
    }
    .layout.grid .center{
      background: rgb(44, 151, 212);
    }
    .layout.grid .right{
      background: rgb(197, 35, 17);
    }	

界面展示

個人推薦使用

• float佈局
• flex佈局
• grid佈局

具體還需結合實際情況使用

當然還有其他的佈局方式，就靠大家自己探索了~