圣杯和双飞翼布局都是实现三栏布局，左右两边定宽，中间宽度自适应。首先创建一个三栏布局
创建三栏布局要点
- 把left、middle、right统一float: left, 脱离文档流，使其排成一行；（如果不脱离文档流，div块级元素就会一个占一行）.
.left,.right,.middle{
float: left;
}
2. 设置margin负外边距，使两个left和right移到middle同行
.left{
margin-left: -100%;
}
.right{
margin-left: -300px;
}
3. footer清除浮动。container没有设置高度，它的高度本来是由里边的子元素（center、left、right） 撑起来的。但是子元素都设置了浮动，脱离了文档流，所以container的高度又变成了0，footer会往上跑，被浮动元素盖住。解决的办法是
a. footer设置clear: both
.footer{
clear: both;
}
b. container设置overflow: hidden/auto/scroll
.container{
overflow: hidden
}
c.设置::after伪元素
HTML：
<div class="container clearfix"> // 给 main 加上 clearfix 类
......
</div>
CSS：
.clearfix::after {
content: ".";
display: block;
clear: both;
height: 0
visibility: hidden
}
- 加上限定高度min-height使其高度统一，并统一设置margin和padding初始化为0，统一不同浏览器的默认设置。（刚刚发现之前的截图都做了这一步。。）
.left,.right,.middle{
min-height: 200px;
}
*{
margin: 0;
padding: 0;
}
至此三栏布局的middle会被left和right挡住，圣杯布局和双飞翼布局用不同办法解决。一个是设置父元素，一个是创建子元素
圣杯布局
- 设置父元素container的padding左右各为left和right的宽度，压缩container内部content宽度，使container左右两边空出left和right的宽度。（设左右margin也行）
.container{
padding: 0 300px 0 200px;
}
2. 设置left和right相对自身宽度向两边偏移，把position设为relative（这时设置偏移才是相对自身位置移动）
.left{
left: -200px;
}
.right{
right: -300px;
}
.left,.right,.middle{
position: relative;
}
完整的圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.left,.right,.middle{
float: left;
position: relative;
min-height: 200px;
}
.header,.footer{
border: 1px solid balck;
background-color: gray;
height: 30px;
}
.left{
width: 200px;
margin-left: -100%;
最低0.47元/天 解锁文章
1362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
