[进击的 CSS-01]一文打尽常见布局方案一文打尽常见布局方案：圣杯布局、双飞翼布局、自适应布局、绝对居中。大前端知识

本文github地址:JavaScript_Everything 大前端知识体系与面试宝典，从前端到后端，全栈工程师，成为六边形战士

绝对居中

定宽高

1. 绝对定位+margin负值

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .container{
            width: 300px;
            height: 300px;
            background-color: blanchedalmond;
            position: relative;
        }
        .child{
            height: 100px;
            width: 100px;
            position: absolute;
            left: 50%;
            top:50%;
            margin-left: -50px;
            margin-top: -50px;
            background-color: lightcyan;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="child"></div>
    </div>
</body>
</html>

2. 绝对定位+margin:auto

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .container{
            width: 300px;
            height: 300px;
            background-color: blanchedalmond;
            position: relative;
        }
        .child{
            height: 100px;
            width: 100px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: lightcyan;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="child"></div>
    </div>
</body>
</html>

不定宽高

1. transform: translate

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .container{
            width: 300px;
            height: 300px;
            background-color: blanchedalmond;
            position: relative;
        }
        .child{
            position: absolute;
            left: 50%;
            top:50%;
            transform: translate(-50%, -50%);
            background-color: lightcyan;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="child">child</div>
    </div>
</body>
</html>

2. table布局

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .container{
            width: 300px;
            height: 300px;
            background-color: blanchedalmond;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .child{
            display: inline-block;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="child">child</div>
    </div>
</body>
</html>

3. flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .container{
            width: 300px;
            height: 300px;
            background-color: blanchedalmond;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .child{
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="child">child</div>
    </div>
</body>
</html>

圣杯布局/左右固定，中间自适应

1.使用浮动

Codes/CSS/布局方案/01.圣杯布局.html

    <style>
        html,body{
            height: 100%;
            overflow: hidden;
        }
        .container{
            height: 100%;
            padding: 0 200px;
        }
        .left, .right{
            width: 200px;
            min-height: 200px;
            background-color: cadetblue;
        }
        .center{
            width: 100%;
            min-height: 300px;
            background-color: aqua;
        }
        .left,.right,.center{
            float: left;
        }
        .left{
            margin-left: -100%;
            position: relative;
            left:-200px;
        }
        .right{
            margin-right: -200px;
        }

    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

2.使用flex

Codes/CSS/布局方案/03.flex圣杯布局.html

.container{
   width: 100%;
   display: flex;
   justify-content: space-between;

}
.center{
   flex: 1;
   min-height: 300px;
   background-color: bisque;
}
.left,
.right{
   flex:0 0 200px;
   height: 200px;
   background-color: aquamarine;
}

3.使用定位

Codes/CSS/布局方案/04.定位圣杯布局.html

.container{
   height: 100%;
   position: relative;
}
.center{
   margin: 0 200px;
   min-height: 300px;
   background-color: antiquewhite;
}
.left,
.right{
   position: absolute;
   top:0;
   width: 200px;
   height: 200px;
   background-color: aquamarine;
}
.left{
   left: 0;
}
.right{
   right: 0;
}

双飞翼布局

Codes/CSS/布局方案/02.双飞翼布局

    <style>
        html,body{
            height: 100%;
            overflow: hidden;
        }
        .container{
            width: 100%;
        }
        .container .center{
            margin: 0 200px;
            min-height: 300px;
            background-color: aqua;
        }
        .left,.right{
            width: 200px;
            min-height: 100px;
            background-color: blanchedalmond;
        }
        .container,.right,.left{
            float: left;
        }
        .left{
            margin-left: -100%;
        }
        .right{
            margin-left: -200px;
        }
        

    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="center"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>

实现居中(水平垂直居中)布局

基础代码

    <style>
        html,body{
            height: 100%;
            width: 100%;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

1.父级`flex`加元素本身`margin: auto`

html,body{
    display: flex;
}
.block{
    margin: auto;
}

2.父级`flex`

html,body{
    display: flex;
    justify-content: center;
    align-items: center;
}

3.定位

缺陷：需要知道盒子的宽高，但在自适应页面下无法做到

/* Codes/CSS/居中对齐/03.定位.html */
html,body{
    position: relative;
}
.box{
    position: absolute;
    top:50%;
    left:50%;
    margin-left: -50px;
    margin-top: -50px;
}

4.定位，但无须知道宽高

缺陷：盒子本身必须有宽高，否则失效

/* Codes/CSS/居中对齐/04.html */
html,body{
    position: relative;
}
.box{
    position: absolute;
    top:0;
    bottom: 0;
    left:0;
    right:0;
    margin: auto;
}

5.定位+`transform:translate`

原理：transform: translate(-50%, -50%)相当于自身向左、向下移动50%

优点：不需要宽高也可以居中，根据内容撑开盒子

缺陷：兼容性较差

/* Codes/CSS/居中对齐/05.html */
html,body{
    height: 100%;
    width: 100%;
    position: relative;
}
.box{
    position: absolute;
    background-color: aquamarine;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}

6.使用js

缺陷：直接操作DOM；需要盒子有宽高

<!-- Codes/CSS/居中对齐/06.html -->
    <div class="box">fltenwall</div>
    <script>
        let HTML = document.documentElement,
        winWidth = HTML.clientWidth,
        winHeight = HTML.clientHeight
        let Box = document.getElementsByClassName('box')[0]
        
        BoxWidth = Box.offsetWidth,
        BoxHight = Box.offsetHeight;
        Box.style.position="absolute"
        Box.style.left=(winWidth-BoxWidth)/2+'px'
        Box.style.top=(winHeight-BoxHight)/2+'px'
    </script>

7.利用`table-cell`

缺陷：奇淫技巧；父盒子必须有宽高

<!-- Codes/CSS/居中对齐/07.html -->
<style>
    .father{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        width: 300px;
        height: 300px;
        background-color: bisque;
    }
    .box{
        display: inline-block;
        background-color: aquamarine;
    }
</style>
</head>
<body>
    <div class="father">
        <div class="box">fltenwall</div>
    </div>
</body>

左边定宽，右边自适应

1. 左侧固定宽度，绝对定位

<!DOCTYPE html>
<html lang="en">
    <style>
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .container{
            width: 100%;
            height: 100%;
            position: relative;
        }
        .left{
            width: 200px;
            height: 100%;
            background-color: lightcyan;
            position: absolute;
        }
        .right{
            padding-left: 200px;
            height: 100%;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

2. flex

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .container{
            width: 100%;
            height: 100%;
            display: flex;
        }
        .left{
            width: 200px;
            height: 100%;
            background-color: lightcyan;
        }
        .right{
            flex:1;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

3. table布局

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .container{
            width: 100%;
            height: 100%;
            display: table;
        }
        .left{
            width: 200px;
            height: 100%;
            display: table-cell;
            background-color: lightcyan;
        }
        .right{
            display:table-cell;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

4. grid布局

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .container{
            width: 100%;
            height: 100%;
            display: grid;
            /* 列的宽度，左侧固定，右侧auto */
            grid-template-columns: 200px auto;
        }
        .left{
            background-color: lightcyan;
        }
        .right{
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>