前端經典面試題CSS三欄佈局

時間 2019-12-06

原文原文鏈接

對於前端來講，佈局也是必須掌握的，一個好的佈局可讓頁面看起來更美觀。提到佈局，那就不得不說CSS三欄佈局。這是前端面試常常會問到的一個問題，算是基礎題。所謂的三欄佈局，通常是指左右兩邊固定中間自適應，或者是中間固定左右兩邊自適應。前端

左右兩邊固定中間自適應

聖盃佈局

HTML結構設置
新建一個父元素，包含三個子元素：left、main、right（注意，main在寫在前面，這樣在頁面渲染時會先加載中間，針對面試題優先加載中間部分）面試

style樣式設置編程

一、父元素設置高度
二、三個元素均設置浮動
三、中間main部分定寬100%：width: 100%，左右兩邊按產品需求設置寬高
四、左邊設置margin-left: -100%；右邊設置margin-right: -右盒子寬
五、父元素設置padding-left: 左盒子寬；padding-right: 右盒子寬
六、左右盒子相對定位瀏覽器

<div class="container">
  <div class="main f">go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div>
  <div class="left f"></div>
  <div class="right f"></div>
</div>
<style>
  body {
    min-width: 700px;
  }
  .container {
     height: 300px;
     padding: 0 200px 0 200px;
  }
  .f {
     float: left;
  }
  .main {
     width: 100%;
     height: 300px;
     background-color: cornflowerblue;
  }
  .left {
     width: 200px;
     height: 300px;
     background-color: indianred;
     margin-left: -100%;
     position: relative;
     left: -200px;
  }
  .right {
     width: 200px;
     height: 300px;
     background-color: lightgreen;
     margin-left: -200px;
     position: relative;
     right: -200px;
  }
</style>

該佈局受內部元素影響而破壞佈局的機率低，可是當瀏覽器屏幕縮小的必定程度時，左右兩側的內容會掉下來，或發生重疊現象。解決方案，給body加一個最小寬度（起碼大於左右兩側寬度之和）佈局

雙飛翼佈局

與聖盃佈局的思路是一致的，只是有一些細微的差異。學習

HTML結構設置
新建一個父元素，包含三個子元素：left、main、right（注意，main在寫在前面，這樣在頁面渲染時會先加載中間，針對面試題優先加載中間部分）flex

style樣式設置code

一、父元素設置高度
二、三個元素均設置浮動
三、中間main部分定寬100%：width: 100%，左右兩邊按產品需求設置寬高
四、中間main部分再加一個盒子inner，放置內容（與聖盃佈局的不一樣點）
五、左邊設置margin-left: -100%；右邊設置margin-right: -右盒子寬
六、新添加盒子，inner，設置左右padding或margin對象

<div class="container">
   <div class="main f">
      <div class=inner>go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div>
   </div>
   <div class="left f"></div>
   <div class="right f"></div>
</div>
<style>
  .container {
     height: 300px;
  }
  .f {
     float: left;
  }
  .main {
     width: 100%;
     height: 300px;
     background-color: cornflowerblue;
  }
  .left {
     width: 200px;
     height: 300px;
     background-color: indianred;
     margin-left: -100%;
  }
  .right {
     width: 200px;
     height: 300px;
     background-color: lightgreen;
     margin-left: -200px;
  }
  .inner {
    padding: 0 200px 0 200px;
  }
</style>

自身浮動

HTML結構設置
新建三個元素：left、right、main（注意，main寫在後面）產品

style樣式設置

一、左盒子左浮動，右盒子右浮動
二、中間部分設置margin或padding值

<div class="left"></div>
<div class="right"></div>
<div class="main">我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容</div>
<style>
    .main {
        margin: 0 200px 0 200px;
        background-color: red;
        height: 200px;
    }
    .left {
        float: left;
        width: 200px;
        background-color: blue;
        height: 200px;
    }
    .right {
        float: right;
        width: 200px;
        background-color: pink;
        height: 200px;
    }
</style>

CSS3新特性：flex

HTML結構設置
新建一個父元素，包含三個子元素：left、main、right（注意，main寫在中間）

style樣式設置

一、父元素設置寬度爲100%，display: flex；
二、左右兩則按產品需求設置寬高
三、中間部分設置flex: 1；

<div class="container">
  <div class="left"></div>
  <div class="main">我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容</div>
  <div class="right"></div>
</div>
<style>
    .container {
       width: 100%;
       height: 200px;
       display: flex;
   }
   .main {
       flex: 1;
       background-color: red;
       height: 200px;
   }
   .left {
       width: 200px;
       background-color: blue;
       height: 200px;
   }
   .right {
       width: 200px;
       background-color: pink;
       height: 200px;
   }
