HTML+CSS | 网页二、三栏布局(圣杯/双飞翼布局) + 水平垂直居中

一、两栏布局，左侧占30%宽度，右侧占70%宽度

基本的 HTML结构

<div class="container">
	<div class="aside">aside 宽度30%</div>
	<div class="main">main  宽度70%</div>
</div>

1. Float方法

.container {
	overflow: hidden;
}
.aside {
	width: 30%;
	height: 100px;
	background-color: #6CBBFC;
	float: left;
}
.main {
	width: 70%;
	height: 100px;
	background-color: #50FF00;
	float: left;
}

2. Position方法

.aside {
	width: 30%;
	height: 100px;
	background-color: #6CBBFC;
	position: absolute;
	top: 0;
	left: 0;
}
.main {
	width: 70%;
	height: 100px;
	background-color: #50FF00;
	margin-left: 30%;
}

3.Flexbox方法

.container {
	display: flex;
}
.aside {
	flex: 1 30%;
	height: 100px;
	background-color: #6CBBFC;
}
.main {
	flex: 1 70%;
	height: 100px;
	background-color: #50FF00;
}

效果如图（自适应）

二、两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化

基本的HTML结构

<div class="container">
	<div class="aside">aside 左侧固定</div>
	<div class="main">main  右侧自适应</div>
</div>

1.Float方法

利用浮动，左边元素宽度固定 ，设置向左浮动。将右边元素的 margin-left 设为固定宽度 。注意，因为右边元素的 width 默认为 auto ，所以会自动撑满父元素。

.aside {
	width: 300px;
	height: 100px;
	background-color: #6CBBFC;
	float: left;
}
.main {
	height: 100px;
	background-color: #50FF00;
	margin-left: 300px;
}

2.Position方法1

利用绝对定位，父级元素设为相对定位。左边元素 absolute 定位，宽度固定。右边元素的 margin-left 的值设为左边元素的宽度值。

.container {
	position: relative;
	height: 100px;
}
.aside {
	width: 300px;
	height: 100px;
	background-color: #6CBBFC;
	position: absolute;
	top: 0;
	left: 0;
}
.main {
	height: 100px;
	background-color: #50FF00;
	margin-left: 300px;
}

3.Position方法2

利用绝对定位，父级元素设为相对定位。左边元素宽度固定，右边元素 absolute 定位， left 为宽度大小，其余方向定位为 0 。

.container {
	position: relative;
	height: 100px;
}
.aside {
	width: 300px;
	height: 100px;
	background-color: #6CBBFC;
}
.main {
	height: 100px;
	background-color: #50FF00;
	position: absolute;
	left: 300px;
	top: 0;
	right: 0;
	bottom: 0;
}

4.Flexbox方法

利用 flex 布局，左边元素固定宽度，右边的元素设置 flex: 1 。

.container {
	display: flex;
	height: 100px;
}
.aside {
	width: 300px;
	height: 100px;
	background-color: #6CBBFC;

}
.main {
	flex: 1; 
	height: 100px;
	background-color: #50FF00;
}

5.左float，右overflow（BFC）

同样利用浮动，左边元素宽度固定 ，设置向左浮动。右侧元素设置 overflow: hidden; 这样右边就触发了 BFC ，BFC 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。

.aside {
	width: 300px;
	height: 100px;
	float: left;
	background-color: #6CBBFC;

}
.main {
	height: 200px;
	background-color: #50FF00;
	overflow: hidden;
	
}

效果如图

三、两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化

基本的 HTML结构

<div class="container">
	<div class="aside">aside  右侧固定</div>
	<div class="main">main 左侧自适应</div>		
</div>

1.Float方法

.aside {
	width: 300px;
	height: 100px;
	background-color: #6CBBFC;
	float: right;
}
.main {
	height: 100px;
	background-color: #50FF00;
}

2.Position方法

.aside {
	width: 300px;
	height: 100px;
	background-color: #6CBBFC;
	position: absolute;
	top: 0;
	right: 0;
}
.main {
	height: 100px;
	background-color: #50FF00;
	margin-right: 300px;
}

3.Flexbox方法

HTML结构（调换了main和aside的顺序）

<div class="container">
	<div class="main">main 左侧自适应</div>	
	<div class="aside">aside  右侧固定</div>		
</div>

