一、假設(shè)高度已知，中間寬度自適應(yīng)，三欄（列）布局的方案有哪些？

float浮動(dòng)、absolute絕對(duì)定位、flex彈性盒子、table表格布局、grid網(wǎng)格布局

1. 浮動(dòng) float

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .container {
      width: 100%;
    }
    .float .left {
      width: 200px;
      height: 200px;
      background-color: red;
      float: left;
    }
    .float .right {
      width: 200px;
      height: 200px;
      background-color: blue;
      float: right;
    }
    .float .center {
      height: 200px;
      background-color: green;
      margin: 0 200px;
    }
  </style>
    <!-- 浮動(dòng)布局 -->
  <div class="container float">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">浮動(dòng)布局實(shí)現(xiàn)三欄布局</div>
  </div>

實(shí)現(xiàn)總結(jié)：
1-1 通過(guò)左右浮動(dòng)，實(shí)現(xiàn)左右兩欄的占位
1-2 通過(guò)內(nèi)容margin, 實(shí)現(xiàn)中間內(nèi)容寬度自適應(yīng)
1-3 right的元素必須放在center元素的前面，因?yàn)樾枰?right元素通過(guò)右浮動(dòng)

2. 絕對(duì)定位 absolute

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .container {
      width: 100%;
    }
    /* 絕對(duì)定位布局 */
    .absolute {
      position: relative;
    }
    .absolute > div {
      position: absolute;
    }
    .absolute .left {
      width: 200px;
      height: 200px;
      background-color: red;
      left: 0;
    }
    .absolute .center {
      left: 200px;
      right: 200px;
      height: 200px;
      background-color: green;
    }
    .absolute .right {
      width: 200px;
      height: 200px;
      background-color: blue;
      right: 0;
    }
  </style>
  <!-- 絕對(duì)定位布局 -->
  <div class="container absolute">
    <div class="left"></div>
    <div class="center">絕對(duì)定位布局實(shí)現(xiàn)三欄布局</div>
    <div class="right"></div>
  </div>

實(shí)現(xiàn)總結(jié)：
2-1. 通過(guò)絕對(duì)定位 + 定位兩側(cè) （left: 0 和 right:0）， 實(shí)現(xiàn)兩側(cè)占位
2-2. 通過(guò)絕對(duì)定位 + 減去兩側(cè)的寬度(left:200px.right:200px)，實(shí)現(xiàn)中間寬度自適應(yīng)