</style>

還有其餘的寫法，這裏就不一一贅述，只是列舉了一些比較經常使用的，以及面試可能會問到的狀況。CSS3還有不少好玩的特性，在工做和學習的過程當中值得深刻研究。

根據建議評論網友的建議，作了修改喲

CSS3flex特性

HTML結構設置
新建一個父元素，包含三個子元素：main、left、right（注意，main寫在前面）

style樣式設置

一、父元素設置寬度爲100%，display: flex；
二、main中間部分設置flex: 1；
三、左右兩則按產品需求設置寬高；
四、left設置order: -1；

<div class="container">
  <div class="main">我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容</div>
  <div class="left"></div>
  <div class="right"></div>
</div>
<style>
    .container {
       width: 100%;
       height: 200px;
       display: flex;
   }
   .main {
       flex: 1;
       background-color: red;
       height: 200px;
   }
   .left {
       width: 200px;
       background-color: blue;
       height: 200px;
       order: -1;
   }
   .right {
       width: 200px;
       background-color: pink;
       height: 200px;
   }
</style>

order屬性是調整或設置盒模型對象的子元素出現的順序，數值越小排列越靠前，默認爲0。在上面的佈局中，left想要排在前面，就須要比0小，因此設置order: -1，left盒子會跑到前面。須要注意的是，若是父元素沒有設置flex，則 order 屬性不起做用。

感謝【很是記得你】的建議，emmm，編程的解決方法有不少種，不少時候都是靠經驗的積累。因此，小夥伴們，堅持會看到勝利的曙光，雖然我也在掙扎中(#^.^#)

中間固定左右兩邊自適應

浮動 + 負邊距（聖盃佈局）

HTML結構設置
新建一個父元素，包含三個子元素：left、main、right（注意，main寫在中間）

style樣式設置

一、左右兩邊各佔50%的寬度
二、左邊負邊距 margin-left 佔中間div寬度的一半
三、右邊負邊距 margin-right 也佔中間div寬度的一半

<div class="container">
   <div class="left"></div>
   <div class="main">我是中間內容</div>
   <div class="right"></div>
 </div>
 <style>
    .main {
        width: 100px;
        text-align: center;
        float: left;
        background-color: lightgreen;
        height: 300px;
    }
    .left {
        height: 300px;
        float: left;
        width: 50%;
        margin-left: -50px;
        background-color: pink;
    }
    .right {
        height: 300px;
        float: right;
        width: 50%;
        margin-right: -50px;
        background-color: cornflowerblue;
    }
 </style>

CSS3新特性：flex

HTML結構設置
新建一個父元素，包含三個子元素：left、main、right

style樣式設置

一、父元素設置display: flex；flex-direction: row；
二、左右設置flex-grow: 1，平分剩餘空間

<div class="container">
   <div class="left"></div>
   <div class="main">我是中間內容</div>
   <div class="right"></div>
 </div>
 <style>
    .container {
        display: flex;
        flex-direction : row;
    }
    .main {
        width: 200px;
        height: 300px;
        text-align: center;
        background-color: lightgreen;
    }
    .left {
        height: 300px;
        flex-grow: 1;
        background-color: pink;
    }
    .right {
        height: 300px;
        flex-grow: 1;
        background-color: cornflowerblue;
    }
 </style>

CSS3特性 calc(四則運算)

用於動態計算長度值。須要注意的是，運算符先後都須要保留一個空格，例如：width: calc(100% - 50px)。

HTML結構設置
新建一個父元素，包含三個子元素：left、main、right

style樣式設置

一、父元素設置100%寬；
二、左右設置width: calc(50%, - 中間寬/2)

<div class="container">
   <div class="left"></div>
   <div class="main">我是中間內容</div>
   <div class="right"></div>
 </div>
 .container {
     width: 100%;
     height: 300px;
 }
 .f {
     float: left;
 }
 .main {
     width: 100px;
     text-align: center;
     background-color: lightgreen;
     height: 300px;
 }
 .left {
     height: 300px;
     background-color: pink;
     width: calc(50% - 50px);  /*平分中間部分的寬度*/
 }
 .right {
     height: 300px;
     background-color: cornflowerblue;
     width: calc(50% - 50px);  /*平分中間部分的寬度*/
 }

路漫漫其修遠兮，沒有別人聰慧，那就堅持不懈努，相信勤能補拙。天天進步一點點，總有一天會邁進一大步。