投稿
  1. 极客之音首页
  2. 前端开发

css的经典布局：行布局、列布局、两栏布局6种方法、三栏布局6种方法

小半 • • 前端开发 • 阅读 226

导读：本篇文章讲解 css的经典布局：行布局、列布局、两栏布局6种方法、三栏布局6种方法，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

一、行布局

经典的行布局，页面结构是头、主体内容、尾一行行排列。常应用于网站的首页。

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .header,
        .main,
        .footer {
            /*居中*/
            margin: 0 auto;
            /*宽度自适应*/
            width: 80%;
            min-width: 1200px;
            text-align: center;
            color: #fff;
        }

        .header {
            position: fixed;
            /*头部固定*/
            right: 0;
            left: 0;
            height: 60px;
            line-height: 60px;
            background-color: rgb(185, 143, 224);
            z-index: 1;
        }

        .main {
            position: relative;
            top: 60px;
            padding-top: 60px;
            height: 600px;
            line-height: 600px;
            background-color: rgb(210, 155, 185);
        }

        .footer {
            position: relative;
            height: 100px;
            line-height: 100px;
            background-color: rgb(151, 201, 184);
        }
    </style>
</head>

<body>
    <header class="header">Header</header>
    <main class="main">Main</main>
    <footer class="footer">Footer</footer>
</body>

</html>
<script>

</script>

当鼠标往下滑的时候，header固定

在这里插入图片描述

在这里插入图片描述

二、列布局

经典的列布局，页面结构按列划分排列

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .left,
        .main,
        .right {
            text-align: center;
        }

        .left {
            float: left;
            width: 20%;
            height: 500px;
            background-color: aquamarine;
        }

        .main {
            float: left;
            width: 60%;
            height: 500px;
            background-color: blueviolet;
        }

        .right {
            float: right;
            width: 20%;
            height: 500px;
            background-color: pink;
        }
    </style>
</head>

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

</html>
<script>

</script>

在这里插入图片描述

三、两栏布局

（1）浮动实现
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer {
            height: 100px;
            text-align: center;
        }

        .left {
            /*左边宽度200px，设置浮动*/
            float: left;
            height: 100px;
            width: 200px;
            background-color: aquamarine;
        }

        .right {
            height: 100px;
            width: auto;
            margin-left: 200px;
            /*右边margin-left设置200px，宽度auto，默认占满整个父元素*/
            background-color: blueviolet;
        }
    </style>
</head>

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

</html>
<script>
</script>

在这里插入图片描述

（2）flex实现
  • 方法一
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer {
            display: flex;
            height: 100px;
            text-align: center;
        }

        .left {
            flex-shrink: 0;
            /*定义项目缩放比例*/
            flex-grow: 0;
            /*如果存在剩余空间，也不放大*/
            flex-basis: 200px;
            /*定义了在分配多余空间之前，项目占据的主轴空间*/
            background-color: aquamarine;
        }
/**
**左边元素的放大和缩小设置为0，基础大小为200px。右边元素的放大和缩小比例设置为1，基础大小为auto
**/
        .right {
            flex: auto;
            background-color: blueviolet;
        }
    </style>
</head>

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

</html>
<script>
</script>

在这里插入图片描述

  • 方法二
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer {
            display: flex;
            height: 100px;
            text-align: center;
        }

        .left {
            background-color: aquamarine;
            width: 200px;
        }

        .right {
            flex: 1;
            background-color: blueviolet;
        }
    </style>
</head>

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

</html>
<script>
</script>

在这里插入图片描述

（3）绝对定位实现
  • 方法一
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer {
            position: relative;
            text-align: center;
            /*父元素相对定位*/
            height: 100px;
        }

        .left {
            position: absolute;
            /*左边元素相对定位*/
            width: 200px;
            /*宽度设置200px*/
            height: 100px;
            background-color: aquamarine;
        }

        .right {
            margin-left: 200px;
            /*右边元素margin-left值200px*/
            height: 100px;
            background-color: blueviolet;
        }
    </style>
</head>

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

</html>
<script>
</script>

