css 三栏布局 流式 圣杯 双飞翼布局 优先加载问题
三栏布局
1 overflow + float
左右边栏浮动,中间主体部分通过overflow开启BFC。利用BFC不与浮动元素重叠的特性来完成三栏布局,中间自适应。
缺点是DOM加载是按照书写顺序来的,因此中间主题部分不会优先加载。
圣杯布局和双飞翼布局content被优先加载,解决了这一问题
<style>
.main::after {
content: ' ';
display: block;
clear: both;
zoom: 1;
}
.left,
.right,
.center {
height: 100px;
}
.left {
width: 120px;
float: left;
background: lightskyblue;
}
.right {
width: 200px;
float: right;
background: lightseagreen;
}
.center {
overflow: hidden;
background: lightsalmon;
}
</style>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
效果
2 圣杯布局
浮动+定位+负margin
content宽度设置为100%将左右栏挤下去
左右边栏预留的宽度由父元素的padding给出
即leftWidth=paddingLeft
rightWidth=paddingRight
左边栏:
margin-left:100%的百分比相对于父元素计算,因此只能到达父元素的content左边线,不能到达padding区域
再给上相对定位left:-自身宽度,即可填满padding-left
右边栏:
设置好左边栏,右边栏已经在父容器的content右边线位置,想要到达padding处,只需要设置
margin-right为-自身宽度,即可填满padding-right
<style>
.main{
height: 100px;
/* padding值为左右边栏空出的距离 */
padding: 0 100px 0 200px;
}
.content,.left,.right{
float: left;
height: 100%;
}
.content{
/* 把左右挤下去 */
width: 100%;
background: lightseagreen;
}
.left{
width: 200px;
background: lightpink;
/* 对齐到main的左边线,但是没有到达padding区域 */
margin-left: -100%;
position: relative;
/* 填充main左边线的padding区域 */
left:-200px;
}
.right{
width: 100px;
background-color: lightgoldenrodyellow;
/* 填充main的右边线的padding区域 */
margin-right: -100px;
}
</style>
<body>
<div class="main">
<div class="content"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
效果
3 双飞翼布局
与圣杯布局不同的是,左右边栏的预留空间由自适应宽度的content通过margin值给出,而不是padding
因此没有padding,main宽度没有减少,布局的时候只需要把左右边栏移动到对齐main的左右边线即可。
左右边栏统一设置margin-left即可达到效果
<style>
.main{
height: 100px;
}
.conWrapper,.left,.right{
height: 100%;
float: left;
}
.conWrapper{
/*把左右边栏挤下去*/
width: 100%;
}
.content{
width: auto;
/* 给左右边栏留距离 */
margin: 0 200px 0 100px;
background-color: lightsalmon;
height: 100%;
}
.left{
width: 100px;
/* 对齐main左边线 */
margin-left: -100%;
background-color: lightsteelblue;
}
.right{
width: 200px;
/* 对齐main右边线 */
margin-left: -200px;
background-color: mediumvioletred;
}
</style>
<body>
<div class="main">
<div class="conWrapper">
<div class="content"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
效果