【前端知识整理】CSS布局 快速居中，两栏布局与三栏布局

1 快速居中对齐的方法

如果在body中有一个给定宽高的div，如何将它居中。

在父元素上设置text-align:center;可以实现子元素的水平居中，同样的，在盒子上设置宽高，并设置margin:垂直 auto也可以实现元素的水平居中。而通过对元素设置行高，也就是line-height属性，便能实现文本的垂直居中

如果想要水平垂直同时局中，可以用到flex弹性布局，给父元素设置flex属性，并在子元素上设置margin:auto;，便能实现元素的水平垂直居中

假定元素的宽高都已经设置，需要添加的代码如下

body{
	display:flex;
}
div{
	margin:auto;
}

2 两栏布局

两栏布局一般是指左右两个盒子在同一行的布局情况。大部分情况可以分为两类，分别是左列定宽，右列自适应和左列不定宽，右列自适应，对于这两种布局情况，也有很多实现的方法

首先有这样一个页面

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

2.1 左列定宽 右列自适应

左列定宽，我们给左列的盒子设置一个width:300px;

2.1.1 浮动+margin方法

让左盒子浮动，设置float:left;，此时右盒子的宽度为100%，会因为左盒子的浮动而被左盒子覆盖左侧300px的部分，只要给右盒子设置一个左边距margin-left:300px;，此时右盒子的宽度会进行自适应，让两个盒子存在于同一行。这样即可实现左列定宽，右列自适应的两栏布局

.left{
    float: left;
}
.right{
    margin-left: 300px;
} 

2.1.2 浮动+BFC

同样的，让左盒子浮动，设置float:left;，这次我们不用margin来实现。我们可以用overflow:hidden;来触发BFC，这样可以让右盒子触发BFC的特性，使右盒子环绕浮动元素，不会被浮动元素覆盖

.left  {
    float: left;
}
.right{
    overflow: hidden;
}

2.1.3 定位（子绝父相）

这是利用了给左盒子进行定位来实现。给父元素container设置position:relative;，然后给左盒子设置position:absolute;，也就是子绝父相的定位。然后给左盒子设置left:0;将其定位到左边。此时，会出现和第一种方法中相似的情况，被绝对定位的左盒子也会覆盖右盒子，所以同样的给右盒子设置一个左边距margin-left:300px;，即可达成需求。在这种情况下不能使用BFC来实现，因为绝对定位的盒子虽然也会覆盖其他元素，但是他们并不是浮动元素，不会触发BFC的特性。同样的，既然左盒子可以利用定位，那么右盒子同样也可以。给右盒子设置绝对定位position:absolute;，然后将它定位到左边，设置left:300px;，这种方式与设置margin的效果一样

.container{
    position: relative;
}
.left{
    position: absolute;
    left: 0;
}
.right{
    margin-left: 300px;
}
/*.right{
    position: absolute;
    left: 300px;
}*/

2.1.4 flex

flex是一个很强大的布局方式，并且实现起来也非常简单。给父元素设置成flex布局display:flex;，然后在右盒子中设置flex属性flex:1;，这样可以让右盒子填充容器中的剩余空间，也可以实现两栏布局

.container{
	display: flex;
}
.right{
	flex: 1;
}

2.1.5 浮动+负外边距

这种方法比较特殊，需要修改一下dom结构，修改后结构如下

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

首先同样的给左盒子设置浮动float:left;，然后这一次我们给content这个盒子设置宽度100%width:100%;，同时也设置浮动float:left;，此时content这个盒子会由于容器宽度不够被挤到下一行。此时给左盒子设置一个负的右外边距margin-right:-100%;，那么content会回到上一行并覆盖整个左盒子。由于右盒子是content的子元素，所以会占满整个content，那么此时给右盒子设置一个左外边距margin-left:300px;，由于content没有设置颜色，所以右盒子将会在content的左侧留下一个宽度为300px的透明区域，此时被覆盖的左盒子就显示出来了

.left{
	float: left;
	margin-right: -100%;
}
.content{
	width: 100%;
	float: left;
}
.right{
	margin-left: 300px;
}

2.1.6 table

table布局也是一种很方便的布局方式，首先给父元素container设置成table布局display:table;，并给它设置宽度width:100%;，然后给左右两个盒子都设置一个属性display:table-cell;，此时如果左盒子没有设置宽度，那么两个盒子将会平分容器的宽度。而这里左盒子设置了300px的宽度，那么右盒子将会自适应占据剩余的宽度（必须给父盒子设置宽度，否则此时右盒子将会没有宽度可分），从而实现两栏布局。

.container{
	display: table;
	width: 100%;
}
.left,.right{
	display: table-cell;
}

2.2 左列不定宽 右列自适应

这种情况下的布局方式跟定宽的方式有可以通用的地方，但不是之前的所有方法都能在这里适用。能够适用的方法只有flex布局和浮动+BFC的方法。这样可以让左盒子根据自己盒子内的内容来决定自适应自己的宽度，然后让右盒子根据容器内剩余的宽度进行自适应，去掉之前左盒子的宽度即可，具体方法不再赘述。