.container {
	display: flex;
}
.aside {
	width: 300px;
	height: 100px;
	background-color: #6CBBFC;
	flex: 0 0 auto;
}
.main {
	height: 100px;
	background-color: #50FF00;
	flex: 1 1 auto;
}

效果如图

四、三栏布局，左右两侧固定宽度，中间宽度自适应变化

1. 圣杯布局和双飞翼布局的目的：

• 三栏布局，中间一栏最先加载和渲染（内容最重要，这就是为什么还需要了解这种布局的原因）。
• 两侧内容固定，中间内容随着宽度自适应。
• 一般用于 PC 网页。

2. 两种布局的特点：

• 使用 float 布局。
• 两侧使用 margin 负值，以便和中间内容横向重叠。
• 防止中间内容被两侧覆盖，圣杯布局用 padding ，双飞翼布局用 margin 。

1. 圣杯布局

<!--圣杯布局重点结构就是中间的部分 顺序是center排在最前面 方面后面调整left right位置
    因为left right都排在center后面 这样很容易调整上去 如果left right排在center前面 很难调整位置
--> 
<div id="container" class="clearfix">
  <p class="center">我是中间</p>
  <p class="left">我是左边</p>
  <p class="right">我是右边</p>
</div>

#container {
  padding-left: 200px;
  padding-right: 150px;
  overflow: auto;
}
#container p {
  float: left;
}
.center {
  width: 100%;
  background-color: lightcoral;
}
.left {
  width: 200px;
  background-color: lightcyan;
  /*-100% 百分比是以父元素的宽度计算 向左100%是走到父元素的左边界*/
  margin-left: -100%;
  /*再向左走一个left这个盒子的宽度 正好填补左边的空缺*/
  position: relative;
  left: -200px;
  
}
.right {
  width: 150px;
  background-color: lightgreen;
  /*margin-right的对齐标准是自身 在这里如果用margin-left*/ 
 /*会造成盒子直接对齐父元素的右边界*/
 /*是因为margin-left的对齐标准是父元素*/
  margin-right: -150px;
  
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

2. 圣杯布局(float + 负margin)详细讲解

<div id="content">
	<div class="main">main</div>
	<div class="sub">left</div>
	<div class="extra">right</div>	
</div>

.sub {
	width: 190px;
	height: 500px;
	float: left;
	background-color: #FFF68F;
}
.extra {
	width: 230px;
	height: 500px;
	float: left;

	background-color: #6CBBFF;
}
.main {
	width: 100%;
	height: 500px;
	float: left;
	background-color: #50FF00;
}

主面板设置宽度为100%，主面板与两个侧栏都设置左浮动，这时两个侧栏会被主面板挤下去。
要实现一行三列的效果，就要通过负边距将浮动的侧栏拉上来，左侧栏的负边距为100%，刚好是窗口的宽度，因此会从主面板下面的左边跑到与主面板对齐的左边，右侧栏此时浮动在主面板下面的左边，设置负边距为负的自身宽度，刚好浮动到主面板对齐的右边。

添加代码

.sub {
	.....
	margin-left: -100%;
	....
}
.extra {
	......
	margin-left: -230px;
	.......
}

效果如图

左右侧栏都上去了，但是有一个问题，主面板的内容被遮挡住了，就像这样

为了避免侧栏遮挡主面板内容，在外层设置左右padding值为左右侧栏的宽度，给侧栏腾出空间，此时主面板的宽度减小。

添加代码

#content {
	padding: 0 230px 0 190px;
}

效果如图

为了好理解，我给body加了个背景颜色，能够看得清楚。由于侧栏的负margin都是相对主面板的，两个侧栏并不会像我们理想中的停靠在左右两边，而是跟着缩小的主面板一起向中间靠拢。此时使用相对布局，调整两个侧栏到相应的位置。

添加代码

.sub {
	.....
	position: relative;
	left: -190px;      //自己的宽度
	....
}
.extra {
	......
	position: relative;
	right: -230px;      //自己的宽度
	.......
}

效果如图

这样就实现了一行三列，两边固定，中间自适应的布局。

布局步骤:

• 三者都设置向左浮动。
• 设置main宽度为100%，设置两侧栏的宽度。
• 设置 负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。
• 设置content的padding值给左右两个子面板留出空间。
• 设置两个子面板为相对定位，sub的left值为负的sub宽度，extra的right值为负的extra宽度。

完整代码

