两栏布局、三栏布局、水平垂直居中

文章目录

[1 两栏布局](#1 两栏布局)
- [1.1 浮动 + margin](#1.1 浮动 + margin)
- [1.2 浮动 + BFC](#1.2 浮动 + BFC)
- [1.3 flex布局](#1.3 flex布局)
- [1.4 左绝父相 + margin](#1.4 左绝父相 + margin)
- [1.5 右绝父相 + 方向定位](#1.5 右绝父相 + 方向定位)
[2 三栏布局](#2 三栏布局)
- [2.1 子绝父相 + margin](#2.1 子绝父相 + margin)
- [2.2 flex布局](#2.2 flex布局)
- [2.3 浮动 + margin](#2.3 浮动 + margin)
- [2.4 圣杯布局](#2.4 圣杯布局)
- [2.5 双飞翼布局](#2.5 双飞翼布局)
[3 水平垂直居中](#3 水平垂直居中)
- [3.1 绝对定位 + translate](#3.1 绝对定位 + translate)
- [3.2 绝对定位 + margin](#3.2 绝对定位 + margin)
- [3.3 绝对定位 + margin](#3.3 绝对定位 + margin)
- [3.4 flex布局](#3.4 flex布局)

1 两栏布局

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应。

1.1 浮动 + margin

利用浮动，将左边元素宽度设置为200px，并且设置向左浮动，将右边元素的margin-left设置为200px，宽度设置为auto，撑满整个父元素。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两栏布局1</title>
    <style>     
        .left {
            float: left;
            width: 200px;
            height: 100px;
            background: tomato;
        }
        
        .right {
            margin-left: 200px;
            width: auto;
            height: 100px;
            background: gold;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

1.2 浮动 + BFC

利用浮动，左侧元素设置固定大小，并且设置向左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两栏布局2</title>
    <style>
        .left {
            float: left;
            width: 100px;
            height: 200px;
            background: tomato;
        }
        
        .right {
            overflow: hidden;
            height: 200px;
            background: gold;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

1.3 flex布局

利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex: 1;。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两栏布局3</title>
    <style>
        .outer {
            display: flex;
            height: 100px;
        }
        
        .left {
            width: 200px;
            background: tomato;
        }
        
        .right {
            flex: 1;
            background: gold;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

1.4 左绝父相 + margin

利用绝对定位，将父级元素设置为相对定位。左边元素设置为绝对定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两栏布局4</title>
    <style>
        .outer {
            position: relative;
            height: 100px;
        }
        
        .left {
            position: absolute;
            width: 200px;
            height: 100px;
            background: tomato;
        }
        
        .right {
            margin-left: 200px;
            height: 100px;
            background: gold;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

1.5 右绝父相 + 方向定位

利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两栏布局5</title>
    <style>
        .outer {
            position: relative;
            height: 100px;
        }
        
        .left {
            width: 200px;
            height: 100px;
            background: tomato;
        }
        
        .right {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 200px;
            background: gold;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

2 三栏布局

三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局。

2.1 子绝父相 + margin

利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三栏布局1</title>
    <style>
        .outer {
            position: relative;
            height: 100px;
        }
        
        .left {
            position: absolute;
            width: 100px;
            height: 100px;
            background: tomato;
        }
        
        .right {
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 100px;
            background: gold;
        }
        
        .center {
            margin-left: 100px;
            margin-right: 200px;
            height: 100px;
            background: lightgreen;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>

2.2 flex布局

利用flex布局，左右两栏设置固定大小，中间一栏设置为flex: 1;。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三栏布局2</title>
    <style>
        .outer {
            display: flex;
            height: 100px;
        }
        
        .left {
            width: 100px;
            background: tomato;
        }
        
        .right {
            width: 100px;
            background: gold;
        }
        
        .center {
            flex: 1;
            background: lightgreen;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>

2.3 浮动 + margin

利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三栏布局3</title>
    <style>
        .outer {
            height: 100px;
        }
        
        .left {
            float: left;
            width: 100px;
            height: 100px;
            background: tomato;
        }
        
        .right {
            float: right;
            width: 200px;
            height: 100px;
            background: gold;
        }
        
        .center {
            height: 100px;
            margin-left: 100px;
            margin-right: 200px;
            background: lightgreen;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
</body>

</html>

2.4 圣杯布局

利用浮动和负边距来实现。父级元素设置左右的padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置margin负值将其移动到上一行，再利用相对定位，定位到两边。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三栏布局4--圣杯布局</title>
    <style>
        .outer {
            height: 100px;
            padding-left: 100px;
            padding-right: 200px;
        }
        
        .left {
            float: left;
            margin-left: -100%;
            position: relative;
            left: -100px;
            width: 100px;
            height: 100px;
            background: tomato;
        }
        
        .right {
            float: right;
            margin-left: -200px;
            position: relative;
            left: 200px;
            width: 200px;
            height: 100px;
            background: gold;
        }
        
        .center {
            float: left;
            width: 100%;
            height: 100px;
            background: lightgreen;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

2.5 双飞翼布局

双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的padding来实现的。本质上来说，也是通过浮动和外边距负值来实现的。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三栏布局5--双飞翼布局</title>
    <style>
        .outer {
            height: 100px;
        }
        
        .left {
            float: left;
            margin-left: -100%;
            width: 100px;
            height: 100px;
            background: tomato;
        }
        
        .right {
            float: left;
            margin-left: -200px;
            width: 200px;
            height: 100px;
            background: gold;
        }
        
        .wrapper {
            float: left;
            width: 100%;
            height: 100px;
            background: lightgreen;
        }
        
        .center {
            margin-left: 100px;
            margin-right: 200px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="wrapper">
            <div class="center"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

3 水平垂直居中

3.1 绝对定位 + translate

利用绝对定位，先将元素的左上角通过top: 50%;和left: 50%;定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平垂直居中1</title>
    <style>
        .parent {
            position: relative;
            width: 200px;
            height: 200px;
            background: gold;
        }
        
        .child {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            background: tomato;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

</html>

3.2 绝对定位 + margin

利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平垂直居中2</title>
    <style>
        .parent {
            position: relative;
            width: 200px;
            height: 200px;
            background: gold;
        }
        
        .child {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            background: tomato;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

</html>

3.3 绝对定位 + margin

利用绝对定位，先将元素的左上角通过top: 50%;和left: 50%;定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平垂直居中3</title>
    <style>
        .parent {
            position: relative;
            width: 200px;
            height: 200px;
            background: gold;
        }
        
        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 100px;
            margin-top: -50px;
            margin-left: -50px;
            background: tomato;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

</html>

3.4 flex布局

使用flex布局，通过align-items: center;和justify-content: center;设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平垂直居中4</title>
    <style>
        .parent {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background: gold;
        }
        
        .child {
            width: 50px;
            height: 50px;
            background: tomato;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

</html>