css頁(yè)面布局

luqiuwen 發(fā)布于2019-08-29 17:27 / 2724人閱讀

摘要：回顧復(fù)習(xí)頁(yè)面布局三欄布局左右固定中間自適應(yīng)部分同一如下中間自適應(yīng)方法一原理利用第一和第二個(gè)盒子的左右浮動(dòng)，使得與第三個(gè)盒子在一行缺點(diǎn)當(dāng)寬度小于時(shí)，會(huì)繁發(fā)生換行以及中間高度大于時(shí)，會(huì)有兩邊覆蓋其實(shí)中間的寬度就是可以利用解決方法二原理利用絕對(duì)定

回顧復(fù)習(xí)css頁(yè)面布局 三欄布局

左右固定中間自適應(yīng)：
html部分同一如下

  
  
  
    中間自適應(yīng)

style方法一：

    div {
      height: 300px;
    }
    .box1 {
      float: left;
      width: 300px;
      background: red;
    }
    .box2 {
      float: right;
      width: 300px;
      background: blue;
    }
    .box3 {
      background: yellow;
    }

原理：利用第一和第二個(gè)盒子的左右浮動(dòng)，使得與第三個(gè)盒子在一行
缺點(diǎn)：當(dāng)寬度小于600px時(shí)，會(huì)繁發(fā)生換行；以及中間高度大于300px時(shí)，會(huì)有兩邊覆蓋（其實(shí)中間的div寬度就是width：100%;可以利用overflow: hidden解決）
style方法二：

    div {
      height: 300px;
    }
    .box1 {

      width: 300px;
      background: red;
      position: absolute;
      left: 0;
    }
    .box2 {
      position: absolute;
      right: 0;
      width: 300px;
      background: blue;
    }
    .box3 {
      background: yellow;
      height: 500px;
      position: absolute;
      left: 300px;
      right: 300px;
    }

原理：利用絕對(duì)定位，來(lái)實(shí)現(xiàn)left=300px; right=300px
優(yōu)點(diǎn)：當(dāng)中間自適應(yīng)的高度大于兩邊時(shí)不會(huì)發(fā)生重疊；但是當(dāng)視窗大小小于600px時(shí)，中間會(huì)發(fā)生重疊，不換行
style方法三：

  


  
    
    
    
      中間自適應(yīng)

原理：外部flex布局；中間利用flex: 1;即flex-basis： 0寬度中間取其容器最大
優(yōu)點(diǎn)：自適應(yīng)強(qiáng)，寬度小于600時(shí)，會(huì)縮小兩邊寬度；
缺點(diǎn)：低版本瀏覽器對(duì)flex兼容性不好；
style方法四：

    .wrap {
      display: table;
      width: 100%;
    }
    .box {
      height: 300px;
      display: table-cell;
    }
    .box1 {
      width: 300px;
      background: red;
    }
    .box2 {

      width: 300px;
      background: blue;
    }
    .box3 {
      background: yellow;
      height: 300px;
    }

原理：利用table布局，來(lái)達(dá)到自使用，外部divwidth：100%，不然無(wú)法填充
優(yōu)點(diǎn)：自適應(yīng)強(qiáng)
缺點(diǎn)：中間高度改變會(huì)影響兩邊
style方法五：

    .wrap {
      display: grid;
      width: 100%;
      grid-template-rows: 100px;
      grid-template-columns: 300px auto 300px;
      
    }
    .box1 {
      background: red;
    }
    .box2 {
      background: yellow;
    }
    .box3 {
      background: blue;
    }

原理：利用網(wǎng)格布局
優(yōu)點(diǎn)：編寫簡(jiǎn)單，自適應(yīng)較強(qiáng)

兩欄布局：

同理上面的·方法：
方法一網(wǎng)格布局：

    .wrap {
      display: grid;
      grid-template-rows: 100px;
      grid-template-columns: 100px auto
      
    }
    .box1 {
      background: red;
    }
    .box2 {
      background: yellow;
    }
    .box3 {
      background: blue;
      /* height: 500px; */
    }

方法二table布局

    .wrap {
      display: table;
      width: 100%;
    }
    .box {
      display: table-cell
    }
    .box1 {
      width: 100px;
      background: red;
    }

    .box2 {
      background: blue;
    }

方法三flex布局

    .wrap {
      display: flex;
    }

    .box1 {
      width: 100px;
      background: red;
    }

    .box2 {
      background: blue;
      flex: 1;
    }

方法四絕對(duì)定位

    .box1 {
      width: 300px;
      position: absolute;
      left: 0;
      background: red;
      height: 100px;
    }

    .box2 {
      background: blue;
      position: absolute;
      left: 300px;
      right: 0;
    }

方法五浮動(dòng)布局：

    .box1 {
      width: 300px;
      float: left;
      background: red;
      height: 100px;
    }

    .box2 {
      background: blue;
      /* overflow: hidden; */
    }