追根溯源
双飞翼布局
来源于淘宝UED的玉伯，致敬~
圣杯布局【Holy Grail of Layouts】
Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来
知识点
margin-left:-100%;
使对象向左移动一段距离，这段距离等于父体的内容宽度，上浮到前面元素的最左边
步骤
1.浮动,设置main的宽度为100%;
main中间栏(重要的东西)要在放在文档流前面以优先渲染
<style>
.main,
.left,
.right{
float: left;
}
.main{
background: #888;
width: 100%;
}
.left,
.right{
background: #F65;
width: 200px;
}
.left{
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
main </div>
<div class="left">
left </div>
<div class="right">
right </div>
</div>
</body>效果：
2.让left和right与main在一行，需要使用margin-left的负值，此时left和right覆盖了main的一部分，但是width的宽度不发生改变
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
3.main部分的内容被覆盖住了，要如何解决呢？
3.1双飞翼布局
.content{
margin-left: 200px;
margin-right: 200px;
}<div class="wrap">
<div class="main">
<div class="content">main</div>
</div>给main内嵌一个div，把main里面的内容放在这个div中，并给这个div设置margin属性就ok啦~
3.2圣杯布局
.wrap{
padding-left: 200px;
padding-right: 200px;
}效果：
给最外围的wrap容器设置padding值之后，其包含的div宽度被压缩，但是main被定位到了合适的位置，如下图，在浏览器中把left，right元素隐藏之后
.left,
.right{
background: #F65;
width: 200px;
position: relative;
}
.left{
margin-left: -100%;
left:-200px;
}
.right{
margin-left: -200px;
right:-200px;
}把main定位到了合适的位置，下一步就要解决left，right的位置问题了~
设置left，right为相对定位，其实相对定位和绝对定位都ok~然后把left和right拉到合适的位置，大功告成！是不是很开心~
最终效果：
总结：
圣杯布局：没有增加额外的标记，但是设置了较多的属性值~
双飞翼布局：增加了一个div，但是显得更加轻便简洁灵活，代码也比较少~
两者都用到了margin的负值，这个属性还是蛮灵活的，要多用
作为小白，很佩服能够灵活布局的大大，所以我还要学习学习在学习，理解理解再理解！
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