<div id="content">
	<div class="main">main</div>
	<div class="sub">left</div>
	<div class="extra">right</div>	
</div>

#content {
	padding: 0 230px 0 190px;
}
.sub {
	width: 190px;
	height: 500px;
	float: left;
	margin-left: -100%;
	position: relative;
	left: -190px;
	background-color: #FFF68F;
}
.extra {
	width: 230px;
	height: 500px;
	float: left;
	margin-left: -230px;
	position: relative;
	right: -230px;
	background-color: #6CBBFF;
}
.main {
	width: 100%;
	height: 500px;
	float: left;
	background-color: #50FF00;
}

一些说明

• DOM元素的书写顺序不得更改。主-左-右
• 主面板部分优先渲染（一般主面板会比侧栏内容重要）。
• 当面板的main内容部分比两边的子面板宽度小的时候，布局就会乱掉。可以通过设置body的min-width属性或使用双飞翼布局避免问题。
• 二列的实现方法
  如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的padding-right值，其他操作相同。反之亦然。

3. 双飞翼布局

原理说明：
双飞翼布局和圣杯布局的思想有些相似，都利用了浮动和负边距，但双飞翼布局在圣杯布局上做了改进，在main元素上加了一层div, 并设置margin,由于两侧栏的负边距都是相对于main-wrap而言，main的margin值变化便不会影响两个侧栏，因此省掉了对两侧栏设置相对布局的步骤

布局步骤:

• 三者都设置向左浮动。
• 设置main-wrap宽度为100%，设置两个侧栏的宽度。
• 设置 负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。
• 设置main的margin值给左右两个子面板留出空间。

<!--同样也是center在最前面 不过这次需要用margin隐性的扩展自己的边界,所以需要一个center-wrap
-->
<div id="main" class="float">
  <div id="main-wrap">main</div>
</div>
<div id="left" class="float">left</div>
<div id="right" class="float">right</div>

.float {
  float: left;
}
#main {
  width: 100%;
  height: 200px;
  background-color: lightpink;
}
#main-wrap {
 /*用margin隐性的扩展自己的边界*/
  margin: 0 190px 0 190px;
}
#left {
  width: 190px;
  height: 200px;
  background-color: lightsalmon;
  margin-left: -100%;
}
#right {
  width: 190px;
  height: 200px;
  background-color: lightskyblue;
  /*这次因为父元素的边界被扩展了 所以用margin-left就可以达到效果*/
  margin-left: -190px;
}

一些说明

• 主面板部分优先渲染（一般主面板会比侧栏内容重要）。
• 圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。
• 双飞翼布局不用设置相对布局，以及对应的left和right值。
• 通过引入相对布局，可以实现三栏布局的各种组合，例如对右侧栏设置position: relative; left: 190px;,可以实现sub+extra+main的布局。
• 二列的实现方法
  如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置main的margin-right值，其他操作相同。反之亦然。

3. 其他格式的三栏布局

基本的HTML结构（先写两侧栏，再写主面板）

<div class="container">
	<div class="left">left 左侧固定</div>
	<div class="right">right  右侧固定</div>	
	<div class="main">main 中间自适应</div>			
</div>

1.float+margin

原理说明：设置两个侧栏分别向左向右浮动，中间列通过外边距给两个侧栏腾出空间，中间列的宽度根据浏览器窗口自适应。

.main {
	height: 100px;
	margin: 0 200px;
	background-color: #50FF00;
}
.left {
	width: 200px;
	height: 100px;
	float: left;
	background-color: #6CBBFC;
}
.right {	
	width: 200px;
	height: 100px;
	float: right;		
	background-color: #FFF60B;
}

一些说明:

• 注意DOM文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列（圣杯布局和双飞翼布局都会用到）。
• 这种布局方式比较简单明了，但缺点是渲染时先渲染了侧边栏，而不是比较重要的主面板。
• 二列的实现方法
  如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的margin-right值，其他操作相同。反之亦然。

2.position+margin

.left {
	width: 200px;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #6CBBFC;
}
.main {
	height: 100px;
	margin: 0 200px;
	background-color: #50FF00;
}
.right {	
	width: 200px;
	height: 100px;
	position: absolute;
	top: 0;
	right: 0;	
	background-color: #FFF60B;
}

一些说明:

