两种其实是一样的布局。特点:中间的内容可以根据屏幕的大小的改变而改变,左右两边的内容保持不变
代码编写的时候:两者的区别在于:圣杯布局是一个父类里面有(简单没有复合)三个子类,并设置父类的margin值,在一行显示用浮动,之后再通过定位的方式去移动盒子从而达到我们想要的效果。双飞翼布局是一个父类里面有三个子类,并且中间的middle变化的是在这个三个子类中一个类里面作为其子类,说白了,就是又嵌套了一层,之后通过浮动从而达到我们想要的效果,没有涉及定位。
圣杯布局(了解)
目的:加载文档时先加载中间区域,再加载左右两边。
特点:中间的内容可以根据屏幕的大小的改变而改变,左右两边的内容保持不变。
实现:
1.0在一个大的div中放入三个小的div,并且排序一定要是中间的div放在文档的最前面。
2.0给大的div设置左右padding,给中间的div设置宽度为100%;
3.0设置左右两边div的大小,注意为了让所有的div显示在同一行中,三个div都必须浮动(float:left).
4.0给左边的div设置margin-left:-100%;给右边的div设置margin-left:值。这个值为这个盒子宽高。
5.0如果按照述的方式来移动盒子,中间的内容会被左右的盒子覆盖住。我们还需要使用定位来将盒子定位左右两。给第左边的盒子设置postion:relative,再设置left:-盒子的宽度。给右边的盒子也设置postion:relative,再设置这个盒子right:-盒子的宽度。
用到了哪些技术
浮动
margin-left
定位
<head> | |
<meta charset="utf-8"> | |
<style type="text/css"> | |
*{ | |
margin: 0; | |
padding: 0; | |
} | |
.content { | |
height: 150px; | |
background-color: red; | |
padding: 0 200px; | |
min-width: 400px; | |
} | |
.middle { | |
width: 100%; | |
height: 150px; | |
background-color: blue; | |
float: left; | |
} | |
.left { | |
width: 200px; | |
height: 150px; | |
background-color: yellow; | |
float: left; | |
margin-left: -100%; | |
position: relative; | |
left: -200px; | |
} | |
.right { | |
width: 200px; | |
height: 150px; | |
background-color: yellow; | |
float: right; | |
margin-left: -100%; | |
position: relative; | |
right: -200px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="content"> | |
<div class="middle"></div> | |
<div class="left"></div> | |
<div class="right"></div> | |
</div> | |
</body> | |
</html> |
双飞翼布局(了解)
圣杯布局和双飞翼布局解决的问题是一样的,但是实现的过程是不同的。
目的:加载文档时先加载中间区域,再加载左右两边
特点:中间的内容可以根据屏幕的大小的改变而改变,左右两边的内容保持不变。
用到的技术:
浮动
margin-left
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<style type="text/css"> | |
* { | |
margin: 0; | |
padding: 0; | |
} | |
.content { | |
height: 150px; | |
background-color: red; | |
} | |
.f { | |
width: 100%; | |
height: 150px; | |
background-color: blue; | |
float: left; | |
} | |
.middle { | |
height: 150px; | |
margin: 0 200px; | |
background-color: pink; | |
} | |
.left { | |
width: 200px; | |
height: 150px; | |
background-color: yellow; | |
float: left; | |
margin-left: -100%; | |
} | |
.right { | |
width: 200px; | |
height: 150px; | |
background: yellow; | |
float: right; | |
margin-left: -100%; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="content"> | |
<div class="f"> | |
<div class="middle"></div> | |
</div> | |
<div class="left"></div> | |
<div class="right"></div> | |
</div> | |
</body> | |
</html> |