css頁面布局

chavesgu 發(fā)布于2019-08-23 13:47 / 3219人閱讀

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

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

左右固定中間自適應(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;
    }

原理：利用第一和第二個盒子的左右浮動，使得與第三個盒子在一行
缺點：當(dāng)寬度小于600px時，會繁發(fā)生換行；以及中間高度大于300px時，會有兩邊覆蓋（其實中間的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;
    }

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

  


  
    
    
    
      中間自適應(yīng)

原理：外部flex布局；中間利用flex: 1;即flex-basis： 0寬度中間取其容器最大
優(yōu)點：自適應(yīng)強，寬度小于600時，會縮小兩邊寬度；
缺點：低版本瀏覽器對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布局，來達(dá)到自使用，外部divwidth：100%，不然無法填充
優(yōu)點：自適應(yīng)強
缺點：中間高度改變會影響兩邊
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)點：編寫簡單，自適應(yī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;
    }

方法四絕對定位

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

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

方法五浮動布局：

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

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