css圣杯布局和双飞翼布局(前端面试重点)

最新推荐文章于 2022-10-09 00:30:55 发布
最新推荐文章于 2022-10-09 00:30:55 发布
阅读量439 收藏 7
点赞数 2
分类专栏： 前端 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/are_gh/article/details/111396533
版权

css圣杯布局和双飞翼布局(前端面试重点)

1.圣杯布局：左右固定，中间自适应(中间先解析)

原理：1.大盒子里面有三个小盒子，左右两边盒子固定，中间的盒子宽度为100%，中间一定要先解析，放在最上面。

           2.三个小盒子加浮动，左侧小盒子设置margin-left:-100%; 右侧小盒子设置margin-left:-自身宽度

           3.大盒子设置左右的padding，左右两个小盒子用相对定位定位到两侧位置

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        /* 清除浮动 */
        
        .clearfix:after {
            display: block;
            clear: both;
            content: '';
        }
        
        .wrap {
            padding: 0 200px 0 300px;
        }
        
        .center {
            float: left;
            width: 100%;
            height: 200px;
            background-color: gold;
        }
        
        .left {
            position: relative;
            float: left;
            width: 300px;
            height: 200px;
            background-color: red;
            margin-left: -100%;
            left: -300px;
        }
        
        .right {
            position: relative;
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-left: -200px;
            right: -200px;
        }
    </style>
</head>

<body>
    <div class="wrap clearfix">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

</html>

2.双飞翼布局：左右固定，中间自适应(中间先解析)

原理：1.大盒子里面有三个小盒子，左右两边盒子固定，中间的盒子宽度为100%，中间一定要先解析，放在最上面。

           2.三个小盒子加浮动，左侧小盒子设置margin-left:-100%; 右侧小盒子设置margin-left:-自身宽度

           3.中间内部嵌套一个子盒子，加左右外边距，

