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;
						}