经典双飞翼布局的理解（重点css解析）

最新推荐文章于 2022-04-09 00:10:56 发布
最新推荐文章于 2022-04-09 00:10:56 发布
阅读量678 收藏 5
点赞数 2
文章标签： css css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alaAicy/article/details/104499995
版权
本文详细解析经典双飞翼布局，包括DOM结构和CSS代码，探讨了中间栏外层div、body min-width设置、左右部分负margin、footer清除浮动以及中间栏书写顺序等关键点，帮助读者深入理解这一布局方法。
摘要由CSDN通过智能技术生成

经典双飞翼布局的理解（难点解析）

首先，在学习双飞翼布局前先去看看盒子模型吧，这会对理解这篇文章有很大的帮助，也会有更加深入的理解。
我先罗列几个稍微比较难理解的问题吧，相信不少的新手小白会在这里碰壁，哈哈也是我碰壁的地方。有时候看一眼代码就以为自己懂了，实际上深究下去发现里面很多知识点还是很有难度的，一定要带着问题去看代码！！！！！！

1.为什么center内容外面要再加一个div
2.为什么body要设置min-width
3.怎么理解left部分的margin-left: -100%，right部分的margin-left: -150px
4.为什么footer要清除浮动
5.为什么要先写中间栏

好，现在上代码

DOM结构

<body>
  <div id="header"></div>
  <div id="container" class="column">
    <div id
