一次搞定面试常问的三栏布局--六种实现

最新推荐文章于 2024-01-21 13:37:53 发布
最新推荐文章于 2024-01-21 13:37:53 发布
阅读量355 收藏 2
点赞数
分类专栏： css 文章标签： css 定位 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42835377/article/details/106690245
版权

文章目录


实现左栏宽100px，右栏200px，中间自适应，高度100%

利用浮动+margin

左边左浮动，右边有浮动，中间设置高度宽度100%，然后，设置margin空出左右位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用浮动</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        #container{
            height: 100%;
            width: 100%;
           
        }
        .left{
            float: left;
            width: 100px;
            height: 100%;
            background-color: chocolate;
        }
        .right{
            float: right;
            width: 200px;
            height: 100%;
            background-color: cornflowerblue;
        }
        .center{
            height: 100%;
            width: 100%;
            margin: 0 200px 0 100px;
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">center</div>
    </div>
</body>
</html>
利用绝对定位+margin

左右设置绝对定位，并设置宽度和 距离左右边距；最后还是利用margin给左右空出位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面试题练习</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        #container{
            width: 100%;
            height: 100%;
            position: absolute;
            /* position: relative; */
        }
        .left{
            width: 100px;
            height: 100%;
            position: absolute;
            left: 0;
            background-color: aquamarine;
        }
        .right{
            width: 200px;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            background-color: cadetblue;
            margin-left: -200px;
        }
        .center{
            margin: 0 200px 0 100px;
            width: 100%;
            height: 100%;
            /* box-sizing: margin-box; */
            background-color: chocolate;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="left"></div>
        <div class="center">111111</div>
        <div class="right"></div>
    </div>
</body>
</html>
利用flex实现

在父容器上设置display:flex;这样可以在子元素上设置flex属性，左右设置flex：0 0 100px/200px，中间设置auto。
flex介绍：
CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置 flex-grow, flex-shrink 与 flex-basis。

  • flex-grow：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
  • flex-shrink：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
  • flex-basis：项目的长度。合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。
    如果根据flex设置固定长度，必须把扩展占比和收缩占比设为0。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex实现三栏布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        #container{
            display: flex;
            width: 100%;
            height: 100%;
            background-color: black;
        }
        .left{
            flex:0 0 100px;
            background-color: blueviolet;
        }
        .right{
            flex:0 0 200px;
            background-color: brown;
        }
        .center{
            flex: auto;
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
        
    </div>
</body>
</html>
圣杯布局

圣杯布局，也是利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
            width: 100%;
        }

        #container {
            padding-left: 100px;
            padding-right: 200px;
            height: 100%;

        }

        .left {
            /* position: absolute;
            float: left;
            width: 100px;
            height: 100%;
            background-color: cornflowerblue;
            left: -100px; */
            position: relative;
            left: -100px;

            float: left;
            margin-left: -100%;

            width: 100px;
            height: 100%;
            background: tomato;
        }

        .right {
            /* float: left;
            width: 200px;
            height: 100%;
            background-color: darkcyan;
            left: -200px;
            position: relative; */
            position: relative;
            left: 200px;

            float: left;
            margin-left: -200px;

            width: 200px;
            height: 100%;
            background: gold;
        }

        .center {
            /* float: left;
            width: 100%;
            height: 100%;
            padding-left: 100px;
            padding-right: 200px;
            /* margin: 0 200px 0 100px; */
            /* margin-left: 100px; */
            /*background-color: darkorange; */
            float: left;

            width: 100%;
            height: 100%;
            background: lightgreen;

        }
    </style>
</head>

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

    </div>
</body>

</html>
双飞翼布局

两种说法，都是利用margin；区别不大。

  1. 双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元
    素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的。
  2. 双飞翼布局：多了个div。思想：让left以margin-left：100%，跑到上面最左覆盖middle；right的margin-left移动200px跑到最右边；双飞翼没有留空位，所以不需要再次反向移动left与right。但需要在middle中定义一个main的div通过设置margin：0，200px，0，150px，让middle的内容显示在中间，不会被left、right覆盖。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
            width: 100%;
        }

        #container {
            padding-left: 100px;
            padding-right: 200px;
            height: 100%;

        }

        .left {
            /* position: absolute;
            float: left;
            width: 100px;
            height: 100%;
            background-color: cornflowerblue;
            left: -100px; */
            position: relative;
            left: -100px;

            float: left;
            margin-left: -100%;

            width: 100px;
            height: 100%;
            background: tomato;
        }

        .right {
            /* float: left;
            width: 200px;
            height: 100%;
            background-color: darkcyan;
            left: -200px;
            position: relative; */
            position: relative;
            left: 200px;

            float: left;
            margin-left: -200px;

            width: 200px;
            height: 100%;
            background: gold;
        }

        .center {
            /* float: left;
            width: 100%;
            height: 100%;
            padding-left: 100px;
            padding-right: 200px;
            /* margin: 0 200px 0 100px; */
            /* margin-left: 100px; */
            /*background-color: darkorange; */
            float: left;

            width: 100%;
            height: 100%;
            background: lightgreen;

        }
    </style>