3. flex彈性布局

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .container {
      width: 100%;
    }
    /* 彈性盒子 */
    .flexbox {
      display: flex;
    }
    .flexbox .left {
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .flexbox .center {
      flex: 1;
      height: 200px;
      background-color: green;
    }
    .flexbox .right {
      width: 200px;
      height: 200px;
      background-color: blue;
    }
  </style>
  <!-- 彈性盒子布局 -->
  <div class="container flexbox">
    <div class="left"></div>
    <div class="center">彈性盒子實(shí)現(xiàn)三欄布局</div>
    <div class="right"></div>
  </div>

實(shí)現(xiàn)總結(jié)：
3-1. 通過(guò)給父元素設(shè)置彈性盒子布局 display: flex，給左右兩側(cè)設(shè)置寬度，實(shí)現(xiàn)兩側(cè)占位
3-2. 通過(guò)給center元素設(shè)置剩余寬度: flex:1, 實(shí)現(xiàn)寬度自適應(yīng)

4. table 表格布局

<style>
/* table布局 */
.table {
   display: table;
   width: 100%;
   height: 200px;
 }
 .table > div {
   display: table-cell;
 }
 .table .left {
   width: 200px;
   background-color: red;
 }
 .table .center {
   background-color: green;
 }
 .table .right {
   width: 200px;
   background-color: blue;
 }
</style>
<!-- table布局 -->
  <div class="container flexbox">
    <div class="left"></div>
    <div class="center">table實(shí)現(xiàn)三欄布局</div>
    <div class="right"></div>
  </div>

實(shí)現(xiàn)總結(jié)：
4-1 給父元素設(shè)置為表格布局display: table，并設(shè)置高度 height: 200px;
4-2 給子元素設(shè)置為表格單元格布局display: table-cell，可以繼承表格的高度，同時(shí)自動(dòng)計(jì)算寬度
4-3 給左右兩側(cè)設(shè)置寬度，中間寬度會(huì)自動(dòng)計(jì)算實(shí)現(xiàn)自適應(yīng)

5. grid布局

<style>
/* 網(wǎng)格布局 */
    .grid {
      /* 網(wǎng)格布局 */
      display: grid;
      /* 網(wǎng)格寬度 */
      width: 100%;
      /* 網(wǎng)格布局的高度 */
      grid-template-rows: 200px;
      /* 網(wǎng)格布局的三欄的寬度 */
      /* 1fr 表示剩余的空間平分 === flex:1 */
      grid-template-columns: 200px 1fr 200px;
      grid-template-columns: 200px auto 200px;
    }
    .grid .left {
      background-color: red;
    }
    .grid .center {
      background-color: green;
    }
    .grid .right {
      background-color: blue;
    }
</style>
<!-- 網(wǎng)格布局 -->
  <div class="container grid">
    <div class="left"></div>
    <div class="center">網(wǎng)格布局實(shí)現(xiàn)三欄布局</div>
    <div class="right"></div>
  </div>

實(shí)現(xiàn)總結(jié)：
5-1：給父元素設(shè)置網(wǎng)格布局和寬度，display: grid; width: 100%;
5-2：通過(guò)父元素設(shè)置子元素的高度, grid-template-rows: 200px;
5-3：通過(guò)父元素設(shè)置三欄或多欄的寬度，使用下列任意方式
grid-template-columns: 200px 1fr 200px;
grid-template-columns: 200px auto 200px;

二、這五種方案分別有什么優(yōu)缺點(diǎn)？

1. float 浮動(dòng)
   缺點(diǎn)：浮動(dòng)之后，是脫離文檔流的，需要清除浮動(dòng)，如果處理不好會(huì)導(dǎo)致頁(yè)面錯(cuò)位
   優(yōu)點(diǎn)：兼容性強(qiáng)
2. absolute絕對(duì)定位
   缺點(diǎn)：因?yàn)榻^對(duì)定位已經(jīng)脫離文檔流了，導(dǎo)致里面的子元素也是脫離文檔流的，導(dǎo)致這個(gè)方案的可使用性較差
   優(yōu)點(diǎn)：快捷
3. flex彈性盒子
   缺點(diǎn)：較老的瀏覽器不支持，比如IE6-IE9等
   優(yōu)點(diǎn)：完美的解決方案，沒(méi)有float和絕對(duì)定位的相關(guān)的問(wèn)題
4. table表格布局
   缺點(diǎn)：對(duì)SEO不夠友好，不利于搜索引擎收錄；當(dāng)三欄中任意一欄的高度超出，其他兩欄的高度也會(huì)改變
   優(yōu)點(diǎn)：兼容性強(qiáng)，支持IE8
5. grid網(wǎng)格布局
   缺點(diǎn)：兼容性弱
   優(yōu)點(diǎn)：網(wǎng)格布局可以做復(fù)雜的布局，同時(shí)代碼量較少

三、把高度已知改為未知，需要左右兩側(cè)的高度根據(jù)中間內(nèi)容撐開(kāi)，哪些方案還可以適用，哪些方案不可以適用

1. 彈性盒子、表格、網(wǎng)格布局 不改動(dòng)代碼情況下，支持高度自適應(yīng)
2. 浮動(dòng)、絕對(duì)定位，原有代碼不支持高度自適應(yīng)

四、這個(gè)五種方案的兼容性如何，寫(xiě)實(shí)際業(yè)務(wù)代碼，最優(yōu)的布局方案是哪個(gè)

根據(jù)每個(gè)方案的使用場(chǎng)景的范圍, 技術(shù)的老舊、以及兼容性強(qiáng)弱來(lái)排序
彈性布局 > 網(wǎng)格布局 > 浮動(dòng) > 表格 > 絕對(duì)定位文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-631558.html

到了這里，關(guān)于【基礎(chǔ)類】—三欄頁(yè)面布局的方案和優(yōu)缺點(diǎn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！