css頁面佈局

Infinity發表於2018-11-29
CSS

回顧複習css頁面佈局

三欄佈局

左右固定中間自適應：
html部分同一如下

  <div class=`box1`></div>
  <div class="box2"></div>
  <div class="box3">
    中間自適應
  </div>

style方法一：

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

原理：利用第一和第二個盒子的左右浮動，使得與第三個盒子在一行
缺點：當寬度小於600px時，會繁發生換行；以及中間高度大於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;
    }

原理：利用絕對定位，來實現left=300px; right=300px
優點：當中間自適應的高度大於兩邊時不會發生重疊；但是當視窗大小小於600px時，中間會發生重疊，不換行
style方法三：

  <style>
    .wrap {
      display: flex;
    }
    .box {
      height: 300px;
    }
    .box1 {
      width: 300px;
      background: red;

    }
    .box2 {

      width: 300px;
      background: blue;
    }
    .box3 {
      background: yellow;
      height: 500px;
      flex: 1;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class=`box box1`></div>
    
    <div class="box box3">
      中間自適應
    </div>
    <div class="box box2"></div>
  </div>
</body>

原理：外部flex佈局；中間利用flex: 1;即flex-basis： 0寬度中間取其容器最大
優點：自適應強，寬度小於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佈局，來達到自使用，外部divwidth：100%，不然無法填充
優點：自適應強
缺點：中間高度改變會影響兩邊
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;
    }

原理：利用網格佈局
優點：編寫簡單，自適應較強

兩欄佈局：

同理上面的·方法：
方法一 網格佈局：

    .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; */
    }

相關文章