布局类css整理

左边定宽 右边自适应

此类的都是管理台应用

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .a {
            width: 100vw;
            height: 100vh;
            padding: 0 0 0 200px;
            background: red;
            position: relative;
        }
        .b {
            width: 100vw;
            min-height: 100vh;
            background: blue;
        }
        .c {
            position: absolute;
            top: 0;
            left: 0;
            background: yellow;
            width: 200px;
            height: 100vh;
        }
    </style>
    <div class="a">
        <div class="b">

        </div>
        <div class="c">

        </div>
    </div>

垂直水平居中

 <style>
    *{
        margin: 0;
        padding: 0;

    }
    .a {
        width: 100vw;
        height: 100vh;
        position: relative;
    }
    .b {
        border: solid red 1px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 30px;
        height: 30px;;
    }
</style>
  <div class="a">
    <div class="b">
        asd
    </div>
</div>