</head>

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

    </div>
</body>

</html>
利用grid 网格布局

display:grid;网格布局中，和flex用法类似。其直系子元素将成为网格元素。
grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列

  • grid-template-columns: 200px 200px 200px;是创建三列布局，将网格元素依次排列。
    • 如图：在这里插入图片描述
  • fr是单位，代表网格容器中可用空间的一等份。会随着空间大小而改变。
    代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #container{
            position: absolute;
            display: grid;
            grid-template-columns: 100px 1fr 200px;
            width: 100%;
            height: 100%;
            background-color: cornflowerblue;
        }
        .top{
            width: 100px;
            height: 100%;
            background-color: coral;
        }
        .middle{
            width: 100%;
            height: 100%;
            background-color: cornflowerblue;
        }
        .bottom{
            height: 200%;
            width: 200px;
            background-color: darkgreen;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="top">top</div>
        <div class="middle">middle</div>
        <div class="bottom">bottom</div>
        
    </div>
</body>
</html>
总结

核心：三栏布局的实现，既然要实现自适应；那么中间的宽度定是100%，接下来就靠利用脱离文档流，将左栏、右栏移动到相应位置，而不影响中间的自适应的能力。

最后给个效果吧：五种效果除了颜色不一样，其他都一样。
在这里插入图片描述

杨九日
关注
专栏目录
面试题之实现上下固定、中间自适应的布局---三种实现
九日的博客
06-13 555
文章目录利用绝对定位+margin利用flex 和三栏布局不一样，float没有上下浮动，所以不能利用float进行布局；像是圣杯布局，双飞翼布局都是利用浮动+margin ，所以上下三栏布局方法就相应的少了一些。像是圣杯、双飞翼布局可参考一次搞定面试常问的三栏布局–五种实现 利用绝对定位+margin <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me
谈谈前端性能优化-面试版
loveX001的博客
10-11 431
当我们去面试的时候，很大概率会被面试官问这么一个问题：你有尝试过对项目做性能优化吗？或者你了解哪些性能优化的方法？听到这个问题的你可能是这样的：似曾相识但又说不清楚，往往只能零散地说出那么几点，难以做到有条理的回答。那么，本文就带你简单了解前端性能优化的几个主要方面，旨在抛砖引玉。请求过程中一些潜在的性能优化点：总结： 深入理解请求的过程是前端性能优化的核心。优化核心首页案例学习代码压缩就是压缩一些在文本文件中有意义，但是在中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如**注释**也
面试常问的CSS三栏布局 五种布局总结
eva_lu的博客
08-18 1068
CSS三栏布局（左右两栏固定宽度，中间自适应）
面试之页面布局（三栏布局）
weixin_38249463的博客
08-28 471
    面试技巧： 准备要充分 知识要系统 沟通要简要 回答关键点 内心要诚实 不懂就说这个我真的不了解。 态度要谦虚  回答要灵活 话别说太死，     面试问题点 页面布局 CSS盒模型  css DOM事件 HTTP协议 面向对象 原型链   js 通信   跨域和前后端通信 安全  CHRF  XSS 算法           CSS布局          样式初始化 reset.css...
面试经典：六种常用的css三栏布局方法（圣杯，双飞翼，Float，绝对定位，flex，网格布局）
qq_52340302的博客
07-30 621
三栏布局即组有定框，中间宽度自适应 1. 绝对定位+margin（左中右） 先给左右两边来个绝对定位在屏幕两侧占据固定位置，再给中间元素添加左右margin，值与左右的元素的宽相等 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0;
面试如果问你三栏布局,怎样回答可以加分?
陈坚泓的博客
08-18 4201
题目:假设高度已知,请写出三栏布局,其中左栏右栏宽度各为300px,中间栏自适应? 如果面试过程(多是一面)面试官问我们三栏布局,我们会怎么回答? 我们想回答多少种做法,回答一两种做法,只是勉强到及格线, 如果回答四五种,面试官可能就会觉得我们css基础掌握还不错 可是如果想在这道题目上加分,还得将题目延伸 a:假设我们回答出五种方法,那么这五种方法各自有什么优缺点? b:假设去掉...
前端经典面试题CSS三栏布局
weixin_34153893的博客
01-06 520
对于前端来说，布局也是必须掌握的，一个好的布局可以让页面看起来更美观。提到布局，那就不得不说CSS三栏布局。这是前端面试经常会问到的一个问题，算是基础题。所谓的三栏布局，一般是指左右两边固定中间自适应，或者是中间固定左右两边自适应。 左右两边固定中间自适应 圣杯布局 HTML结构设置新建一个父元素，包含三个子元素：left、main、r...
ym——Andorid-15k+的面试题。
陈宇明
08-07 2万+
最近才开的博客，希望大家多多关注，andorid开发也做了3年有余了，也面试很多加企业，借此机会分享一下，我们中遇到过的问题以及解决方案吧，希望能够对正在找工作的andoird程序员有一定的帮助。学完本人博客发表《ym--andorid从零开始教程》+面试题目全理解，年薪18w以上绝对没问题。 特别献上整理过的50道面试题目 1.listView的优化方式 重用conve
面试常问：rem布局，flex布局等
sdaulee的博客
06-06 926
面试常问问题
三栏布局经典面试
zhw13260525048的博客
09-21 141
解法一：浮动布局； 解法二：绝对定位布局； 解法三：flexbox弹性盒布局； 解法四：表格布局 解法五：网格布局 详细代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Layout&lt;/title&gt;
（一） 前端面试：三栏布局
qq_39025670的博客
11-05 706
文章内容参考自《前端跳槽面试必备技巧》 三栏布局算是面试中一个比较经典的问题了，本文主要讨论左中右形式的三栏布局，给出了五种实现方式，效果图如下： 具体的实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三栏布局&l...
三种方式实现：三栏布局（圣杯布局，双飞翼布局前端面试的布局问题）
rainbow_677294的博客
03-23 1288
1.float+margin效果如下：html代码如下： &lt;div class="main"&gt;im center&lt;/div&gt; &lt;div class="left"&gt;im left&lt;/div&gt; &lt;div class="right"&gt; im right&lt;/div&gt;css代码如下： *{
三栏布局（5种解决方案）
庸人方自扰，自在就好
01-09 669
代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三列布局</title> <style> *{ margin: 0; padding: 0; } .layout{ margin-top: 20px; } .layout article div{ min-he...
前端面试（CSS）中常问的几个布局
qq_21428081的博客
03-19 1296
CSS中常用的页面布局：两栏布局、三栏布局 注意：只要用到了浮动，都要考虑要让父元素包含它 1. 两栏布局 1.1 两栏固定布局 width+left width+right <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti...
【面试题解】你能用多少种方式实现两栏布局,三栏布局,圣杯布局,双飞翼布局
m0_48721669的博客
11-08 272
本系列面试题旨在学会相关知识点，从而轻松应对面试题的各种形式，本文讲解了前端常用的几种布局方式，包括 两栏布局，三栏布局，圣杯布局，双飞翼布局。 感觉有帮助的小伙伴请点赞????鼓励一下~ 两栏布局 左侧宽度固定。 右侧自适应。 浮动法 左栏做浮动。 右栏添加 margin-left 。 <style> body { background: gray; margin: 0; padding: 0; height: 100vh; } .left
面试官：如何实现三栏布局，中间自适应
最新发布
fury的博客
01-21 1203
不知道大家在上网的时候有没有发现过，有些页面左右两边的都是广告，重要内容都在中间，那么当我们如果使用这个方法来布局的时候，最先出来的是广告，那你愿意吗？不知道大家在上网的时候有没有发现过，有些页面左右两边的都是广告，重要内容都在中间，那么当我们如果使用这个方法来布局的时候，最先出来的是广告，那你愿意吗？此时的宽度继承了父容器的100%；因为已经设置了middle的width：100%，这时候我们只需要设置inner容器为padding：0 200px，我们要的效果同样是把左右两个容器摆放到对应的红框位置。
前端经典面试题之CSS实现三栏布局，左右宽度固定，中间宽度自适应
ZXH2017的博客
03-01 1万+
前端常问的面试题，题目：假设高度一定，请写出三栏布局，左右宽度300px，中间自适应。看到这里我希望你能停下来思考几分钟，1分钟~2分钟~3分钟~4分钟~5分钟！好了，那么你想出了几种答案呢？下面提供这道题的五种解决方案：首先要写好整个页面的布局（初始化等） &lt;style&gt; html * { padding: 0; ...
栅栏密码加密/解密【W型】在线工具
热门推荐
WP8HUB
04-27 5万+
栅栏密码加密/解密【W型】在线工具 栅栏密码(Rail-fence Cipher)就是把要加密的明文分成N个一组，然后把每组的第1个字符组合，每组第2个字符组合…每组的第N(最后一个分组可能不足N个)个字符组合，最后把他们全部连接起来就是密文。 本工具所使用的栅栏密码加密/解密算法为上述传统型栅栏密码加密/解密算法的变种，称为W型。 工具链接：http://www.atoolbox.net/...
CSS常见布局的几种实现方式(面试常考)
LYFlied的博客
03-13 5877
CSS常见布局的几种实现方式(面试常考)：两栏布局、三栏布局、流体布局（浮动）、BFC三栏布局、双飞翼布局、圣杯布局、flex、table布局、绝对定位布局、网格布局(Grid布局)
一步搞定u8g2-simulator仿真环境部署
资源摘要信息:"u8g2-simulator 是一个仿真软件，用于模拟u8g2库运行环境，集成了所有必需的依赖包，从而简化了开发者的安装过程。开发者无需手动安装各个依赖库，便能开始项目开发和调试。 u8g2库是一个用于多种...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值