阿里团队常用的布局——双飞翼布局
2018-12-20 09:34:09来源：博客园 阅读 ()
双飞翼布局新手来说不太好理解，光靠死记不行，理解了以后就能轻易写出来。献上代码：
<head> <meta charset="UTF-8"> <title>双飞翼</title> <style> .wrap { width: 90%; margin: 0 auto; } .left { width: 200px; height: 700px; background: red; float: left; margin-left: -100%; } .right { width: 200px; height: 700px; background: red; float: right; margin-left: -200px; } .main { width: 100%; float: left; background: pink; } .content { height: 700px; background: yellow; margin: 0 210px; } </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>
双飞翼布局的好处：是淘宝团队提出一种优化写法，main写在前面，优先加载，优先渲染，而且兼容性好。
理解双飞翼布局的几个关键点：
①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 210px;里面的内容就不会被left和right挡住，双飞翼布局也就实现了。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- 仿阿里云的错误提示弹层 2020-05-20
- css3新增属性有哪些？css3中常用的新增属性总结 2019-12-31
- 2019年阿里最新前端工程师面试题及答案题 2019-11-20
- html常用标签 2019-10-18
- 常用的CSS透明属性 2019-10-09
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