• 本方法不限制DOM书写顺序，先写主面板会使主面板部分优先渲染（一般主面板会比侧栏内容重要）。
• 与上一种方法相比，本种方法是通过定位来实现侧栏的位置固定。
• 如果中间栏含有最小宽度限制，或是含有宽度的内部元素，则浏览器窗口小到一定程度，主面板与侧栏会发生重叠。
• 二列的实现方法
  如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的margin-right值，其他操作相同。反之亦然。

3.Flexbox方法

HTML结构（左中右）

<div class="container">
	<div class="left">left 左侧固定</div>
	<div class="main">main 中间自适应</div>			
	<div class="right">right  右侧固定</div>			
</div>

.container {
	display: flex;
}
.left {
	width: 200px;
	height: 100px;
	background-color: #6CBBFC;
}
.main {
	height: 100px;
	flex: 1;
	background-color: #50FF00;
}
.right {	
	width: 200px;
	height: 100px;		
	background-color: #FFF60B;
}

效果如图

五、三栏布局，左侧固定宽度，中间固定宽度，右侧宽度自适应变化

基本的HTML结构

<div class="container">
	<div class="left">left 左侧固定</div>
	<div class="main">main 中间固定</div>	
	<div class="right">right  右侧自适应</div>		
</div>

1.Float方法

.left {
	width: 200px;
	height: 100px;
	float: left;
	background-color: #6CBBFC;
}
.main {
	width: 500px;
	height: 100px;
	float: left;
	background-color: #50FF00;
}
.right {
	height: 100px;
	margin-left: 700px;
	background-color: #FFF60B;
}

2.Position方法

.left {
	width: 200px;
	height: 100px;
	background-color: #6CBBFC;
}
.main {
	width: 500px;
	height: 100px;
	position: absolute;
	top: 0;
	left: 200px;
	background-color: #50FF00;
}
.right {	
	width: calc(100% - 700px);	
	height: 100px;
	margin-left: 700px;
	position: absolute;
	top: 0;
	background-color: #FFF60B;
}

3.Flexbox方法

.container {
	display: flex;
}
.left {
	width: 200px;
	height: 100px;
	flex: 0 0 auto;
	background-color: #6CBBFC;
}
.main {
	width: 500px;
	height: 100px;
	flex: 0 0 auto;
	background-color: #50FF00;
}
.right {	
	flex: 1;
	height: 100px;
	background-color: #FFF60B;
}

效果如图

六、 网页布局

1. 单列布局

常见的单列布局有两种：

• 一种是header、content、footer宽度都相同，其一般不会占满浏览器的最宽宽度，但当浏览器宽度缩小低于其最大宽度时，宽度会自适应。
• 一种是header、footer宽度为浏览器宽度，但content以及header和footer里的内容却不会占满浏览器宽度。

1. 第一种是对header、content、footer统一设置max-width，并通过margin: 0 auto实现居中。

<!-- header、content、footer宽度都相同，其一般不会占满浏览器的最宽宽度，但当浏览器宽度缩小到低于其最大宽度时，宽度会自适应. -->
	<div class="layout">
		<div id="header">头部</div>
		<div id="content">内容</div>
		<div id="footer">尾部</div>
	</div>

.layout {
	/*width: 960px;  设置width当浏览器窗口宽度小于960px时，单列布局不会自适应 */
	max-width: 960px;
	margin: 0 auto;
}
#header {
	height: 50px;
	background-color: #FFF68F;
}
#content {
	height: 500px;
	background-color: #6CBBFF;
}
#footer {
	height: 30px;
	background: #50FF50;
}

2. 第二种是header、footer的内容宽度为100%，但header、footer的内容区以及content统一设置max-width，并通过margin:0 auto实现居中。

<div id="header">
	<div class="layout">头部</div>
</div>
<div id="content" class="layout">内容</div>
<div id="footer">
	<div class="layout">尾部</div>
</div>

.layout {
	/*width: 960px;  设置width当浏览器窗口宽度小于960px时，单列布局不会自适应 */
	max-width: 960px;
	margin: 0 auto;
}
#header {
	height: 50px;
	background-color: #FFF68F;
}
#content {
	height: 500px;
	background-color: #6CBBFF;
}
#footer {
	height: 30px;
	background: #50FF50;
}

2. 多列布局 (在1-5节)

七、水平、垂直居中

1. 水平居中

子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。

1.1 子元素为行内元素

