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

CSS中的各种布局方法

      • 1 快速居中对齐的方法
      • 2 两栏布局
        • 2.1 左列定宽 右列自适应
          • 2.1.1 浮动+margin方法
          • 2.1.2 浮动+BFC
          • 2.1.3 定位(子绝父相)
          • 2.1.4 flex
          • 2.1.5 浮动+负外边距
          • 2.1.6 table
        • 2.2 左列不定宽 右列自适应
      • 3 三栏布局
        • 3.1 浮动+margin
        • 3.2 浮动+BFC
        • 3.3 flex
        • 3.4 table
        • 3.5 定位
        • 3.6 圣杯布局
        • 3.7 双飞翼布局
        • 3.8 grid

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

你可能感兴趣的:(css,css,前端,css3)