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

最新推荐文章于 2024-07-28 13:07:38 发布
最新推荐文章于 2024-07-28 13:07:38 发布
阅读量4.8k 收藏 40
点赞数 3
分类专栏： 前端css 文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45709829/article/details/124053889
版权
一、行布局

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

在这里插入图片描述

<!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>

在这里插入图片描述

傲娇味的草莓
关注
  • 3
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css经典全布局
weixin_44667463的博客
02-20 1567
css经典超全布局
CSS 三栏等高布局实现方法
09-25
实现三栏等高布局需要使用 XHTML 和 CSS 两种技术。我们可以使用 float 属性来让三个栏目浮动在一起，并且使用 padding-bottom 和 margin-bottom 属性来实现等高布局。最后，我们可以使用 position: relative; 属性...
CSS 一行三列布局，可换行（含grid网格布局、flex弹性布局/inline-block布局 + 伪类选择器）
m0_48968874的博客
01-15 2539
注：inline-block 可替换成 inline-grid / inline-table / inline-flex(inline-flex额外加上justify-content: space-around / space-evenly)
CSS布局汇总
最新发布
茴香馅饺子~的博客
07-28 494
CSS样式布局汇总
CSS 布局经典问题初步整理
weixin_34132768的博客
05-18 256
CSS 布局经典问题初步整理 标签 ： 前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Flexbox 布局，等等。 CSS 基础知识 下面几个入门教程不错： 幕课网 - HTML+CSS基础课程：偏基础，可以在...
CSS 布局:40个教程、技巧、例子和最佳实践
weixin_33712881的博客
05-03 168
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS 经典布局
weixin_45888412的博客
05-31 278
CSS 经典布局 一、空间居中布局 空间居中布局指的是，不管容器的大小，项目总是占据中心点。 .container { display: grid; place-items: center; } 上面代码需要写在容器上，指定为 Grid 布局。核心代码是place-items属性那一行，它是一个简写形式。 place-items: <align-items> <justify-items>; align-items属性控制垂直位置，justify-ite
CSS经典布局
Ms.杨
11-18 399
css经典布局一、圣杯布局1. flex弹性布局2. 绝对定位3. float浮动布局二、双飞翼布局三、table布局四、calc 一、圣杯布局 1. flex弹性布局 ①父盒子设置flex布局 ②左右盒子flex属性的拓展和收缩比例为0、1，基准值为内容宽度 ③中间盒子flex为1，内容占满剩余空间 <div class="parent"> <div class="left side-background">left</div> &l
CSS实现三栏布局的四种方法示例
09-24
可能有人不理解三栏布局是什么，其实三栏布局页面分为左中右三部分，然后对中间一部分做自适应的一种布局方式，下面这篇文章就给大家详细介绍了CSS实现三栏布局的四种方法，需要的朋友可以参考借鉴，下面来一起看看...
css实现三栏布局的几种方法及优缺点
12-13
三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。 我们不妨假定这样一个布局：高度已知，其中左栏、右栏宽度各为...
40个经典DIV+CSS 网页布局样式
06-04
c#网站布局DIV+CSS资源描叙可以清晰知道网站布局系统
CSS经典的布局
weixin_45608986的博客
07-25 349
好的布局能适合浏览的方式将图片和文字排放在页面的不同位置， 布局由多种，不同的设计方式会按照不同的布局。 1.行布局 基础的行布局 行布局自适应 width:100%; 行布局自适应限制最大宽 max-width:800px; 行布局垂直水平居中 margin:0 auto; .container{ width: 800px; height: 200px; background-color: cadetblue; .
css经典布局
weixin_42405477的博客
09-20 504
css经典三栏布局、圣杯布局、双飞翼布局、flex布局
CSS 经典布局（两栏布局 + 三栏布局 + 圣杯布局 + 双飞翼布局）
qq_43477721的博客
11-17 576
两栏布局（左列定宽, 右列自适应） DOM结构 <div class="box"> <div class="box-left"></div> <div class="box-right"></div> </div> float + margin .box { height: 200px; } .box > div { height: 100%; } .box-left { width: 200px; .
css利用margin外部尺寸实现等高布局经典案例
一只京大的博客
03-08 489
我们可能会有一个这样的需求：     两个板块并排排列，分别有内容，当任意一个内容增加总的高度也增加 如图所示： 我们正常的块状标签排列时候是这样的： 通过属性margin设置后： 下面直接上代码： html部分： &lt;div class="wrap"&gt; &lt;div class="left"&gt; &lt;h1&gt;内容1&lt;/h1&gt; ...
7个带有示例的CSS网格布局实例
web前端开发
05-11 1128
英文 |https://betterprogramming.pub/top-7-css-grid-layout-concepts-with-examples-18c85e4d0b27翻译...
浅谈css经典布局
Fuyonghui123的博客
11-26 305
最近温习css 经典布局 三部分 上下中 header footer height: 30px;  background:#fff; container 一个大 的div 包含两个小的div mainBox 和 sidebox 左右漂浮 定位 下面上传本次试验成果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

傲娇味的草莓

佛系少女只是想记录学习痕迹

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值