子元素为行内元素，可以将父元素样式添加text-align: center; 来使子元素水平居中对齐。

<div class="parents">
	<span class="child">子元素为行内元素，对父元素设置text-align:center;</span>
</div>

.parents {
	width: 500px;
	height: 100px;
	background-color: #FFF68F;
	text-align: center;
}

1.2 子元素为定宽块状元素

若子元素是为定宽的块级元素，在子元素样式添加margin:0 auto;

<div class="parents">
	<div class="child">子元素定宽块状元素: 设置子元素左右margin值为auto;</div>
</div>

.parents {
	width: 500px;
	height: 200px;
	background-color: #FFF68F;
}
.child {
	width: 200px;
	height: 100px;
	background-color: #6CBBFF;
	margin: 0 auto;
}

1.3 不定宽块状元素

设置子元素为display:inline;或者display: inline-block; 然后在父元素上设置text-align:center;

<div class="parents">
	<div class="child">
		设置子元素为display:inline,然后在父元素上设置text-align:center;
	</div>
</div>

.parents {
	width: 600px;
	height: 100px;
	background-color: #FFF68F;
	text-align: center;
}
.child {
	background-color: #6CBBFF;
	display: inline-block;
	/*display: inline;*/    
}

1.4 flex布局

flex无论是块级元素还是行内元素都可实现水平居中，对父元素设置display:flex;justify-content:center;

a. 块级元素水平居中

<div class="parents">
	<div class="child">
		flex布局，对父元素设置display:flex;justify-content:center;
	</div>
</div>

.parents {
	width: 500px;
	height: 200px;
	background-color: #FFF68F;
	display: flex;
	justify-content: center;
}
.child {
	width: 300px;
	height: 100px;
	background-color: #6CBBFF;	
}

b. 行内元素水平居中

<div class="parents">
	<span class="child">
		我是span元素哦
	</span>
</div>

.parents {
	width: 500px;
	height: 200px;
	background-color: #FFF68F;
	display: flex;
	justify-content: center;
}
.child {
	background-color: #6CBBFF;	
}

2. 垂直居中

垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。

2.1 子元素为单行内联文本

为父元素设置height与line-height一致，实现子元素垂直居中

<div class="parents">
	<p class="child">
		父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height
	</p>
</div>

.parents {
	width: 800px;
	height: 100px;
	line-height: 100px;
	background-color: #FFF68F;		
}

2.2 子元素为多行内联文本

设置父元素为display:table-cell，再设置vertical-align:middle;

<div class="parents">
	<p class="child">
		<span>父元素一定，子元素为多行内联文本：</span>
	</p>
	<p class="child">设置父元素的display:table-cell，再设置vertical-align:middle;</p>
	<p class="child">设置父元素的display:table-cell，再设置vertical-align:middle;</p>
</div>

.parents {
	width: 800px;
	height: 100px;
	background-color: #FFF68F;
	display: table-cell;     
	vertical-align: middle;
}

2.3 子元素为块级元素

父元素设置为相对定位，子元素设置为绝对定位，top:0; bottom: 0; margin: auto;

<div class="parents">
	<div class="child">
		<span>块级元素：</span>
		设置子元素position:absolute 并设置top、bottom为0，父元素要设置定位为static以外的值，margin:auto;
	</div>
</div>

.parents {
	width: 800px;
	height: 100px;
	background-color: #FFF68F;
	position: relative;		
}
.child {
	height: 60px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	background-color: #6CBBFF;
}

3. 水平垂直居中

3.1 绝对定位1

利用绝对定位，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 translate 来调整子元素的中心点到父元素的中心。该方法可以不定宽高。

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

3.2 绝对定位2

利用绝对定位，子元素所有方向都为 0 ，将 margin 设置为 auto ，由于宽高固定，对应方向实现平分，该方法必须盒子有宽高。

.father {
  position: relative;
}
.son {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  height: 100px;
  width: 100px;
}

3.3 绝对定位3

利用绝对定位，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 margin-left 和 margin-top 以子元素自己的一半宽高进行负值赋值。该方法必须定宽高。

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
}

3.4 flex

利用 flex ，最经典最方便的一种了，不用解释，定不定宽高无所谓的。

.father {
  display: flex;
  justify-content: center;
  align-items: center;
}

还有其他很多方法，推荐文章：面试官：你能实现多少种水平垂直居中的布局（定宽高和不定宽高）。