在这里插入图片描述

  • 方法二
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer {
            position: relative;
            text-align: center;
            /*父元素相对定位*/
            height: 100px;
        }

        .left {
            width: 200px;
            height: 100px;
            background-color: aquamarine;
        }

        .right {
            /*右边元素绝对定位*/
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 200px;
            /*左边定位200px 其余为0*/
            background-color: blueviolet;
        }
    </style>
</head>

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

</html>
<script>
</script>

在这里插入图片描述

（4）table布局实现
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer {
            display: table;
            width: 1200px;
            text-align: center;
        }

        .left {
            display: table-cell;
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }

        .right {
            display: table-cell;
            height: 200px;
            background-color: blueviolet;
        }
    </style>
</head>

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

</html>
<script>
</script>

在这里插入图片描述

四、三栏布局

（1）浮动实现
  • 方法一

容易踩坑的代码

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

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer {
            text-align: center;
        }

        .outer>div {
            min-height: 100px;
        }

        .left {
            float: left;
            width: 100px;
            background-color: aquamarine;
        }

        .middle {
            background-color: blueviolet;
        }

        .right {
            float: right;
            width: 100px;
            background-color: pink;
        }
    </style>
</head>

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

</html>
<script>
</script>

在这里插入图片描述

解析：right被顶下去下一行，为什么呢？这种布局方式是利用浮动脱离文档流实现，按照正常的逻辑left、middle、right布局，中间元素形成定位，right顶下去，无法实现三栏布局。需要特别注意！left和right都需要在middle前布局。

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

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer {
            text-align: center;
        }

        .outer>div {
            min-height: 100px;
        }

        .left {
            float: left;
            width: 100px;
            background-color: aquamarine;
        }

        .middle {
            background-color: blueviolet;
        }

        .right {
            float: right;
            width: 100px;
            background-color: pink;
        }
    </style>
</head>

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

</html>
<script>
</script>

在这里插入图片描述

  • 方法二
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer>div {
            min-height: 100px;
            text-align: center;
            position: relative;
        }

        .left {
            float: left;
            width: 300px;
            background-color: aquamarine;
            z-index: 9999;
        }

        .middle {
            float: left;
            width: 300px;
            margin-left: -300px;
            padding: 0 300px;
            background-color: blueviolet;
        }

        .right {
            float: left;
            width: 300px;
            margin-left: -300px;
            background-color: pink;
            z-index: 1;
        }
    </style>
</head>

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

</html>
<script>
</script>

在这里插入图片描述

（2）绝对定位实现
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer {
            position: relative;
            text-align: center;
        }

        .outer>div {
            min-height: 100px;
            position: absolute;
        }

        .left {
            left: 0px;
            width: 100px;
            background-color: aquamarine;
        }

        .middle {
            left: 100px;
            right: 100px;
            background-color: blueviolet;
        }

        .right {
            right: 0;
            width: 100px;
            background-color: pink;
        }
    </style>
</head>

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

</html>
<script>
</script>

在这里插入图片描述

（3）flex实现
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer {
            display: flex;
            text-align: center;
        }

        .outer>div {
            min-height: 100px;
        }

        .left {
            width: 100px;
            background-color: aquamarine;
        }

        .middle {
            flex: 1;
            background-color: blueviolet;
        }

        .right {
            width: 100px;
            background-color: pink;
        }
    </style>
</head>

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

</html>
<script>
</script>

在这里插入图片描述

（4）table实现
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer {
            display: table;
            width: 100%;
            min-height: 100px;
            text-align: center;
        }

        .outer>div {
            display: table-cell;
        }

        .left {
            width: 100px;
            background-color: aquamarine;
        }

        .middle {
            background-color: blueviolet;
        }

        .right {
            width: 100px;
            background-color: pink;
        }
    </style>
</head>

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

</html>
<script>
</script>

在这里插入图片描述

（5）grid实现
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer {
            display: grid;
            text-align: center;
            grid-template-columns: 100px 1fr 100px;
        }

        .outer>div {
            min-height: 100px;
        }

        .left {
            background-color: aquamarine;
        }

        .middle {
            background-color: blueviolet;
        }

        .right {
            background-color: pink;
        }
    </style>
</head>

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

</html>
<script>
</script>

在这里插入图片描述

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/16129.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！