当先锋百科网

首页 1 2 3 4 5 6 7

CSS布局方式（圣杯布局，双飞翼布局）

1.圣杯布局

header和footer各自占领屏幕所有宽度，高度固定。
中间的container是一个三栏布局。
三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度。

  • float+position:relative
    （1）header和footer横向撑满。
    （2）container中的三列设为浮动和相对定位，middle放在最前面，footer清除浮动。
    （3）三列的左右两列分别定宽200px和150px，middle设置100%撑满，由于浮动，middle会占据整个container，左右两块区域就被挤下去了
    （4）设置left的 margin-left: -100%;，让left回到上一行最左侧，但这会把center给遮住了，所以这时给外层的container设置 padding-left: 200px;padding-right: 150px;，给left和right空出位置
    （5）此时left并没有在最左侧，因为之前已经设置过相对定位，所以通过 left: -200px; 把left拉回最左侧
    （6）对于right区域，设置 margin-left: -150px; 把right拉回第一行，右侧空出了150px的空间，所以最后设置 right: -150px;把right区域拉到最右侧。

在这里插入图片描述

<style type="text/css">
	.header,.footer{
		height: 50px;
		background-color: #ccc;
		text-align: center;
	}
	.container{
		padding: 0 200px 0 150px;
		overflow: hidden;
	}
	.column{
		position: relative;
		float: left;
		text-align: center;
		height: 300px;
		line-height: 300px;
	}
	.middle{
		width: 100%;
		background-color: aquamarine;
	}
	.left{
		width: 200px;
		right: 200px;
		margin-left: -100%;
		background-color: bisque;
	}
	.right{
		width: 150px;
		margin-left: -150px;
		background-color: bisque;
		right: -150px;
	}
	.footer{
		clear: both;
	}
</style>

<div class="header">header</div>
<div class="container">
	<div class="middle column">middle</div>
	<div class="left column">left</div>
	<div class="right column">right</div>
</div>
<div class="footer">footer</div>
  • flex弹性盒子
    给container设置弹性布局：display: flex;
    left和right区域定宽，middle设置 flex: 1
    在这里插入图片描述
<style type="text/css">
	.header,.footer{
		background-color: #CCCCCC;
		text-align: center;
		height: 60px;
		line-height: 60px;
	}
	.container{
		display: flex;
	}
	.column{
		text-align: center;
		height: 300px;
		line-height: 300px;
	}
	.middle{
		flex: 1;
		background-color: #FFE4C4;
	}
	.left{
		width: 200px;
		background-color: aquamarine;
	}
	.right{
		width: 150px;
		background-color: aquamarine;
	}
</style>

<div class="header">header</div>
<div class="container">
	<div class="left column">left</div>
	<div class="middle column">middle</div>
	<div class="right column">right</div>
</div>
<div class="footer">footer</div>
  • grid布局
    （1）给body元素添加display: grid;属性变成一个grid(网格)
    （2）给header元素设置grid-row: 1; 和 grid-column: 1/5; 意思是占据第一行网格的从第一条列网格线开始到第五条列网格线结束…以此类推
<style type="text/css">
	body{
		display: grid;
	}
	.header,.footer{
		background-color: #CCCCCC;
		text-align: center;
		height: 60px;
		line-height: 60px;
	}
	.header{
		grid-row: 1;
		grid-column: 1/5;
	}
	.footer{
		grid-row: 3;
		grid-column: 1/5;
	}
	.column{
		text-align: center;
		height: 300px;
		line-height: 300px;
	}
	.left{
		grid-row: 2;
		grid-column: 1/2;
		background-color: aquamarine;
	}
	.middle{
		grid-row: 2;
		grid-column: 2/4;
		background-color: #FFE4C4;
	}
	.right{
		grid-row: 2;
		grid-column: 4/5;
		background-color: aquamarine;
	}
</style>

<div class="header">header</div>
<div class="container">
	<div class="left column">left</div>
	<div class="middle column">middle</div>
	<div class="right column">right</div>
</div>
<div class="footer">footer</div>

2.双飞翼布局

header和footer各自占领屏幕所有宽度，高度固定。
中间的container是一个三栏布局。
三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度。

(1)left、main、right三种都设置左浮动
(2)设置center宽度为100%
(3)设置负边距，left设置负边距为100%，right设置负边距为自身宽度
(4)设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度

在这里插入图片描述

<style type="text/css">
	.header,.footer{
		background-color: #CCCCCC;
		text-align: center;
		height: 60px;
		line-height: 60px;
	}
	.container{
		overflow: hidden;
	}
	.column{
		text-align: center;
		height: 300px;
		line-height: 300px;
	}
	.left,.right,.main{
		float: left;
	}
	.main{
		width: 100%;
		background-color: #FFE4C4;
	}
	.left{
		width: 200px;
		margin-left: -100%;
		background-color: aquamarine;
	}
	.right{
		width: 150px;
		margin-left: -150px;
		background-color: aquamarine;
	}
	.middle{
		margin: 0 150px 0 200px;
	}
</style>

<div class="header">header</div>
<div class="container">
	<div class="main column">
		<div class="middle">middle</div>
	</div>
	<div class="left column">left</div>
	<div class="right column">right</div>
</div>
<div class="footer">footer</div>

3.圣杯和双飞翼的区别

  • 圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

  • 双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
    多了1个div，少用大致4个css属性（圣杯布局中间divpadding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，一共6个；而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2=4），感觉比圣杯布局思路更直接和简洁一点。

  • 简单说起来就是”双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了