3 三栏布局

三栏布局一般情况是同一行有三个盒子，左右两个盒子都定宽，中间盒子自适应。有以下几种方法来实现，dom结构如下所示

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

3.1 浮动+margin

类似于两栏布局中用到的方法，给左右两个固定宽度的盒子都设置为浮动，分别为左右浮动float:left;和float:right;，此时主盒子main会被左右两端的盒子覆盖。这时给主盒子添加一个300px的左外边距和右外边距margin-left: 300px;，margin-right: 300px;，可以简写为margin: 0 300px;将两边的区域空出来，即可实现三栏布局。

.left{
	float: left;
}
.right{
	float:right;
}
.main{
	margin-left: 0 300px;
}

3.2 浮动+BFC

同样类似于两栏布局中用到的方法，给左右两个固定宽度的盒子都设置为浮动，分别为左右浮动float:left;和float:right;，这次我们用到BFC的方法来解决覆盖问题。给主盒子设置overflow:hidden触发BFC，这样可以让主盒子触发BFC的特性，使主盒子环绕浮动元素，不会被浮动元素覆盖

.left{
	float: left;
}
.right{
	float:right;
}
.main{
	overflow:hidden;
}

3.3 flex

两栏布局中也用到了flex布局的方法，在这里可以将主盒子设置一个flex:1;，但需要注意的是，使用flex布局时，dom元素的先后顺序非常重要。在这个样例中，主盒子在左盒子和右盒子的中间，所以dom结构应该修改成这样

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

或者也可以不修改dom，使用css中的order来完成，只需要将右盒子和主盒子的位置调换，给主盒子和右盒子都加上order属性，并保证主盒子的order小于右盒子，值不一定是1和2，只要小于就行

.main{
	order: 1;
}
.right{
	order: 2;
}

然后再加上flex布局的设置，这里不再赘述，直接看代码

.container{
	display: flex;
}
.main{
	flex: 1;
}

3.4 table

同样在两栏布局中提到过，直接看代码，table布局也同样要注意一下dom的先后顺序，以及父元素必须设置宽

.container{
	display: table;
	width: 100%;
}
.main,.right,.left{
	display: table-cell;
}

3.5 定位

还是和两栏布局类似的方法，直接看代码

.container{
	position: relative;
}
.left{
	position: absolute;
	left: 0;
}
.right{
	position: absolute;
	right: 0;
}
.main{
	margin: 0 300px;
}
/* .main{
	position: absolute;
	left: 300px;
} */

3.6 圣杯布局

这个布局要以主盒子为主，所以需要把它放到最前面

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

我们先给所有的盒子（左盒子，主盒子和右盒子）都设置左浮动float: left;，再给主盒子设置一个宽度width:100%;，这时左右盒子会被挤到下一行。这时，我们给外面的父元素container设置一个左右边距margin:0 300px;，分别为左右盒子的宽，这里左右宽度一样就简写了。此时主盒子会被挤成我们想要的样子。那么怎么让下面的左右盒子回到上一行呢？我们给左右盒子分别加上负外边距，即margin-left:-100%;和margin-left:-300px;。此时左右盒子会分别覆盖主盒子的左右两边各300px。要让左右盒子移动到两边的空白区域，可以用到相对定位。给左右盒子都加上相对定位position:relative;，然后设置定位left:-300px;和right:-300px;,即可实现三栏布局

.main,.right,.left{
	float: left;
}
.container{
	margin: 0 300px;
}
.main{
	width: 100%;
}
.left{
	position: relative;
	left: -300px;
	margin-left: -100%;
}
.right{
	position: relative;
	right: -300px;
	margin-left: -300px;
}

3.7 双飞翼布局

这个布局综合了圣杯布局与浮动+负外边距方法的特性，让我们先回到圣杯布局的最后一步，此时需要将左右盒子移动到两边的空白区域，但是此时如果没有container这个容器，那么将不能使用相对定位来实现。这时我们可以给主盒子加一个父元素content，dom结构如下

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

此时的情况应该是左右盒子在正确的位置，但主盒子的宽占据了整个页面，左右盒子分别覆盖了主盒子的左右两边各300px。之前也处理过一样的情况。此时我们需要将主盒子的宽度width:100%;和浮动float:left;移动到它的父元素content上，然后给主盒子设置左右外边距margin:0 300px;。这样就能将主盒子的两边压缩，避免被覆盖

.content,.right,.left{
	float: left;
}
.content{
	width: 100%;
}
.main{
	margin: 0 300px;
}
.left{
	margin-left: -100%;
}
.right{
	margin-left: -300px;
}

3.8 grid

grid布局也称网格布局，它的功能非常强大，使用起来也非常简单，但使用时要注意dom元素的先后顺序，给父元素设置grid布局display:grid;，然后可以利用grid-template-rows;设置格子高度，利用grid-template-columns;设置格子宽度，其中有几个参数就代表有几个格子，每个格子会分别被一个元素占据，如果格子不够，会将元素挤到下一行。显而易见，实现三栏布局的代码如下

.container{
	display: grid;
	grid-template-rows: 300px auto 300px;
}