CSS 圣杯布局 双飞翼布局

最新推荐文章于 2022-11-28 10:28:14 发布
最新推荐文章于 2022-11-28 10:28:14 发布
阅读量569 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： CSS iOS 开发 ，H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/S_xiajinghan/article/details/72831396
本文介绍网页设计中的圣杯布局与双飞翼布局，这两种布局方式均可实现在加载文档时优先显示中间内容，同时确保该内容随屏幕尺寸变化而自适应调整，而两侧内容位置固定。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

两种其实是一样的布局。特点：中间的内容可以根据屏幕的大小的改变而改变,左右两边的内容保持不变

代码编写的时候：两者的区别在于：圣杯布局是一个父类里面有(简单没有复合)三个子类，并设置父类的margin值，在一行显示用浮动，之后再通过定位的方式去移动盒子从而达到我们想要的效果。双飞翼布局是一个父类里面有三个子类，并且中间的middle变化的是在这个三个子类中一个类里面作为其子类，说白了，就是又嵌套了一层，之后通过浮动从而达到我们想要的效果，没有涉及定位。


 圣杯布局（了解）

目的：加载文档时先加载中间区域，再加载左右两边。

特点：中间的内容可以根据屏幕的大小的改变而改变,左右两边的内容保持不变。

实现：

1.0在一个大的div中放入三个小的div，并且排序一定要是中间的div放在文档的最前面。

2.0给大的div设置左右padding,给中间的div设置宽度为100%;

3.0设置左右两边div的大小，注意为了让所有的div显示在同一行中，三个div都必须浮动（float:left）.

4.0给左边的div设置margin-left:-100%;给右边的div设置margin-left:值。这个值为这个盒子宽高。

5.0如果按照述的方式来移动盒子，中间的内容会被左右的盒子覆盖住。我们还需要使用定位来将盒子定位左右两。给第左边的盒子设置postion:relative，再设置left:-盒子的宽度。给右边的盒子也设置postion:relative，再设置这个盒子right:-盒子的宽度。

用到了哪些技术

浮动

margin-left

定位

<head>
 <meta charset="utf-8">
  
 <style type="text/css">
  
 *{
 margin: 0;
 padding: 0;
 }
  
 .content {
  
 height: 150px;
 background-color: red;
 padding: 0 200px;
 min-width: 400px;
 }
  
 .middle {
 width: 100%;
 height: 150px;
 background-color: blue;
 float: left;
 }
  
 .left {
 width: 200px;
 height: 150px;
 background-color: yellow;
 float: left;
 margin-left: -100%;
 position: relative;
 left: -200px;
 }
  
 .right {
 width: 200px;
 height: 150px;
 background-color: yellow;
 float: right;
 margin-left: -100%;
 position: relative;
 right: -200px;
  
 }
  
 </style>
 </head>
 <body>
 <div class="content">
 <div class="middle"></div>
 <div class="left"></div>
 <div class="right"></div>
 </div>
 </body>
 </html>

 双飞翼布局（了解）

圣杯布局和双飞翼布局解决的问题是一样的，但是实现的过程是不同的。

目的：加载文档时先加载中间区域，再加载左右两边

特点：中间的内容可以根据屏幕的大小的改变而改变,左右两边的内容保持不变。

用到的技术：

浮动

margin-left


<html lang="en">
 <head>
 <meta charset="utf-8">
  
 <style type="text/css">
  
 * {
 margin: 0;
 padding: 0;
 }
  
 .content {
  
 height: 150px;
 background-color: red;
 }
  
 .f {
 width: 100%;
 height: 150px;
 background-color: blue;
  
 float: left;
 }
  
 .middle {
 height: 150px;
 margin: 0 200px;
 background-color: pink;
 }
  
  
 .left {
 width: 200px;
 height: 150px;
 background-color: yellow;
 float: left;
 margin-left: -100%;
 }
  
 .right {
 width: 200px;
 height: 150px;
 background: yellow;
 float: right;
 margin-left: -100%;
 }
  
  
 </style>
 </head>
 <body>
  
  
 <div class="content">
  
 <div class="f">
 <div class="middle"></div>
 </div>
 <div class="left"></div>
 <div class="right"></div>
 </div>
 </body>
 </html>




