CSS常见布局的几种实现方式(面试常考)

最新推荐文章于 2024-10-01 15:25:46 发布

LYFlied

最新推荐文章于 2024-10-01 15:25:46 发布

阅读量5.8k

点赞数 7

分类专栏： css 文章标签： css 面试定位前端 css3

本文链接：https://blog.csdn.net/qq_39903567/article/details/114751532

版权

本文详述了面试中常见的CSS布局实现方式，包括两栏布局（浮动、定位、flex实现）和三栏布局（流体布局、BFC、双飞翼、圣杯、flex、table、绝对定位、Grid布局）。重点介绍了各种布局的优缺点，如flex布局的灵活性，以及Grid布局的精确控制。总结中推荐使用flex布局。

摘要由CSDN通过智能技术生成

本文将介绍面试中常考的一些CSS布局：

两栏布局(左边固定右边自适应)
三栏布局(左右固定中间自适应)
- 流体布局（浮动）
- BFC三栏布局
- 双飞翼布局
- 圣杯布局
- flex
- table布局
- 绝对定位布局
- 网格布局(Grid布局)

一、两栏布局

左边固定，右边自适应

1.通过设置浮动实现。

需要两个div实现，一个div设置浮动，并设置宽度，另一个div可以不用设置任何东西

如果要给右边块设置什么的话下面两种方法也行：

left左浮动并设置宽度right设置margin-left为left的宽度也能实现
left设置左浮动并和宽度right，right设置over-flow:hidden也能实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两栏布局——float</title>
    <style>
            div{
                    height:300px;
            }
            .left{
                    width:200px;
                    background-color:gray;
                    float:left;
            }
            .main{
                    background-color:pink;
                    /* margin-left:200px; */
                    /* 或者overflow:hidden; */
            }
    </style>
</head>
<body>
    <div class = 'left'></div>
    <div class = 'main'></div>
</body>
</html>

2. 通过相对定位和绝对定位实现。

需要三个div，其中一个div是父容器，包含两个子元素。
两个子元素设置相对定位，给上边的子元素设置宽度，下边的子元素设置left,值为上边子元素的宽度，再设置right:0。
给父容器设置相对定位是因为可以让其设置绝对定位的子元素相对它进行移动；给上边的子元素设置绝对定位可以让下边的子元素跟它在同一行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两栏布局——absolue</title>
    <style>
            .outer{
                    position:relative;
                    height:300px;
            }
            .left{
                    position:absolute;
                    width:300px;
                    background-color:blue;
                    height:100%;
            }
            .main{
                    background-color:yellow;
                    position:absolute;
                    left:300px;
                    right:0;
                    height:100%;