<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{margin: 0;padding: 0;}
.left{width: 200px;
height:300px;
background-color: #9d9d9d;
position: absolute;
left: 0;top: 0;
}
.middle{height: 300px;
background-color: #f0ead8;
margin: 0 300px 0 200px;
}
.right{width: 300px;
height:300px;
background-color: #9d9d9d;
position: absolute;
right: 0;top: 0;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</body>
</html>
（2）经典的圣杯布局分析
实现中间内容自适应，两侧宽度固定的三列效果，用到了浮动，相对定位，百分比margin,padding
首先是外部的大盒子通过padding来确定三列的具体宽度
<style>
.box{
padding: 0 100px 0 150px;
width: 1000px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
</div>
将三个子div放入box内部，因为要优先渲染中间内容，因此根据文档渲染优先级，把middle放在前面
<div class="box">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
子div宽度100%继承的是父级的content，不将padding计算在内，如果子元素占据了父级的宽度，其余的子元素会被挤到下一行，可以通过浮动后margin定位回到上一行，子元素百分比margin相对于的是父级宽度的content
<style>
.box{
padding: 0 100px 0 150px;
width: 1000px;
margin: 0 auto;
}
.left,.right,.middle{
position: relative;
float: left;
min-height: 200px;
}
.middle{
background-color: orange;
width: 100%;
}
.left{
width: 150px;
background-color: lightcoral;
margin-left: -100%; /*相对于父级content的宽度*/
left: -150px;
}
.right{
width: 100px;
background-color: lightseagreen;
margin-left:-100px;
right: -100px;
}
</style>
</head>
<body>
<div class="box">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
image.png
要想做成比较完整的效果，还需要一个头部底部
header,footer{
width: 100%;
height: 60px;
background-color: darkmagenta;
}
<header></header>
<div class="box clearfix">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<footer></footer>
image.png
要实现这个效果，必须进行浮动的清除
image.png
