css经典布局 圣杯布局 双飞翼布局 经典写法

我第一次听到这两个布局的时候以为这是两个不一样的布局，但我现在觉得他俩是一样的，就是 左右两栏等宽，中间自适应的布局，没有flex的时候想要实现自适应就需要用一些独特的方法，也就是我今天介绍的经典写法。当然如今实现左右两栏等宽，中间自适应已经很方便啦。后边我会补一种用flex实现的方法

圣杯布局

HTML部分：

		<header></header>
		<main>
			<section class="center">2</section>
			<section class="left">1</section>
			<section class="right">3</section>
		</main>
		<footer></footer>

CSS部分：

• 定义好header和footer的高度，由于是块状元素，因此宽度默认是父元素的100%，所以宽度不用管。
• 在main中的三个元素都要设置左浮动，并设置高度
• 开启main的BFC，防止中间三个浮动元素遮住footer以及清除高度塌陷。
• 三列的左右两列设置宽度200px，中间部分center设置宽度100%
• 由于浮动元素换行，left和right被center挤下去了，
  • 设置left的 margin-left: -100%;，让left回到上一行最左侧
  • 设置right的margin-right: -200px;让right回到上一行的最右边。
• 但是此时left和right遮住了center的部分内容。因此我们设置外边包裹的父元素左右两边的内边距200px，使内容向内压缩。
• 此时left和right依旧遮住了center的部分内容，设置左右两块区域的定位position: relative;，设置距离，使其挪回原来的位置。

			footer,
			header {
				height: 110px;
				background-color: #ADD8E6;
			}

			main *{
				height: 400px;
				float: left;
			}

			main {
				overflow: hidden;
				position: relative;
				padding: 0 200px;
			}

			.center {
				background-color: antiquewhite;
				width: 100%;
			}

			.left {
				background-color: burlywood;
				width: 200px;
				margin-left: -100%;
				position: relative;
				left: -200px;
			}

			.right {
				background-color: chartreuse;
				width: 200px;
				margin-left: -200px;
				position: relative;
				right: -200px;
			}

双飞翼

HTML部分：

		<header></header>
		<main>
			<section class="center">2</section>
		</main>
			<section class="left">1</section>
			<section class="right">3</section>
		<footer></footer>

CSS部分：

• 定义好header和footer的高度，由于是块状元素，因此宽度默认是父元素的100%，所以宽度不用管。
• 给中间三块元素设置高度。
• 三列的左右两列设置宽度200px，中间部分center设置宽度100%，由于中间部分用main包裹住了，因此宽度100%设置给main，而center是块状元素，因此宽度为父元素的100%会自动撑满main 的。
• 设置main，left，right浮动。
• 由于浮动元素换行，left和right被center挤下去了，并且遮住了footer。
  • 可以单独给footer设置一个清除左侧浮动，但是为了减少代码量，我直接给footer和header添加了一个清楚左右两侧浮动。
  • 设置left的 margin-left: -100%;，让left回到上一行最左侧
  • 设置right的margin-right: -200px;让right回到上一行的最右边。
• 此时left和right遮住了center的部分内容。此时布局如下，main和center的宽度都是浏览器视窗的100%，设置给center左右外边距200px即可使其不被遮盖。
  

			footer,
			header {
				height: 110px;
				background-color: #ADD8E6;
				clear: both;
			}

			section {
				height: 400px;
			}

			main {
				width: 100%;
				float: left;
			}

			.center {
				background-color: antiquewhite;
				margin: 0 200px;
			}

			.left {
				background-color: burlywood;
				width: 200px;
				float: left;
				margin-left: -100% ;
			}

			.right {
				background-color: chartreuse;
				width: 200px;
				float: left;
				margin-left: -200px;
			}

flex实现

用flex实现就很简单了
HTML部分跟圣杯布局差不多，但是中间部分不需要挪到最上边了。

		<header></header>
		<main>
			<section class="left">1</section>
			<section class="center">2</section>
			<section class="right">3</section>
		</main>
		<footer></footer>

CSS部分：

• 定义好header和footer的高度，由于是块状元素，因此宽度默认是父元素的100%，所以宽度不用管。
• 给中间三块元素设置高度。
• 给左右两边元素设置固定宽度。
• 给外部包裹的main设置flex布局。
• 让中间部分flex的属性设置为auto。

						footer,
						header {
							height: 110px;
							background-color: #ADD8E6;
						}
			
						section {
							height: 400px;
						}
			
						main {
							display: flex;
						}
			
						.center {
							background-color: antiquewhite;
							flex: auto;
						}
			
						.left {
							background-color: burlywood;
							width: 200px;
						}
			
						.right {
							background-color: chartreuse;
							width: 200px;
						}