缺点：相对于圣杯布局。增加了结构代码。

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        .clearfix:after {
            display: block;
            clear: both;
            content: '';
        }
        
        .center {
            float: left;
            width: 100%;
            height: 200px;
            background-color: gold;
        }
        
        .left {
            float: left;
            width: 300px;
            height: 200px;
            background-color: red;
            margin-left: -100%;
        }
        
        .right {
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-left: -200px;
        }
        
        .zi {
            margin: 0 200px 0 300px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="center">
            <div class="zi">1</div>
        </div>
        <div class="left">2</div>
        <div class="right">3</div>
    </div>
</body>

</html>

 

 

 

 

 

 

 

苦瓜式的幽默
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
圣杯布局和双飞翼布局解析.docx
03-17
圣杯布局和双飞翼布局 （典型的面试题：加载逻辑） 两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，中间部分在DOM结构上优先，以便先行渲染。（核心目的：先解析中间栏，展示当前页面的...
CSS自适应布局
toumingyumaohuiyi的博客
02-23 328
什么是布局，其实就是用定位和尺寸相关的属性来完成布局，布局会用到的有：普通流、浮动、绝对定位三种定位机制，CSS3中的transform、flex等 先来说float浮动，现在比较多的网站都在用这种 浮动布局： 我们都知道float让元素脱离了普通流，然后使用width/height，margin/padding将元素定位，从别处盗了图，索然盗图可耻 看是不是浮动已经脱离了普通流了
HTML第二十一天
wqx945的博客
10-09 51
等高布局方法一等高布局方法2。
面试题系列 —— 6 两栏布局、圣杯布局、双飞翼布局
qq_46030564的博客
05-04 186
对两栏布局、圣杯布局、双飞翼布局的实现和相关讲解
圣杯布局和双飞翼布局详解
howbeauty的博客
08-16 1053
圣杯布局和双翼布局
几种常见的CSS布局-- 双飞翼布局
LuckXinXin的博客
02-05 467
双飞翼布局：对圣杯布局（使用相对定位，对以后布局有局限性）的改进，消除相对定位布局 原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位。 .container { /*padding-left:150px;*/ /*padding-right:190px;*/ } .main-wrap { width: 100%; float: left; } .main { margin-left: 150px; margin-rig.
CSS布局之圣杯布局与双飞翼布局
09-24
圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。接下来通过本文教程给大家介绍CSS布局之圣杯布局与双飞翼布局，感兴趣的朋友一起学习吧
浅谈css双飞翼布局和圣杯布局
01-19
双飞翼布局和圣杯布局都是实现两边固定中间自适应的三栏布局的方式，最近在整理三栏布局实现方式的笔记，决定但拉出来一篇，记一下这两个经典布局。 1、圣杯布局 浮动、负边距、相对定位、不添加额外标签 效果图 ...
前端面试题：双飞翼布局跟圣杯布局
sdasadasds的博客
09-16 291
前端面试题：双飞翼布局跟圣杯布局，下面一起来看看吧。
前端经典圣杯布局和双飞翼布局
这里是前端，是不一样的前端
09-22 1571
介绍 圣杯布局和双飞翼布局解决的问题是一样的 就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。 圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。 区别 不同在于解决”中间栏div内容不被遮挡“问题的思路不一样： 圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relati
圣杯布局和双飞翼布局
honeydragon's博客
01-05 243
简述圣杯布局和双飞翼布局 圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。 两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。 圣杯布局和双飞翼布局共同点 虽然两者的实现方法略有差异，不过都遵循了以下要点： 两侧宽度固定，中间宽度自适应 中间部分在 DOM 结构上优先，以便先行渲染 允许三列中的任意一列成为最高列 只需要使用一个额外的标签 圣...
前端常用的两种布局方式：圣杯布局和双飞翼布局
st521314mt的博客
06-19 581
圣杯布局和双飞翼布局： 两者实现的功能都一样，都是用于实现两侧的宽度不变，中间的宽度自适应的三栏布局 注意点：浮动的元素不会撑起父元素。 一、圣杯布局 圣杯布局的步骤： 2.1搞一个容器，里面放三个盒子 2.2设置两侧盒子的宽度（固定） 2.3设置中间盒子的宽度等于容器的宽度100% 2.4设置容器的padding等于两侧盒子的宽度 2.5设置三个盒子都在同一个方向浮动 2.6设置...
114、美团CSS题---双飞翼布局和圣杯布局
sunnnnh的博客
10-03 239
目录 一、圣杯布局 1.1 代码实现 1.2 详细过程解析 二、双飞翼布局 2.1 代码实现 2.2 详细过程解析 三、圣杯布局和双飞翼布局的区别 不同于之前所看的左右定宽，中间自适应。圣杯与双飞翼 是另外两种写法。 反正不管是圣杯还是双飞翼，最后结果都是如下图所示。 DOM上， 中间的放首位，然后是左边，右边。为了优先显示中间主要部分，故先构建中间main部分。 一、圣杯布局 使用float布局框架 ，position: relative定位， margin为负值 。...
[css] 圣杯布局 双飞翼布局
qq_14993591的博客
11-12 703
三栏式布局 三栏布局，两边的盒子宽度固定，中间盒子自适应，“圣杯”和“双飞翼就是三栏式布局，它们实现的效果是一样的，差别在于其实现的思想。 圣杯布局 圣杯：父盒子包含三个子盒子（左，中，右） 中间盒子的宽度设置为 width: 100%; 独占一行； 使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行； .left {margin-left:-100%;} 把左边的盒子拉上去 .right {margin-left：-右边盒子宽度px;} 把右边的盒子拉上去 父盒子
双飞翼布局和圣杯布局
热门推荐
flowRight的博客
06-23 3万+
实现左右固定宽度 ，中间自适应的布局（中间先加载渲染）， 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>css</title> </head> <style type="text/css"> *...
圣杯布局和双飞翼布局（前端面试必看）
sinat_27240687的博客
03-28 2253
爱生活，不爱黑眼圈 稍微了解前端的人都知道，圣杯布局和双飞翼布局是前端面试时必问的问题，因为它既能体现你懂HTML结构又能体现出你对ＤIV+CSS布局的掌握，毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~ 事实上，圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。它们实现的效果是一样的，差别
前端圣杯模式
weixin_37150764的博客
10-21 97
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script ty
理解双飞翼布局
99的博客
07-05 737
双飞翼布局主要解决俩问题：1、三列布局，中间宽度自适应，两边定宽； 2、中间栏要在浏览器中优先展示渲染。 在css布局中，有三种技术是经常被使用的： （1）浮动 （float） （2）负边距 （negative margin） （3）定位 （position） 这是实现布局的三个最基本的原子技术。只要巧妙组合，并加以灵活运用，就能“拼”出各种布局的实现方案。 如果三列布局不
面试经常考的布局（CSS布局 -- 圣杯布局 & 双飞翼布局）
weixin_34034261的博客
11-13 146
按照我的理解，其实圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。在这里，实现了左(300px) 右(300px) 宽度固定，中间自适应，container部分高度保持一致。下面我写了物种常用的方式：通用样式 html *{ margin:0; padding:0; } .layout{ hei...
分别举例圣杯布局和双飞翼布局
最新发布
07-17
圣杯布局（Holy Grail Layout）和双飞翼布局（Double Wings Layout）都是用于创建三栏布局的常见方法，它们的目标都是实现一个固定中间列和两个可变宽度的侧边列。 圣杯布局示例代码如下： ```html <div id="container"> <div id="left"></div> <div id="middle"></div> <div id="right"></div> </div> ``` ```css #container { display: flex; } #left, #middle, #right { height: 200px; } #left { flex: 1; background-color: green; } #middle { flex: 2; background-color: yellow; } #right { flex: 1; background-color: blue; } ``` 圣杯布局通过使用flexbox来实现，将左侧和右侧列设置为相等的flex值，将中间列设置为两倍于侧边列的flex值。 双飞翼布局示例代码如下： ```html <div id="container"> <div id="content"></div> </div> <div id="left"></div> <div id="right"></div> ``` ```css #container { padding-left: 200px; padding-right: 200px; } #content { float: left; width: 100%; } #left, #right { float: left; width: 200px; margin-left: -100%; } #left { background-color: green; } #content { background-color: yellow; } #right { background-color: blue; } ``` 双飞翼布局使用了浮动和负边距来实现，通过将内容放在一个容器中，再将两侧列使用负边距向左浮动，以便让内容占据整个可用宽度。 这些布局方法都有各自的优缺点，可以根据具体需求选择适合的布局方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值