css頁面佈局

時間 2019-11-10

標籤 css 頁面佈局欄目 CSS 简体版

原文原文鏈接

回顧複習css頁面佈局

三欄佈局

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

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

style方法一：html

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方法四：flex

.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方法五：code

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

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

兩欄佈局：

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

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

方法二table佈局it

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

    .box2 {
      background: blue;
    }

方法三flex佈局io

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。