双飞翼布局和圣杯布局将界面分为左中右三部分,其中左右侧固定宽度,中间实现自适应。
圣杯布局实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container
{
height: 300px;
padding:0 400px 0 200px;
}
.main
{
float: left;
width: 100%;
background-color: red;
height: 300px;
word-break: break-all;
}
.left
{
float: left;
background-color: yellow;
width: 200px;
margin-left: -100%;
height: 300px;
position: relative;
left:-200px;
word-break: break-all;
}
.right
{
float: left;
background-color: blue;
width: 400px;
margin-right: -400px;
height: 300px;
word-break: break-all;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
解释:
1.main写在最前面(为了加载时先加载main部分,其实没啥用),用负margin将left拉到main的左边,将right拉到它的右边,注意此时left和right是覆盖main部分的。(当margin为百分比时是相对父元素的宽度进行计算的,无论是margin-left、maring-right还是margin-top,margin-bottom)
2. main部分的宽度是100%,这说明它会占满一行,为了空出空间给left和right,需要对他们三外面的容器container进行设置:padding:0 400px 0 200px;
3. 接下来把空出来的部分分配给left和right,这里用到相对定位。.left{position:relative;left:-200px;}(left部分相对自身向左偏移200px)
双飞翼布局实现代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container
{
height: 300px;
}
.main
{
float: left;
width: 100%;
background-color: red;
height: 300px;
word-break: break-all;
}
.left
{
float: left;
background-color: yellow;
width: 200px;
margin-left: -100%;
height: 300px;
word-break: break-all;
}
.right
{
float: left;
background-color: blue;
width: 400px;
margin-left: -400px;
height: 300px;
word-break: break-all;
}
.main_n
{
margin:0 400px 0 200px;
}
</style>
</head>
<body>
<div class="test">
<div class="main"><div class="main_n">main</div></div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
解释:
双飞翼布局跟圣杯布局实现的目标相同,实现手法区别主要在于后面的main定位。
当left和right占领main身体时,圣杯布局通过外部容器padding来实现left和right与main分离,而双飞翼布局则直接在main内定义一个div,通过该div的margin为left和right让出空间。
看图得区别:
圣杯布局:
双飞翼布局:
扩展:
1. 使用calc表达也可实现,但实际开发中最好避免,因为css表达式会导致性能问题。
2. flex布局——容易实现,最多有点兼容性问题
flex: 0 0 200px; (既不放大也不缩小,宽度200)
flex: 1; (自动分配宽度)
3. 使用定位的方法position: absolute;相对父元素定位。