【前端面试之CSS】元素水平垂直居中以及两栏、三栏布局

阿卡内

已于 2022-09-17 21:58:18 修改

阅读量320

点赞数

分类专栏： CSS系列知识点文章标签： css 前端 css3

于 2022-08-02 21:49:53 首次发布

本文链接：https://blog.csdn.net/qq_40695234/article/details/126129568

版权

CSS系列知识点专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

元素水平垂直居中
两栏布局
三栏布局
- 1、使用绝对定位，
- 2、flex实现（最简单）

元素水平垂直居中

1、利用定位+margin:auto

此时四个定位属性都设置了0，那么这个时候如果子级没有设置宽高，则会被拉开到父级一样宽高。

<style>
 .father {
            width: 500px;
            height: 300px;
            border: 1px solid #0a3b98;
            position: relative;
        }

        .son {
            width: 100px;
            height: 40px;
            background: #f0a238;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
</style>

在这里插入图片描述

2、利用定位+margin负值

这个方法不要求父元素的高度，但是必须知道子元素的自身高度。因为需要用到margin-left想左移动自身宽度的一半，高度也是，才能达到中心位置。

<style>
    .father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left:-50px;
        margin-top:-50px;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>

在这里插入图片描述

3、利用定位+transform

这个方法要优于上一个方法，因为不用知道自身的宽高

<style>
.father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 100px;
        height: 100px;
        background: red;
    }
</style>

在这里插入图片描述

4、flex弹性布局

flex默认是水平布局，即justify-content是垂直方向居中
align-item：是水平方向居中

<style>
    .father {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        width: 100px;
        height: 100px;
        background: red;
    }
   </style>

在这里插入图片描述

两栏布局

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

1、利用浮动+margin-left。

利用浮动，将左边元素设置为200px，右栏向右位移左栏的宽度

<style>
    /* 方法一 */
    .parent {
        height: 200px;
    }

    .left {
        float: left;
        width: 200px;
        height: 100%;
        background-color: rgb(93, 130, 161);
    }

    .right {
        margin-left: 200px;
        width: auto;
        height: 100%;
        background-color: rgb(204, 104, 196);
    }
</style>

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

在这里插入图片描述
注意：

子元素的高度一定要有，不设置的话，元素是不会显示的。

2、左栏浮动，右栏开启BFC

<style>
.parent {
        height: 200px;
    }

    .left {
        float: left;
        width: 200px;
        height: 100%;
        background-color: rgb(103, 131, 155);
    }

    .right {
        width: auto;
        overflow: hidden;
        height: 100%;
        background-color: rgb(101, 170, 112);
    }
</style>

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

跟上面一个也是同样的问题，在适当情况下需要开启BFC

3、flex布局，

左栏固定高度，右栏：flex:1（最简单）

flex: 1；自动填充满剩余空间

<style>
    .box{
        display: flex;
    }
    .left {
        width: 100px;
    }
    .right {
        flex: 1;
    }
</style>

三栏布局

1、使用绝对定位，

左右两栏设置为绝对定位，将左栏移到最左边，右栏移到最右边，中间设置为对应方向大小的margin值。

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

 .son {
     position: absolute;
     width: 100px;
     height: 100px;
     background: tomato;
 }

 .border {
     position: absolute;
     top: 0;
     right: 0;
     width: 200px;
     height: 100px;
     background: gold;
 }

 .daught {
     margin-left: 100px;
     margin-right: 200px;
     height: 100px;
     background: lightgreen;
 }
</style>
<div class="father">
    <div class="son"></div>
    <div class="daught"></div>
    <div class="border"></div>
</div>

在这里插入图片描述

2、flex实现（最简单）

利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1。因为flex布局默认的就是水平横向布局，左右两边确认大小了，中间直接自适应就好了。

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

 .son {
     width: 100px;
     background: tomato;
 }

 .border {
     width: 100px;
     background: gold;
 }

 .daught {
     flex: 1;
     background: lightgreen;
 }
</style>