CSS常见的几种布局

本着学习的时候要自己尝试的态度，我在网上看了几种场景的布局，并试着自己将其写出来，在此总结下。

一、div水平垂直居中
html：父div + 子div
方法1：父div相对定位，子div绝对定位，配合css属性transform和translate调整定位。
代码：

<style>   
 .container{
        width: 500px;
        height: 500px;
        margin: 0 auto 20px auto;
        border: 1px solid salmon;
        position: relative;
    }
    .c1 {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        /* 下面这几个与定位无关，只是为了更好看点*/
        text-align: center;
        line-height: 100px;
        background-color: #409EFF;
        color: white;
    }
</style>
<div class="container">
    <div class="c1">居中div</div>
</div>

方法2：
使用display:flex ，flex的存在解决了一个很麻烦的问题，就是垂直居中问题

<style>
    .container2 {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .c2 {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        background-color: #409EFF;
        color: white;
    }
</style>

<div class="container container2">
    <div class="c2">居中div</div>
</div>

界面效果均为：

image.png

二、两列布局：左侧宽度固定，右侧自适应
html：一个父div，两个子div
方法1：父级div设置position:relative; 左侧div设置绝对定位position:absolute，右边的div设置margin-left

<style>
    .left{
        width: 50px;
        height: 100%;
        position: absolute;
        left: 0;
    }
    .right{
        margin-left: 50px;
        height: 100%;
    }
</style>

<div class="container container3">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
</div>

方法2：左侧div向左浮动，右侧div设置margin-left

<style>
    .left{
        width: 50px;
        height: 100%;
        float:left;
    }
    .right{
        margin-left: 50px;
        height: 100%;
    }
</style>

<div class="container container4">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
</div>

方法3：使用display:flex

<style>
    .container5 {
        display: flex;
    }
    .left2{
        width: 50px;
    }
    .right2{
        flex: 1;
    }
</style>

<div class="container container5">
    <div class="left2">左侧</div>
    <div class="right2">右侧</div>
</div>

页面效果均为：

image.png