圣杯布局
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>实现圣杯布局</h1>
<div id="header">Header</div>
<div id="content">
<!-- 这里注意要将middle即中间区域放在左边和右边前面,因为我们的需求是中间一栏最先加载、渲染出来,根据执行顺序所以把middle放在第一个。 -->
<div id="center" class="column">center</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>
</body>
<style>
body {
/* 设置最小宽度,防止挤压使中间内容消失 */
min-width: 500px;
}
div {
text-align: center;
}
#header {
background-color: #f1f1f1;
}
#content {
padding-left: 300px;
padding-right: 200px;
}
#content #center {
background-color: #ddd;
width: 100%;
}
#content #left {
position: relative;
width: 300px;
background-color: orange;
margin-left: -100%;
right: 300px;
}
#content #right {
background-color: green;
width: 200px;
margin-right: -200px;
}
/* 这里当我们给每中间内容的每一栏都加上float:left之后容易导致高度塌陷,解决办法 clear: both; overflow:hidden */
#content .column {
float: left;
}
#footer {
/* 清除浮动 */
clear: both;
background-color: #f1f1f1;
}
</style>
</html>
<!-- 问题:高度塌陷 是什么意思
怎么解决:
overflow:hidden 【这里触发了BFC------BFC是一个独立的布局环境,可以理解为一个看不见的盒子,盒子内部的物品摆放不受外界环境影响。】
clear:both -->
<!-- 圣杯布局:将中间的三个模块实现成为三栏布局,中间栏自适应,两侧内容宽度固定,三栏布局,中间一栏最先加载,渲染出来
1.由于中间栏自使用,所以宽度设置为100%,
2.左右两栏使用 float:left 同时使用clear:both 解决高度塌陷的问题
3.将左右两栏的盒子移动上去 【这里通过相对定位我们可以看到是一行挤不下换成了两行,所以想左移动相应的位置就行了向左移动的位置是100%+盒子的宽度】
4.注意设置设置最小宽度,防止挤压使中间内容消失
圣杯布局就是将基本布局之后使用向左浮动,middle栏留出两边位置,然后使用相对定位将左右两栏通过margin-left定位到相应位置。
-->
双飞翼布局
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双飞翼布局</title>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="center">mid</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
<style>
.container {
height: 100px;
}
.left {
float: left;
margin-left: -100%;
width: 100px;
height: 100px;
background: tomato;
}
.right {
float: left;
margin-left: -200px;
width: 200px;
height: 100px;
background: gold;
}
.wrapper {
float: left;
width: 100%;
height: 100px;
background: lightgreen;
}
.center {
margin-left: 100px;
margin-right: 200px;
height: 100px;
}
</style>
</html>
总结
相同点:
都实现了三栏布局,都使用了浮动
不同点:
圣杯布局 是通过float
搭建布局+margin
使三列布局到一行上+relative
相对定位调整位置。
双飞翼布局 是通过float
+margin
,没有使用相对定位。
对于两列的处理:
圣杯布局 是给外部容器加padding
,通过相对定位把两边定位出来。
双飞翼布局 是靠在中间这层外面套一层div
加padding
将内容挤出来中间。