最低0.47元/天 解锁文章
a la
关注
双飞翼布局（css）
Y0admin的博客
10-27 2051
1. DOM结构 <div class="head"></div> <div class="container column"> <div class="center"></div> </div> <div class="left column"></div> <div class="right column"></div>
理解双飞翼布局
99的博客
07-05 763
双飞翼布局主要解决俩问题：1、三列布局，中间宽度自适应，两边定宽； 2、中间栏要在浏览器中优先展示渲染。 在css布局中，有三种技术是经常被使用的： （1）浮动 （float） （2）负边距 （negative margin） （3）定位 （position） 这是实现布局的三个最基本的原子技术。只要巧妙组合，并加以灵活运用，就能“拼”出各种布局的实现方案。 如果三列布局不
双飞翼布局详解
dyb2440492276的博客
03-21 6284
作用： 圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。 原理： 双飞翼布局为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置。 css代码： .header,.footer{ height: 200px; width: 100%; background-color: #0000FF; }
双飞翼布局和圣杯布局解析
aoyi2760的博客
05-07 161
今天突然想起了温习一下css布局。之前看双飞翼布局只是粗略的看了一下，大概明白怎么做，但是并没有去延伸一下...还有它的孪生兄弟：圣杯布局。今天仔细的琢磨了一下；突然发现其实内容还不少的样子。 双飞翼布局或者说圣杯布局它们都是三列布局；（一列自适应和两列固定列）。当然，除了三列布局，还有一列布局（自适应居中）、两列布局(一列自适应一列固定列)。 其他两种都相对来说简单些。就着重说一下...
我对双飞翼布局理解，以及双飞翼布局的好处
Dumplingsoul的博客
07-19 1231
双飞翼布局对我这样的新手来说不太好理解，光靠死记不行，理解了以后就能轻易写出来。话不多说，请看代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;双飞翼布局&lt;/title&gt; &lt;styl
CSS布局解析：双飞翼与圣杯布局实现
"本文介绍了CSS布局中的两种经典方法：双飞翼布局和圣杯布局，主要关注如何实现三栏布局，其中两侧固定宽度，中间区域自适应。这两种布局方式都适用于创建复杂的网页结构，并且在实际开发中具有较高的实用性。" 在...
双飞翼布局与圣杯布局实现解析
"双飞翼布局”和“圣杯布局”是两种常见的前端网页三栏布局技术，它们主要用于解决页面在不同分辨率设备上保持良好显示效果的问题，同时实现内容区域的优先加载，提高用户体验。这两种布局方式都实现了两边固定宽度...
圣杯布局和双飞翼布局解析.docx
03-17
圣杯布局和双飞翼布局是前端开发中用于创建三栏布局的经典方法，尤其是在HTML5和CSS3的应用中。这两种布局方式的主要目标是构建一个页面结构，其中两侧栏的宽度固定，而中间栏的宽度根据浏览器窗口大小自适应，同时...
HTML+CSS面试与练习：双飞翼布局解析
这种布局通常被称为“双飞翼布局”，它是一种常见的实现方式，适用于需要灵活响应不同屏幕尺寸的设计。 1. **自适应宽度**：在HTML和CSS中，我们可以通过设置容器的宽度为百分比来实现自适应宽度。例如，如果页面总...
白话详解双飞翼布局
陈开心的博客
04-04 332
双飞翼布局其实就是浮动之后使用margin负值改变盒子的位置。 上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...
双飞翼布局的原理
止于至善
11-24 1922
双飞翼布局的起源双飞翼布局介绍-始于淘宝UED双飞翼布局解决的问题 两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。其实双飞翼布局就是在圣杯布局的原理上进行完善，实现相同效果的完美布局！ 双飞翼布局原理HTML代码<div id="content"> <div id="main-wrap"><div id="main"></div></div> &lt
css布局-双飞翼布局
lly193426的博客
08-19 231
主要优化了圣杯布局中开启定位的问题 <style> #parent{ height: 300px; } #left,#center,#right{ height: 300px; /* 第一步：三个容器横向排列 float=>已经在一行,因为center是100%，所以left和right会掉下去 */ float: left;
CSS中经典的双飞翼布局(
liwusen的博客
05-09 5678
经典的兼容性好的双飞翼布局，中间列自适应，左右两列固定宽度的布局，如何实现，以及优点等
css双飞翼布局方式
oops
05-21 352
css双飞翼布局指的是左右两侧盒子固定，中间的盒子自适应大小 这里有四种方式可以实现 一、利用浏览器加载顺序 将中间需要自适应的盒子放在最后，让浏览器左后加载，先让左右两个固定宽度的盒子浮动上去，中间自适应的盒子就可以上去了。 <style> * { margin: 0; padding: 0; } .left-box { float: left; width: 300px; height: 900px;
css经典布局——双飞翼布局
u011200562的博客
09-12 151
圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章《In Search of the Holy Grail》，在国内最早是淘宝UED的工程师（玉伯大大）对圣杯布局改进并传播开来，在中国的叫法是双飞翼布局。 圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给...
圣杯布局和双飞翼布局解析
蓝色杯子和猫
05-29 570
圣杯布局和双飞翼布局解决的问题是一样的，就是两边固定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。 圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。 不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：见代码后的解析 双飞翼布局还有个好处，让Main变成BFC元素了，屏幕宽度缩
圣杯布局与双飞翼布局详解
youhebuke225的博客
06-27 698
简介 圣杯布局和双飞翼布局两者是差不多的，最早来自 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》 在国内则是由淘宝UED的工程师（玉伯大大）对圣杯布局改进并传播 都是为了实现一个两侧宽度固定，中间宽度自适应，且中间栏要先渲染的三栏布局 圣杯布局 圣杯布局的特点 三栏布局，搜需要使用浮动 因为中间栏要自适应，且要首先渲染，所以要宽度100%,且要排在第一个 <style type="text/css"> * {
双飞翼布局结构
qq_38709972的博客
08-17 220
/* *学习笔记整理 *双飞翼布局结构代码 */    html： &lt;body&gt; &lt;div class="left"&gt;&lt;/div&gt; &lt;div class="right"&gt;&lt;/div&gt; &lt;div class="center"&gt; &lt;div class
圣杯布局VS双飞翼布局介绍以及margin负值用法的详解
weixin_45709829的博客
04-09 664
一、圣杯布局、双飞翼布局简单介绍 圣杯布局、双飞翼布局基本都是一致的，都是两边固定宽度，中间自适应的三栏布局。 中间栏要放到文档流前面，保证先行渲染。 圣杯布局、双飞翼布局都是三栏（左中右）全部float:left浮动，区别在于中间栏div是否被遮挡上 圣杯布局：中间栏相对定位，配合left、right属性，三栏独立分开 双飞翼布局：中间栏嵌套div，内容写在嵌套的div中，嵌套div设置margin-left/margin-right。左右栏在中间栏的上面 区别：双飞翼布局中间栏不变，将内容部分为两边腾开
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值