圣杯布局
目的:加载文档时优先加载中间区域,在加载左右两边.
特点:内容区域可以根据屏幕大小改变而改变,左右两边内容保持不变.
实现:
1.在最大的div里嵌套三个div,并且中间(center)的div放在最前面.
2.给内容(content)左右设置margin,center宽度设置100%;
3.给 左边 div (left)和 右边 div (right)设置一个宽度,同时嵌套的三个div需要加上左浮动(float:left).
4.给左边的div设置margin-left:-100%;左边的div就会重叠在中间的div之上,且靠着最左边.
5.给右边的div设置margin-left:(盒子的宽度负数);,右边的div会重叠在中间div之上的右边.
6.给左右连个盒子设置position:relative;(相对定位),顶部(top)为0;这样左右的盒子就会贴着顶部显示,
左边的盒子设置一个left:负的盒子的宽度;右变的盒子设置一个left:盒子的宽度;(注意这个的宽度不需要负数).
我们在这里面用到了三个技术:1.浮动 2.定位 3.margin的负数
补充:
position:relative;
1.设置了相对定位的元素没有脱离标准流,并且元素在页面上占据了位子.
2.相对定位不会改变元素显示方式.
3.没有设置top right bottom left 的相对定位不会改变位子会以标准流显示.设置了top right bottom left会以原来的位子平移.
4.相对定位的元素会覆盖标准流的元素之上.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{ /*通配符清除页面标签样式,通配符的性能差不建议使用*
padding: 0;
margin: 0;
}
.content{
margin: 0 210px; /*设置板块居中*/
height: 100px;
background: pink;
min-width: 800px; /* 允许浏览器改变大小但是最小不能小于800px,浏览器宽度低于八百时底部会出现滚动条*/
}
.center{
width: 100%; /*这里是100%是以父元素content宽度*/
height: 100px;
background: red;
float: left; /*左浮动*/
}
.left{
width: 200px;
height: 100px;
background: blue;
float: left;
margin-left: -100%;
position: relative;
top: 0px;
left: -210px;
}
.right{
width: 200px;
height: 100px;
background: green;
float: left;
margin-left: -200px;
position: relative;
top: 0px;
left: 210px;
}
</style>
</head>
<body>
<div class="content">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
