圣杯布局主要为
上下固定
左右固定
中间自适应
在这里为左200px,右300px
步骤思路
设置主体
第一步:对上下取固定,这里直接用h5 的语义化标签,header和footer
第二步:中间部分将三个div放在一个div盒子里
css内容
第一步:对中间盒子设置padding-left和padding-right,分别为左右两边盒子需要的宽度
第二步:让中间三个盒子浮动
第三步:设置左右两边盒子的margin-left(左边距),左边的为-100%,右边的为(负右边盒子宽度)
第六步:对左右盒子设置相对定位,position:relative,让盒子相对于自身原来的位置偏移
<!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>
<style>
*{
margin: 0;
padding: 0;
}
header{
width: 100vw;
height: 20vh;
background-color: #3e4149;
}
footer{
width: 100vw;
height: 20vh;
background-color: #ffc8c8;
}
.contain{
height: 60vh;
padding: 0 200px;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
.center{
float: left;
width: 100%;
height: 100%;
background-color: #11999e;
}
.left{
float: left;
width: 200px;
height: 100%;
margin-left: -100%;
background-color: #0d4c4f;
position: relative;
left: -200px;
}
.right{
float: left;
height: 100%;
width: 200px;
margin-left: -200px;
background-color: #0d4c4f;
position: relative;
right: -200px;
}
</style>
</head>
<body>
<header></header>
<div class="contain clearfix">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<footer></footer>
</body>
</html>