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

css页面布局

回顾复习css页面布局

三栏布局

两栏布局：

相关推荐