经典双飞翼布局的理解（重点css解析）
alaAicy的博客
02-26 738
经典双飞翼布局的理解（难点解析） 首先，在学习双飞翼布局前先去看看盒子模型吧，这会对理解这篇文章有很大的帮助，也会有更加深入的理解。 我先罗列几个稍微比较难理解的问题吧，相信不少的新手小白会在这里碰壁，哈哈也是我碰壁的地方。有时候看一眼代码就以为自己懂了，实际上深究下去发现里面很多知识点还是很有难度的，一定要带着问题去看代码！！！！！！ 1.为什么center内容外面要再加一个div 2.为什么b...
html5第七课时，双飞翼布局，理解注释！！
甲戌天火的博客
05-01 388
html> html> head lang="en"> meta charset="UTF-8"> title>双飞翼布局title> style> #parent{ width: 600px; height: 600px; } #main{ height
h5双飞翼布局
xuemoKingDeath的博客
04-29 514
为了优先加载主界面内容，进行利用margin的负值使左右模块浮在主要内容的上面 注意不是左中右的块级书写顺序，先写主再是左右 html> html lang="en"> head> meta charset="UTF-8"> style> *{ padding: 0; margin: 0;
基本布局，圣杯布局，双飞翼布局
m0_73860660的博客
11-28 590
基本原始布局，纯CSS设置排版布局。
双飞翼布局(先加载中间，左右宽度为200，中间自适应)
qq_44631273的博客
02-23 237
双飞翼布局 先加载中间，左右宽度为200，中间自适应 <div class="main"> <div class="container"> <div class="center">中间</div> </div> <div class="left">左</div> <div cla...
CSS布局之圣杯布局与双飞翼布局
09-24
圣杯布局与双飞翼布局是CSS布局领域中经典的两种布局方法，主要用来创建一种具有左右两栏固定宽度，中间内容部分自适应宽度的布局结构。这两种布局技术在Web页面设计中应用广泛，尤其是在响应式设计中，它们能够很好...
如何做出双飞翼布局与圣杯布局
01-08
双飞翼布局与圣杯布局是网页开发中两种常见的三栏布局方式，它们的主要目标是实现两侧栏宽度固定，中间栏宽度自适应，并且在页面加载时优先展示主要内容，提高用户体验。这两种布局方法都考虑了不同分辨率设备上的...
浅谈css双飞翼布局和圣杯布局
09-24
在CSS布局中，双飞翼布局和圣杯布局都是常见的两列或三列布局方法，尤其适用于网页的头部、尾部和主体内容的布局。这两种布局方式都能够实现两侧固定宽度，中间自适应宽度的布局需求，即两边的列宽度固定，而中间的...
双飞翼布局
小人物的点点滴滴
05-07 441
圣杯布局 圣杯+伪等高 目录第一步第二步第三步第四步全部代码 圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 不同之处就是在解决中间部分被挡住的问题 第一步 第二步 接下来要将left放在middle左边，right放在middle的右边， 将left，middle，设置为左浮动 将right设置为又浮动 第三步 设置left的 margin-left: ...
HTML5+CSS3-基础11-双飞翼布局
weixin_47402645的博客
06-24 226
HTML5+CSS3-基础11-双飞翼布局双飞翼布局（左固定右固定，中间自适应） 双飞翼布局（左固定右固定，中间自适应） <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"&gt
css经典布局——双飞翼布局
包磊磊的博客
05-11 346
圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章《In Search of the Holy Grail》，在国内最早是淘宝UED的工程师（玉伯大大）对圣杯布局改进并传播开来，在中国的叫法是双飞翼布局。 圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左...
双飞翼布局和圣杯布局
flowRight的博客
06-23 3万+
实现左右固定宽度 ，中间自适应的布局（中间先加载渲染）， 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>css</title> </head> <style type="text/css"> *...
HTML+CSS+盒模型+flex布局+H5和CSS3新特性
m0_62351434的博客
01-12 653
目录HTML&C一、盒模型二.BFC三、清除浮动四、position定位的属性方法1. position: static;**2. position: relative;****3. position: absolute;****4. position: fixed;****5. inherit****6. sticky (黏性定位,吸顶效果)**五 、盒子水平垂直居中六、两栏布局、三栏（圣杯、双飞翼）作用：圣杯布局：优缺点：双飞翼布局：优缺点：圣杯与双飞翼的区别七、Flex 布局八、行内元素.块级
双飞翼布局 移动端header常用布局
diwuyanting的博客
09-06 846
在移动端开发时，经常使用双飞翼布局，简单明了，嗖嗖嗖的就搞定头部； 接下来给大家奉上代码：   html部分：   title left right css部分: .main,.left,.right { float:left;  height:200px; text-align: center; } /*先让元素浮动在同一行，并且设置元素文本居中，这样的话main的内容就可
先加载网页内容,再加载广告位内容的脚本特效
管子（zero）的杂乱空间
12-01 2074
先加载网页内容,再加载广告位内容的脚本特效 代码 document.getElementById("myads").innerHTML=document.getElementById("span_myads").innerHTML; document.getElementById("span_myads").innerHTML="";
圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例
热门推荐
wangchengiii的博客
09-10 4万+
题目要求：针对如下DOM结构，编写CSS，实现三栏水平布局，其中left、right分别位于左右两侧，left宽度为200px，right宽度为300px，main处在中间，宽度自适应。 要求：允许增加额外的DOM节点，但不能修改现有节点顺序。 <div class="container"> 　　<div class="main">main</div> 　　<div class="
h5的相对定位、绝对定位、固定定位以及案例练习
xuemoKingDeath的博客
04-24 1万+
html> html lang="en"> head> meta charset="UTF-8"> style> #right,#left,#center{ float: left; } #left{ width: 200px; height: 200px;
圣杯布局和双飞翼布局的实现过程
Sunshine_ZCC的博客
06-09 4762
第一次写博客，语言组织不好，请大家谅解！ 相信很多人都搜过圣杯布局和双飞翼布局，也知道他们的由来，在这里我就不一一赘述了，今天主要讲的是当我遇到两个布局时，我是怎样一步一步从开始到实现的过程，例如：刚开始我也不懂为什么圣杯布局和双飞翼布局的区别，不懂圣杯布局为什么会有相对定位等一些问题，在这里给大家讲下我的理解，如有错误，欢迎批评指正。 好了，接下来开始今天的写文章之旅！ 圣
经典布局——圣杯布局
qq_51406158的博客
08-30 853
前端小白在学习初期了解到的一个经典布局——圣杯布局，也是在免试中频频考到，在这和大家分享一下。 CSS部分： <style> *{ margin:0; padding: 0; } body{ min-width: 550px; } .header,.footer{ background: #aacccc; width: 100%; } .foot
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值