css常见布局

1.普通布局（头部、内容、底部）

    <div class="container">
        <header></header>
        <div class="content"></div>
        <footer></footer>
    </div> 

2，两栏布局

左边固定大小，右边自适应

flex布局

.p{
     display: flex;
     
 }
 .p>div{
     height: 100px;
 }
 .a{
     background-color: pink;
     width: 200px;
 }
 .b{
     background-color: bisque;
flex: 1;
 }

浮动

 .p>div{
     height: 100px;
 }
 .a{
     background-color: pink;
     width: 200px;
     float: left;
 }
 .b{
     background-color: bisque;
    margin-left: 200px;
 }

第二种

.p>div{
     height: 100px;
 }
 .a{
     background-color: pink;
     width: 200px;
     float: left;
 }
 .b{
     background-color: bisque;
    width: 100%
    float: left;
 }

网格布局

 .container {
            display: grid;
            width: 100%;
            grid-template-rows: 300px;//每行的高
            grid-template-columns: 100px auto//每个元素的宽度
        }

3，三栏布局

flex实现

 .p{
     display: flex;
     
 }
 .p>div{
     height: 100px;
 }
 .a{
     background-color: pink;
     width: 200px;

 }
 .b{
     background-color: bisque;
     flex: 1;

 }
.c{
      background-color: pink;
      width: 200px;
 }

浮动实现

 .p{
     
 }
 .p>div{
     height: 100px;

 }
 .a{
     background-color: pink;
     width: 200px;
    float: left;
 }
 .b{
     background-color: bisque;
     /* margin-right: 200px; */
     /* float: left;
      */
     margin: 0 200px;
 }
.c{
      background-color: yellow;
      width: 200px;
     float: right;
 }

定位实现

父元素设置相对定位，左右元素分别设置left、right为0，然后中间元素的left分别为左右的width即可

.container {
            position: relative;
        }
        .left {
            position: absolute;
            left: 0;
            width: 100px;
            height: 300px;
            background-color: #ce5a4b;
        }
        .main {
            position: absolute;
            left: 100px;
            right: 200px;
            height: 300px;
            background-color: #f8cf5f;
        }
        .right {
            position: absolute;
            right: 0;
            width: 200px;
            height: 300px;
            background-color: #499e56;
        }

网格布局

 .container {
            display: grid;
            width: 100%;
            grid-template-rows: 300px;//每行的高
            grid-template-columns: 100px auto 200px;//每个元素的宽度
        }