面試之CSS篇 - 實現三欄佈局的延伸

時間 2019-12-05

原文原文鏈接

本文探討下面試常談問題之三欄佈局，說到三欄佈局，可能你們心中至少也能夠想出 2-3 種答案，這些谷歌就一大堆解決方案的題目爲何還要拿出來談談呢？css

這裏主要是考察掌握知識度的延伸，好比你能答出幾種？ => 這幾種方式的優缺點在哪？ => 最佳方案是哪一個以及如何解決這些缺點...html

這些能夠考驗到你是否背題亦或者真正掌握到這些知識點。git

高度已知，實現三欄佈局，左右 300px 中間自適應。

在實現前先重置一下默認的樣式github

* {
  margin: 0;
  padding: 0;
}
.layout {
  margin-top: 20px;
}
.layout article div {
  min-height: 100px;
}
複製代碼

浮動佈局解決方案

左右浮動，給寬度，這樣就實現了，是否是很簡單~可是也存在一些缺點，後邊會講到。面試

<section class="layout float">
  <style> .layout.float .left { float: left; width: 300px; background: red; } .layout.float .right { float: right; width: 300px; background: blue; } .layout.float .center { background: yellow; } </style>
  <article class="left-right-center">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
      <h1>浮動解決方案</h1>
      1. 這是三欄佈局中間部分 2. 這是三欄佈局中間部分
    </div>
  </article>
</section>
複製代碼

絕對定位佈局解決方案

left/center/right 均給絕對定位，左右給 300px，中間設置 left 300 right 300，也一樣實現這個佈局~ide

<!-- 絕對定位解決方案 -->
<section class="layout absolute">
  <style> .layout.absolute .left-center-right > div { position: absolute; } .layout.absolute .left { left: 0; width: 300px; background: red; } .layout.absolute .center { left: 300px; right: 300px; background: yellow; } .layout.absolute .right { right: 0; width: 300px; background: blue; } </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>絕對定位解決方案</h1>
      1. 這是三欄佈局中間部分 2. 這是三欄佈局中間部分
    </div>
    <div class="right"></div>
  </article>
</section>
複製代碼

flex 佈局解決方案

父級 box 給 display: flex , 左右寬 300，中間 flex : 1 ，flex 的靈活性也十分的好用 ~佈局

<section class="layout flexbox">
  <style> .layout.flexbox { margin-top: 140px; } .layout.flexbox .left-center-right { display: flex; } .layout.flexbox .left { width: 300px; background: red; } .layout.flexbox .center { flex: 1; background: yellow; } .layout.flexbox .right { width: 300px; background: blue; } </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>flex 佈局解決方案</h1>
      1. 這是三欄佈局中間部分 2. 這是三欄佈局中間部分
    </div>
    <div class="right"></div>
  </article>
</section>
複製代碼

table 佈局解決方案

父級 display: table; 左中右 display: table-cell;flex

<section class="layout table">
  <style> .layout.table .left-center-right { width: 100%; display: table; height: 100px; } .layout.table .left-center-right > div { display: table-cell; } .layout.table .left { width: 300px; background: red; } .layout.table .center { background: yellow; } .layout.table .right { width: 300px; background: blue; } </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>表格佈局解決方案</h1>
      1. 這是三欄佈局中間部分 2. 這是三欄佈局中間部分
    </div>
    <div class="right"></div>
  </article>
</section>
複製代碼

grid 佈局解決方案

利用網格佈局，父級 display: grid; width: 100%; grid-template-columns: 300px auto 300px;flexbox

<section class="layout grid">
  <style> .layout.grid .left-center-right { display: grid; width: 100%; grid-template-rows: 100px; grid-template-columns: 300px auto 300px; } .layout.grid .left { background: red; } .layout.grid .center { background: yellow; } .layout.grid .right { background: blue; } </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>grid佈局解決方案</h1>
      1. 這是三欄佈局中間部分 2. 這是三欄佈局中間部分
    </div>
    <div class="right"></div>
  </article>
</section>
複製代碼

優缺點

上面咱們給出 5 種解決方案，那麼面試官怎麼延伸這個問題呢？若是把高度已知去掉，又該如何實現呢？那咱們不止要考慮水平方向的，同時要考慮中間的高度問題。那咱們剛寫的五種方案，哪些能夠適用，哪些又不能適用了呢這五種方案的兼容性又如何，最優的解決方案又是哪一個spa

float
- 缺點：在於脫離文檔流，意味着它下面的子元素也必須脫離文檔流，還須要清除浮動帶來的影響，若是處理很差會帶來不少問題，這是它自己的侷限性
- 優勢：兼容性很好，快捷，不容易出問題
absolute
flex
- 缺點：兼容到 IE 8
- 在 float 、absolute 出現以後出現的一種佈局方式，爲了解決兩種佈局方式的不足。flex 佈局方案算是比較完美的一種，尤爲是如今移動端基本都是使用 flex 佈局
table
- 缺點：操做麻煩，對 seo 不友好，當某一個單元格高度超出的時候，那麼其餘單元格也會跟着調整高度，有時候咱們場景是不容許的
- 優勢：兼容性很好，當 flex 解決不了的話，能夠嘗試下用表格佈局
grid
- 新出的網格佈局，經過網格佈局能夠作不少事情，代碼精簡