我对双飞翼布局理解，以及双飞翼布局的好处

双飞翼布局对我这样的新手来说不太好理解，光靠死记不行，理解了以后就能轻易写出来。话不多说，请看代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>双飞翼布局</title><style>.wrap{margin: 0 auto;width: 80%;}.main{width: 100%;background-color: red;float: left;}.left{width: 200px;height: 500px;background-color: blue;float: left;margin-left: -100%;}.right{width: 200px;height: 500px;background-color: yellow;float: left;margin-left: -200px;}.content{height: 500px;margin: 0 200px;}</style>
</head>
<body><div class="wrap"><div class="main"><div class="content">#content</div></div><div class="left">#left</div><div class="right">#right</div></div>
</body>
</html>

理解双飞翼布局的几个关键点：

①main是自适应宽度的，所以width:100%;

②main、left、right都是float:left;，但是main的宽度是100%，所以left、right被挤到第二行；

③如何让left和right移动到正确的位置呢？

理解时应该考虑浮动的特性，假设main是固定宽度的，全都左浮动以后，main、left、right应该排在同一行。

那么要让left移动到左边就容易了，只需要向左边移动一个main的宽度就可以了，所以就是margin-left:-100%;

因为main的宽度是100%，要让right移动到右边，则只需要给right一个200的宽度，让它移动上去就行了，所以就是margin-left:-200px;

④此时，left和right实际上是叠在main的左右两边的，这就是在写结构时，要在main里面多写一层content的原因，只要给content一个margin:0 200px;里面的内容就不会被left和right挡住，双飞翼布局也就实现了。

双飞翼布局的好处：是淘宝团队提出一种优化写法，main写在前面，优先加载，优先渲染，而且兼容性好。

我对双飞翼布局理解，以及双飞翼布局的好处相关推荐

浅谈面试中常考的两种经典布局——圣杯与双飞翼
圣杯和双飞翼布局介绍最近正好碰到了写这种布局,一直没有总结过正好借这次机会总结一波,同时加强一下自己的理解. 博客链接:http://www.xluos.com/index.ph... 圣杯布局和双 ...
浅谈面试中常考的两种经典布局——圣杯与双飞翼 1
2019独角兽企业重金招聘Python工程师标准>>> 圣杯和双飞翼布局介绍最近正好碰到了写这种布局,一直没有总结过正好借这次机会总结一波,同时加强一下自己的理解. 圣杯布局和双飞 ...
css3布局篇（双飞翼）
大家看到好多电商网站都见过经典三列布局,它也叫做圣杯布局 ,是Kevin Cornell在2006年提出的一个布局模型概念,这个在国内最早是由淘宝UED的工程师传播开来,在中国也有叫法是双飞翼布局,它 ...
css多栏布局(双栏布局、三栏布局、圣杯布局、双飞翼布局)
1.两栏布局两栏布局的核心是左栏固定宽度,右栏宽度自适应 html结构为 <div class="outer"><div class="left&qu ...
深入理解弹性盒布局（fiex-box）——Web前端系列自学笔记
文章目录弹性盒布局弹性盒布局概述弹性盒布局属性 display flex-flow justify-content align-items order flex align-self 总结弹性 ...
必读 | 深入理解 Flutter 的布局约束
前言本文最初来自于社区成员 Marcelo Glasberg 在 Medium 发表的文章--"初学者应知应会的 Flutter 高级布局规则 (Flutter: The Advanced ...
如何理解许多Android布局
Linear, Relative, Constraint, Table, Frame and so on and so forth. Android applications have a whole ...
Android studio 常见布局理解总结
综述 Android的布局有好多好多种,官方的.自定义的等等,五花八门.安卓有五大基本布局,现在共有六种,前五种是传统的,还有一种是比较新的. 五种传统布局 LinearLayout(线性布局) Re ...
常用布局简介（单列布局、两列布局、三列布局、sticky footer粘连布局）
常用布局简介一.简介网页布局对于一个前端开发者而言至关重要,掌握好布局知识有助于我们更好的实现CSS界面的设计和开发.布局是有限空间内的元素排列方式,因为页面设计横向不滚动,纵向无限延伸,所以大多 ...
div 布局_CSS布局：三栏布局
其实三栏布局比较简单,而且方法也有很多.今天了解了一下传统的三栏布局方法:圣杯布局.双飞翼布局,本文简单记录一下. 所谓三栏布局,通常是指左右两栏定宽,中间一栏自适应页面宽度填满剩余空间的布局. 一. ...

我对双飞翼布局理解，以及双飞翼布局的好处

我对双飞翼布局理解，以及双飞翼布局的好处相关推荐

最新文章

热门文章