前端页面经典布局方案总结

最新推荐文章于 2024-08-06 17:05:56 发布
最新推荐文章于 2024-08-06 17:05:56 发布
阅读量880 收藏 6
点赞数 2
分类专栏： css 页面布局 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41748671/article/details/115298446
版权
本文详细介绍了前端布局中的两种经典解决方案——圣杯布局和双飞翼布局，用于实现三列布局，两边固定宽度，中间自适应。通过HTML和CSS代码展示了两种布局的实现过程，并分析了其实现原理和关键点，强调了布局稳定性与响应式设计的重要性。此外，还提及了弹性布局、定位方式和网格布局作为实现此类布局的其他选项。
摘要由CSDN通过智能技术生成

1. 三列布局

1. 圣杯布局实现

1.1 效果图

三列布局，两边固定，中间自适应
在这里插入图片描述

1.2 实现代码

<!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>圣杯布局</title>
    <style>
        html,
        body {
            height: 100%;
            overflow: hidden;
        }

        .container {
            height: 100%;
            min-width: 200px;
            padding: 0 200px;
            background-color: gray;
        }

        .left,
        .right {
            width: 200px;
            min-height: 200px;
            background-color: lightblue;
        }

        .center {
            width: 100%;
            min-height: 400px;
            background-color: lightsalmon;
        }

        .left,
        .center,
        .right {
            float: left;
        }

        .left {
            margin-left: -100%;
            position: relative;
            left: -200px;
        }

        .right {
            margin-right: -200px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

1.3 实现分析

主要使用浮动实现

知识点：float，magin-left，margin-right，padding，position:relative

思路分析：

  1. 父容器.container设置左右内边距padding。
  2. 父容器左内边距区域、content内容区域及右内边距区域分别对应三列布局的左边列、中间列和右边列
  3. 定义三个子元素分别表示左、中和右三列，将若是按上述代码结构定义，则将第二个子元素放到父容器的左内边距区域，将最后一个子元素放到右内边距区域，中间列元素定义宽度为100%自动占满父容器content区域，使用上述代码实现方式时，一定要注意中间列要设置做小宽度min-width为左边列子元素的宽度，否则浏览器窗口变小然后容器自适应宽度跟着变小时，左边列会因为所在父容器宽度不够而换行显示，而打乱布局
  4. 相对定位position:relative不脱离文档流，虽然使用相对定位的元素使用left等属性显示到其它地方去，但它在文档流中的位置不变

关键点：一定要设置父容器的最小宽度且其值不能小于左边列的往左偏移量，具体偏移方式使用margin-left和position:relative实现。否则若父容器宽度不够，由于使用了浮动，左边列元素及其它后面的元素都会被挤到中间列元素下面，从而打乱布局

2. 双飞翼布局实现

2.1 效果图

三列布局，两边固定，中间自适应
在这里插入图片描述

2.2 实现代码

<!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>双飞翼布局</title>
    <style>
        html,
        body{
            height: 100%;
            min-width: 400px;
            overflow: scroll;
        }
        .container{
            background-color: lightgray;
            width: 100%;
            height: 100%;
        }
        .container .center{
            background-color: lightsalmon;
            margin: 0 200px;
            min-height: 400px;
        }
        .left,
        .right{
            background-color: lightskyblue;
            width: 200px;
            min-height: 200px;
        }
        .container,
        .left,
        .right{
            float: left;
        }
        .left{
            margin-left: -100%;
        }
        .right{
            margin-right: -200px;
            position: relative;
            right: 200px;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="center">center</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>
</html>

2.3 实现分析

主要使用浮动实现

知识点：float，magin-left，margin-right，margin，position:relative

思路：和圣杯布局思路差不多，都主要使用了浮动，只是html 标签结构有些许区别，再有就是圣杯使用内边距padding，双飞翼使用外边距margin

关键点：需要给外层父容器设置最小宽度min-width为左右外边距的和（即左边列和右边列宽度和），否则左边列在宽度不够时依然会换行显示，打乱布局

3. 弹性布局方式实现

Flex 布局教程：语法篇 阮一峰老师

3.1 效果图

三列布局，两边固定，中间自适应
在这里插入图片描述

3.2 实现代码

<!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>弹性布局实现</title>
    <style>
        html,
        body{
            height: 100%;
            overflow: scroll;
        }
        .container{
            width: 100%;
            height: 100%;
            background-color: lightgray;
            display: flex;
            justify-content: space-between;
        }
        .left,
        .right{
            flex: 0 0 200px;
        }
        .left{
            background-color: lightgreen;
            
        }
        .center{
            background-color: lightsalmon;
            width: 100%;
            min-height: 400px;
        }
        .right{
            background-color: lightseagreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
</body>
</html>

3.3 实现分析

主要使用弹性布局方式实现

知识点：display:flex，flex:0 0 200px

思路：

  1. 项目对齐方式justify-content: space-between
  2. 左右两列使用flex: 0 0 200px 来固定位置
  3. 中间列宽度100%

关键点：需要给外层父容器设置最小宽度min-width为左右外边距的和（即左边列和右边列宽度和），否则左边列在宽度不够时依然会换行显示，打乱布局

4. 定位方式实现

4.1 效果图

三列布局，两边固定，中间自适应
在这里插入图片描述

4.2 实现代码

<!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>弹性布局实现</title>
    <style>
        html,
        body{
            height: 100%;
            overflow: scroll;
        }
        .container{
        	height: 100%;
            background-color: lightslategray;
            position: relative;
        }
        .left,
        .right{
            width: 200px;
            min-height: 200px;
            position: absolute;
        }
        .left{
            background-color: lightsteelblue;
            left: 0;
            top: 0;
        }
        .center{
            background-color: lightcyan;
            margin: 0 200px;
            min-height: 400px;
            
        }
        .right{
            background-color: lightblue;
            right: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
</body>
</html>

4.3 实现分析

主要使用绝对定位方式实现

知识点：position

思路：左右两列的区域为中间列的左右外边距margin: 0 200px

5. 网格布局方式实现

CSS Grid 网格布局教程

5.1 效果图

在这里插入图片描述

5.2 实现代码

<!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>网格布局实现</title>
    <style>
        html,
        body{
            height: 100%;
            overflow: scroll;
        }
        .container{
            background-color: lightcyan;
            height: 100%;
            display: grid;
            grid-template-rows: 400px;
            grid-template-columns: 200px auto 200px;
        }
        .left{
            background-color: lightgreen;
        }
        .center{
            background-color: lightsalmon;
        }
        .right{
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
</body>
</html>

5.3 实现分析

网格布局（Grid）是最强大的 CSS 布局方案。

LVMSF
关注
专栏目录
总结了42 种前端常用布局方案（超全）前端必备
自救 唯有自强
06-04 2427
本篇文章总结了四十二种CSS的常见布局，这四十二种布局可以细分为如下几类：实现水平布局比较简单，方法也比较多，这里总结了7种常用的布局方法，其公共的CSS代码如下所示： 其 HTML 结构也是固定的，就是一个父级，其宽度继承了 的宽度，还有一个子级，这里是固定的300px*300px，代码如下： 最终的实现效果如下： 上图中玫瑰色的块是父级，随页面宽度增加的；淡紫色是子级，相对于父级居中的。若元素为行内块级元素，也就是 display: inline-block 的元素，可以通过为其父元素设置t ext
前端面试必备总结：页面布局5种解决方案
tomorrownan的博客
07-12 1958
在一面或者二面中，页面布局是经常问到的点，昨天在慕课网听了老师讲的课，今天自己敲下代码整理下。主要解答三栏布局下面两题目，两栏布局与三栏布局相似。 1.高度已知，左右宽度固定，使中间自适应。 2.上下高度固定，使中间自适应 1.左右宽度固定，中间自适应 float解决方案 css实现： html *{ padding: 0px; margin: 0px; } .box div{ min-...
分享 11 张超好看的前端界面 【建议收藏】
热门推荐
Thunder Wang的博客
07-27 1万+
哈喽大家好呀，我是Thunder，今天给大家带来了11张我觉得不论从视觉效果还是页面布局的维度都特别好看的11个pc偏管理端的界面，希望大家可以在平时开发没有灵感时用来做参考。
32套经典前端网页模板
11-01
个人搜集的一些比较大气的网页模板，基本上都是整站模板，而不是单个页面的。包括前台的、后台管理的都有。代码结构非常清晰，不管是用于学习，还是实际项目都非常具有参考和借鉴意义。甚至可以在原来模板的基础上经过简单修改即可成为自己的东西 。
前端 页面布局
最新发布
m0_75209145的博客
08-06 863
前端-页面布局
前端布局
weixin_34343000的博客
05-08 182
前端布局 一、静态布局 静态布局就是传统的网站形式，网页上的所有元素的尺寸一律使用px作为单位。 1.布局特点 不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。 代码如下： 浮动方面经常出现的问题: 上下...
前端开发---页面布局解决方案1
笺赕
04-12 294
1、水平布局 .parent与.child元素宽度和高度不给出 1、默认情况下 <div class="parent"> <div class="child">Children</div> </div> 2、inline-block +text-align情况下 .parent{text-align: center;} .ch...
关于html前端页面布局
weixin_34061482的博客
08-09 116
上传了一个附件，其中margin是跟边界之间的距离定义，padding是内容同boder之间的距离 盒宽=(margin-left)+(border-left)+(padding-left)+width+(border-right)+(padding-right)+(margin-right);盒高同理 转载于:https://blog.51cto.com/wyd...
前端网页的设计
qq_61141142的博客
09-18 1403
现如今，数以万计的网站以网页的方式提供了丰富、精彩的信息。在人类社会进入信息时代的时候，在网络成为通信的主要手段的时候，在计算机网络普及的今天，网页也在它自己的岗位上做出了突出的贡献。网站是未来企业开展电子商务的基础设施和信息平台，它是“知识经济”的制高点，企业的网址犹如企业的商标和品牌一样，是反映企业形象和文化的巨大的无形资产。矢量图的品质为100，保证了影片图像的质量，并且声音的输出格式为mp3采样标准为128Kbps双声道立体声，该标准接近CD标准，这样虽然增加了影片的大小，但是保证了声音的效果。
vuejs前端页面开发总结共7页.pdf.zip
10-29
综上所述，"vuejs前端页面开发总结共7页.pdf.zip"的内容可能涵盖了Vue.js的基本概念、核心特性、最佳实践以及常见问题的解决方案。学习并熟练掌握这些知识，将有助于开发者高效地构建现代前端应用。
web前端开发中常见的多列布局解决方案整理(一定要看)
11-29
在Web前端开发中，多列布局是构建复杂网页结构的关键技术，它允许页面根据需要展示多个分类的内容。本文主要探讨了三种常见的多列布局解决方案：两列定宽加一列自适应、多列不定宽加一列自适应以及多列等分布局。 ...
完全免费的前端布局设计UI插件(带完整的实例，Demo页，Api文档)
12-22
完全免费的前端布局设计UI插件，LigerUI, 带完整的实例，Demo功能演示，以及Api文档等等。
前端常见的几种布局方式
wding914的博客
08-18 5528
页面布局
【收藏】总结了42种前端常用布局方案
Sharon0408的博客
04-13 511
作者：一碗周 原文链接：建议收藏！总结了42种前端常用布局方案 - 掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 对CSS布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新，实现各种布局的方式已经多得数不胜数了。 本篇文章总结了四十二种CSS的常见布局，这四十二种布局可以细分为如下几类： 水平居中 垂直居中 水平垂直居中 两列布局 三列布局 等分布局 Sticky Footer布局 全屏布局 这些内容也正是本篇文章的目录。 ..
页面布局解决方案
漫天随飞雪的博客
03-24 345
页面布局：1：浮动解决方案；2：绝对定位解决方案；3：flexbox解决方案；4：表格布局解决方案；5：网格布局解决方案
前端常见的十种布局
sdasdas12的博客
07-03 4563
前端布局有很多种，各式各样，每个都有它自己适合的应用场景，并不是说主流或者常用好的就是最好的，视情况而定，个人用的比较多的是 flex 布局🤭。常用前端布局基本就是这几个啦，若有不同或者错误请评论留言指出，多谢！！幼儿园技术家。
Android页面布局理解
GSL_566的博客
10-29 108
Android页面布局分为四个：线性布局，框架布局，相对布局，绝对布局线性布局根据LinearLayout控件（标签）设置出线性效果&lt;LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center_vertical...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值