CSS圣杯布局、双飞翼布局、flex布局的学习

我是刺猬姑娘

于 2019-04-13 16:45:57 发布

阅读量243

点赞数

分类专栏： CSS布局

本文链接：https://blog.youkuaiyun.com/hongtaochi0464/article/details/89283423

版权

CSS布局专栏收录该内容

0 篇文章

订阅专栏

这篇文章的学习参考了以下链接。[link]https://blog.youkuaiyun.com/wangchengiii/article/details/77926868
其实这个博主就写得特别好了，但是我觉得自己写一遍能够记得牢一些。以后复习也方便查看就写一篇博文。
起因：
今天做蘑菇街前端笔试题的时候看到了这样一个笔试题目。
蘑菇街笔试题目

圣杯布局

先写html把基本的几个块结构给搭建起来

<header>圣杯布局</header>
	<div class = "bd clear">
		<div class = "main">main</div>
		<div class = "left">left</div>
		<div class = "right">right</div>
	</div>
<footer>footer</footer>

然后按照要求给指定的颜色

	header,footer
	{
		background-color: #7ecef3;
	}
	.main
	{
		width:100%;/*为了实现自适应宽度*/
		background-color: #53b9be;
	}
	.left
	{
		width:200px;
		background-color: #89c997;
	}
	.right
	{
		width:200px;
		background-color: #89c997;
	}

出现的效果是这样的
圣杯布局第1步
这样的效果当然是不可以的，我们想要让left main right在同一行出现，可以为这三个块元素开启浮动。

	.main,.left,.right
	{
		float: left;
	}

效果如下：
圣杯布局第2步
发现有两处不随人意：
(1)开启浮动后，bd这个div的高度塌陷了。
(2)left main right并不在同一行。

我们先解决(1)高度塌陷问题：

	.clear:before, .clear:after
	{
		content:"";
		display: block;
		clear:both;
	}

再使用负值的margin来解决(2)问题：

	.left
	{
		width:200px;
		background-color: #89c997;
		margin-left:-100%;

	}
	.right
	{
		width:200px;
		background-color: #89c997;
		margin-left:-200px;
	}

此时的页面是这个样子的：
在这里插入图片描述
仍然是不尽人意的：
left在main之上，将main的主要内容给挡住了。
这个时候就需要嵌套在最外层的div发挥作用了。为它设置左右各200px的padding。

	.bd
	{
		padding:0 200px 0 200px;
	}

效果是这个样子的
在这里插入图片描述
最后我们只要为left和right开启相对定位，设置left和right偏移量就可以让他们往左右走啦~

完整代码如下

<!DOCTYPE html>
<html>
<head>
	<title>圣杯布局</title>
	<style type="text/css">
	header,footer
	{
		background-color: #7ecef3;
	}
	.main,.left,.right
	{
		float: left;
		position: relative;
	}
	.bd
	{
		padding:0 200px 0 200px;
	}
	.main
	{
		width:100%; /*为了实现自适应宽度*/
		background-color: #53b9be;
	}
	.left
	{
		width:200px;
		background-color: #89c997;
		margin-left:-100%;
		left:-200px;

	}
	.right
	{
		width:200px;
		background-color: #89c997;
		margin-left:-200px;
		right:-200px;
	}
	.clear:before, .clear:after
	{
		content:"";
		display: block;
		clear:both;
	}
	</style>
</head>
<body>
	<header>圣杯布局</header>
	<div class = "bd clear">
		<div class = "main">main</div>
		<div class = "left">left</div>
		<div class = "right">right</div>
	</div>
	<footer>footer</footer>
</body>
</html>

双飞翼布局

双飞翼布局在html结构上就和圣杯布局的不太一样，以下是双飞翼布局的html结构。

<div class = "container">
		<div class = "main">
			<div class = "content">main</div>
		</div>	
		<div class = "left">left</div>
		<div class = "right">right</div>
</div>

完整的代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>双飞翼布局</title>
	<style type="text/css">
	header,footer
	{
		background-color: #7ecef3;
	}
	.main, .left, .right
	{
		float:left;
	}
	.left
	{
		width:200px;
		background-color: #89c997;
		margin-left:-100%;
	}
	.right
	{
		width:200px;
		background-color: #89c997;
		margin-left:-200px;
	}
	.main
	{
		width:100%; /*为了实现自适应宽度*/
		background-color: #53b9be;
	}
	.content
	{
		padding:0 200px 0 200px;
	}
	.container:before,.container:after
	{
		content:"";
		display: block;
		clear:both;
	}

	</style>
</head>
<body>
	<header>圣杯布局</header>
	<div class = "container">
		<div class = "main">
			<div class = "content">main</div>
		</div>	
		<div class = "left">left</div>
		<div class = "right">right</div>
	</div>
	<footer>footer</footer>
</body>
</html>

flex布局

flex相对实现上是比较简单的，但是要注意理解flex布局的各个属性的意思。
详细的解释在[link]http://static.vgee.cn/static/index.html中。
实现代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>flex布局</title>
	<style type="text/css">
	header,footer
	{
		background-color: #7ecef3;
	}
	.container
	{
		display: flex;
	}
	.left
	{
		order:-1;
		background-color: #89c997;
		flex-basis:200px;
	}
	.right
	{
		background-color: #89c997;
		flex-basis:200px;
	}
	.content
	{
		background-color: #53b9be;
		flex-grow:1;
	}

	</style>
</head>
<body>
	<header>flex布局</header>
	<div class = "container">
		<div class = "content">content</div>
		<div class = "left">left</div>
		<div class = "right">right</div>
	</div>
	<footer>footer</footer>
</body>
</html>