CSS布局问题

一.垂直居中DIV（子盒子在父盒子中间）

（1）给定宽高

html部分

<div class="father">
     <div class="son">我是中间位置</div>
</div>

style部分

相对定位：相对定位移动参照自己原来的位置移动，原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）

绝对定位：

1. 绝对定位  子盒子宽高已知 top / left:50%；margin-top/margin-left:负的子盒子一半

<style>
    .father {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: black;
    }

    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px; // 负的子盒子高度一半
        margin-left: -50px;  // 负的子盒子宽度一半
        width: 100px;
        height: 100px;
        background-color: aliceblue;
    }
</style>

2. 绝对定位 （子盒子宽高已知） margin:auto     top/left /bottom/rigth :0

<style>
    .father {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: black;
    }
    .son {
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 300px;
        height: 300px;
        background-color: aliceblue;
    }
</style>

3. 绝对定位   transform:translate(-50%,-50%)    top / left:50%

<style>
    .father {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: black;
    }

    .son {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: aliceblue;
    }
</style>

4.flex布局

<style>
    .father {
        display: flex;
        width: 500px;
        height: 500px;
        align-items: center;
        justify-content: center;
        background-color: black;
    }

    .son {
        width: 50%;
        height: 50%;
        background-color: aliceblue;
    }
</style>

二.两栏布局  左边固定  右边自适应（左有高宽 右有高宽度自适应）

1. float布局

左边盒子给定宽度，另一个盒子自适应宽度

HTML部分

<div class="father">
        <div class="left"></div>
        <div class="right"></div>
</div>

css部分

（1）非float部分，没有设置宽度时，宽度自适应

<style>
    .left {
        width: 200px;
        height: 200px;
        float: left;
        background-color: black;
    }

    .right {  
        /* 非float部分，没有设置宽度，宽度自适应 */
        height: 200px;
        margin-left:200px;
        background-color: blueviolet;
    }
</style>

插：非float部分，若设置宽度时，要加上margi-left/right，否则非float元素会被float元素覆盖住一部份（此处两个盒子都设置了高宽）

<style>
    .left {
        width: 200px;
        height: 200px;
        float: left;
        background-color: black;
    }

    .right {  // 非float部分，在设置宽度的时候，需要有margin-left
        margin-left: 200px; 
        height: 200px;
        width: 200px;
        background-color: blueviolet;
    }
</style>

 2.绝对定位布局

css部分

<style>
    .father {
        position: relative;
        height: 200px;
    }

    .left {
        position: absolute;
        height: 100%;
        width: 200px;
        background-color: black;
    }

    .right {
        position: absolute;
        height: 100%;
        left: 200px;  // left 与 right是子元素相对于父元素设置的位置
        right: 0;
        background-color: blueviolet;
    }
</style>

3.flex布局

flex:1 表示侧边栏大小固定后，将内容区设置flex：1，内容区则会自动放大占满剩余空间。

<style>
    .father {
        display: flex;
        height: 200px;
    }

    .left {
        height: 100%;
        width: 200px;
        background-color: black;
    }

    .right {
        height: 100%;
        flex: 1;
        background-color: blueviolet;
    }
</style>

三.  三栏布局左右固定中自适应

 HTML部分

 <div class="father">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>

style部分

1.float布局

<style>
    .left {
        height: 200px;
        width: 200px;
        float: left;
        background-color: black;
    }

    .right {
        height: 200px;
        width: 200px;
        float: right;
        background-color: black;
    }

    .main {
        height: 200px;
        background-color: blueviolet;
    }
</style>

2.绝对定位

<style>
    .father {
        position: relative;
        height: 200px;
    }

    .left {
        position: absolute;
        height: 100%;
        width: 200px;
        background-color: black;
    }

    .right {
        position: absolute;
        height: 100%;
        width: 200px;
        right: 0;
        background-color: black;
    }

    .main {
        position: absolute;
        height: 100%;
        right: 200px;
        left: 200px;
        background-color: blueviolet;
    }
</style>

3.flex布局

HTML部分

<div class="father">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
</div>

css部分

<style>
    .father {
        height: 200px;
        display: flex;
    }

    .left {
        width: 200px;
        background-color: black;
    }

    .main {
        flex: 1;
        background-color: blueviolet;
    }

    .right {
        width: 200px;
        background-color: black;
    }
</style>