前端面試題：場(chǎng)景題(兩個(gè)盒子，左邊固定寬，右邊自適應(yīng)，你能想到幾種方法)

　　· 公共HTML代碼部分

<div class="content">

<div class="left"></div>

<div class="right"></div>

</div>

　　· 方法一：float來和BFC實(shí)現(xiàn)

<style>

.content {
   border: 1px solid #000;
   height: 800px;
   padding: 20px;
}
.left {
   width: 200px;
   height: 100%;
   background: red;
   float: left;
}
.right {
   height: 100%;
   background: pink;
   overflow: hidden;
}

</style>

　　· 方法二：absolute定位和margin值實(shí)現(xiàn)

<style>

.content {
    border: 1px solid #000;
    height: 800px;
    padding: 20px;
  }
   .left {
       width: 200px;
       height: 100%;
       background: red;
       position: absolute;
  }
   .right {
       height: 100%;
       background: pink;
       margin-left: 200px;
  }

</style>

　　· 方法三：calc(100% - 固定內(nèi)容的寬度) 用calc函數(shù)動(dòng)態(tài)計(jì)算數(shù)值

<style>

.content {
    border: 1px solid #000;
    height: 800px;
    padding: 20px;
  }
   .left {
       width: 200px;
       height: 100%;
       background: red;
       float: left;
  }
   .right {
       height: 100%;
       background: pink;
       float: left;
       width: calc(100% - 200px);
  }

</style>

　　· 方法四：flex布局輕松搞定

<style>

   .content {
       border: 1px solid #000;
       height: 800px;
       padding: 20px;
       display: flex;
  }
   .left {
       width: 200px;
       height: 100%;
       background: red;
  }
   .right {
       height: 100%;
       background: pink;
       flex: 1;
  }

</style>

　　· 方法五：使用table和table-cell實(shí)現(xiàn)

<style>

    .content {
        border: 1px solid #000;
        width: 100%;
        height: 800px;
        display: table;
    }
    .left {
        width: 200px;
        height: 100%;
        background: red;
        display: table-cell;
    }
    .right {
        height: 100%;
        background: pink;
        display: table-cell;
    }

</style>

　　· 方法六：使用inline-block攜手calc函數(shù)設(shè)置寬度

<style>

   .content {
       border: 1px solid #000;
       width: 100%;
       height: 800px;
       font-size: 0;
  }
   .left {
       width: 200px;
       height: 100%;
       background: red;
       display: inline-block;
       vertical-align: top;
  }
   .right {
       height: 100%;
       background: pink;
       display: inline-block;
       vertical-align: top;
       width: calc(100% - 200px);
       font-size: 16px;
  }

</style>

　　更多關(guān)于前端培訓(xùn)的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項(xiàng)目實(shí)操的話可以點(diǎn)擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。