双飞翼布局
2020-05-28 本文已影响0人
HuFan_JS
最近在刷面试题，复习了一些css相关的内容，第一次听到双飞翼和圣杯布局这两个个概念（我之前css是怎么学的？？？）
双飞翼布局
双飞翼是float布局和负边距结合使用实现的一个两端固定宽度，中间自适应的效果
且中间
这个盒子里left和right的宽度是固定的，不会随着父盒子的改变而改变的，而中间蓝色的这款是可以随着父盒子的宽度的改变和改变的。
上代码
html
<body>
<div class="container">
<div class="main">
<div class="main-inner">i am main</div>
</div>
<div class="left">i am left</div>
<div class="right">i am right</div>
</div>
</body>
双飞翼布局还有一个特点就是main优先加载主要内容main部分，因为浏览器会按照html文档中的顺序渲染，所以只需要把中间的main盒子写在前边就可以了（main盒子里面嵌套main-inner我们等下再讲）
style
首先我们给最外层container 一个width：100%，一个固定的高度300px
然后内部三个子盒子main、left、right都添加一个float：left
给main的宽度设置为100%，left的宽度和right的宽度设置一个具体的值
结果是这样的
由于父盒子的宽度不够，left和right被挤到父盒子下面了，这个时候，是时候让负边距展现真正的技术了
left盒子添加一个margin-left:-100%(让他向右移动一个父盒子那么宽)
right盒子添加一个margin-left:-300px（让他向右移动-300px）
效果如下
嗯！就是这么神奇，具体是为什么呢？可以移步了解下负边距
接下来我们要让中间主体部分的内容居中显示，不然他左边和右边的内容会被left和right这两个盒子挡住。
所以这就是main-inner这个盒子的作用了，我们给这个盒子一个左右边距，让他远离左右盒子，然后把主体内容写在这个mian-inner盒子里面就可以了
效果如下
这就是双飞翼布局了
完整css
<style>
.container {
width: 100%;
height: 300px;
margin: 200px auto;
border: 1px solid pink;
overflow: hidden;
}
.main {
float: left;
width: 100%;
height: 300px;
background-color: black;
}
.main-inner {
margin: 0 200px 0 100px;
color: white;
background: blue;
}
.left {
width: 100px;
float: left;
height: 300px;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
float: left;
height: 300px;
margin-left: -200px;
background-color: purple;
}
</style>
