CSS-布局3-圣杯布局
2017-06-17 本文已影响0人
Java小工匠
1、圣杯布局概述
圣杯布局是有淘宝的工程师提出，巧妙的利用我们介绍过的定位技术、负边距、相对定位、浮动、组合运用。轻松实现常见布局。
我们在前面介绍过，使用浮动特性，实现三列布局，但是使用div布局，有一个问题，那就是内容区，在左边区和右边区之后渲染。下面我们使用圣杯布局的思路，实现一个内容区渲染在前的三列布局。
2、圣杯布局实现步骤
（1）负边距技术实现初步效果
可以参考负边距定位章节，了解实现细节。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.header{
background : yellow;
}
.left{
width:198px;
height:200px;
float:left;
border: 1px solid red;
margin-left :-100%;
}
.right{
width:198px;
height:200px;
border: 1px solid blue;
float: left;
margin-left :-200px;
}
.center{
width : 100%;
height:200px;
float: left;
background :gray;
}
.footer{
clear:both;
background : blue;
}
</style>
</head>
<body>
<div class="header">heder</div>
<div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
运行效果：
image.png
（2）利用padding实现，将center元素固定在中间
.container{
padding-left:200px;
padding-right:200px;
height:200px;
}
运行效果：
image.png
（3）利用相对定位技术，将元素拉回左边和右边
left 添加如下样式:
position:relative;
left:-200px;
right 添加如下样式:
position:relative;
right:-200px;
运行效果：
image.png
3、布局缺陷
（1）左边区块和右边区块，利用了相对布局。
（2）内容区高度塌陷。
