css常见布局（面试要问的哦）

材女的进击

已于 2023-06-12 15:30:27 修改

阅读量66

点赞数

分类专栏： CSS 文章标签： css 前端

于 2023-05-24 15:47:05 首次发布

本文链接：https://blog.csdn.net/weixin_39987434/article/details/130848602

版权

CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

该文展示了如何使用CSS的flex布局和浮动布局来创建两栏和三栏的网页结构。在两栏布局中，左侧栏固定宽度，右侧栏自适应；在三栏布局中，左右两侧栏固定，中间栏自适应。flex布局提供了更现代且灵活的解决方案，而浮动布局是传统方法，适用于不支持flex的老式浏览器。

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

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

flex布局

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
        /* 两栏布局通过flex实现 */
        .parent{
            display: flex;
            height: 200px;
            background-color: aliceblue;
        }
        .left{
            width: 200px;
            background-color: brown;
        }
        .right{
            flex:1;
            background-color: aquamarine;
        }
        
    </style>
    </head>
    <body>
        <div class="parent">
            <div class="left"></div>
            <div class="right"></div>
        </div>

   </body>
</html>

浮动布局

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
        /* 两栏布局通过浮动实现 */
        .left{
            float: left;
            width: 200px;
            background-color: blue;
        }
        .right{
            width: 100%;
            background-color: blueviolet;
        }
        div{
            height: 200px;
        }
    </style>
    </head>
    <body>
        <div class="left"></div>
        <div class="right"></div>
    </body>
</html>

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

flex 布局

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
        /* 三栏布局通过flex实现 */
        .container{
            display: flex;
            height: 200px;
            width: 100%;
        }
        .left{
            width: 200px;
            background-color: antiquewhite;
        }
        .right{
            width: 200px;
            background-color: cadetblue;
        }
        .center{
            flex: auto;
            background-color: chocolate;
        }
    </style>
    </head>
    <body>
        <!-- 三栏布局：左右固定，中间自适应 -->
        <div class="container">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
    </body>
</html>

浮动布局

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>

        /* 三栏布局通过浮动实现 */
        div {
            height: 200px;
        }
        .left{
            float: left;
            width: 200px;
            background-color: cornflowerblue;
        }
        .right{
            float: right;
            width: 200px;
            background-color: bisque;
        }
        .center{
            /* margin: 0 200px; 设置margin 和overflow都可以*/ 
            overflow: hidden;
            background-color: black;
        }
    </style>
    </head>
    <body>
        <div class="left"></div>
        <div class="right"></div>
        <!-- 中心布局必须在最后加载 -->
        <div class="center"></div>
    </body>
</html>