前端面试题之CSS布局问题

垂直居中DIV

HTML部分

    <div class="father">
        <div class="son">我是垂直居中的div</div>
    </div>

这里简单给出几种
1.绝对定位（盒子宽高已知）

        .father {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: red;
        }
        
        .son {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -150px;（-盒子一半宽度）
            margin-top: -150px;（-盒子一半高度） 
            width: 300px;
            height:300px;
            background-color: blue;
        }

2.绝对定位（宽高已知）

        .father {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: red;
        }
        
        .son{
            position:absolute;
            margin:auto;
            top:0; left:0; bottom:0;right:0;
            width: 300px;
            height:300px;
            background-color: blue;
        }

3.定位 （宽高未知）

        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: blue;
        }

4.grid布局（父元素设置，宽高未知）（兼容性ie 10以上支持）

        .father {
            display: grid;
            align-items: center;
            justify-content: center;
            width: 500px;
            height: 500px;
            background-color: red;
        }

5.flex布局（父元素设置，宽高未知）（兼容性ie 11以上支持）

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

6.表格布局（父元素设置，宽高未知）（兼容性较好）

        .father {
            display:table-cell
            text-align: center;
            vertical-align: middle
            width: 500px;
            height: 500px;
            background-color: red;
        }
        .son {
       		display: inline-block;
        }

两栏布局左边固定右边自适应

这与右边固定左边自适应，上固定下自适应是一个道理。

HTML部分

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

1.float布局

            .left {
                width: 200px;
                height: 200px;
                float: left;
                background-color: blue;
            }
            .right {
                margin-left: 200px;
                height: 200px;
                background-color: red;
            }

2.绝对定位

            .father {
                position: relative;
                height: 200px;
            }
            
            .left {
                position:absolute;
                width: 200px;
                height: 100%;
                float: left;
                background-color: blue;
            }

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

3.flex布局

            .father {
                height: 300px;
                width: 100%;
                display: flex;
            }

            .left {
                width: 300px;
                height: 100%;
                background-color: blue;
            }

            .right {
                flex: 1;
                height: 100%;
                background-color: red;
            }

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

这与左中固定右边自适应，中右固定左边自适应，以及上下固定中间自适应是一个道理

HTML部分

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

1.float布局

        .father{
            height: 50px;
             div{
                height: 100%;
            }
        }

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

        .main {
            margin-left: 200px;
            margin-right: 200px;
            background-color: blue
        }

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

2.绝对定位

        .father{
            position: relative;
            height: 50px;
              div{
                position: absolute;
                height: 100%;
            }
        }

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

        .main {
            left: 200px;
            right: 200px;
            background-color: blue
        }

        .right {
            right: 0;
            width: 200px;
            background-color: yellow
        }

3.flex布局
HTML部分

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

CSS部分

        .father {
            display: flex;
            height: 50px;
             div{
                height: 100%;
            }
        }

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

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

        .right {
            width: 200px;
            background-color: yellow
        }

总结

这里列出的是一些我比较常用的方法，
其他的像table布局，网格布局可以看阮一峰——网格布局教程
想了解更多关于flex布局可以看Flex 布局详解

如有不足之处，请指出。