CSS中常见的布局方式

面试被问到了三列布局的实现，只回答出来了float、Position

三列布局

实现三列布局通常是两列定宽，一列自适应，在这里主要讲两侧定宽，中间自适应的布局：

浮动实现三列布局

1. float + margin
   使用float浮动实现，脱离了文档流，所以middle一定要放在三列元素的最后面
   <div class="left">left</div><div class="right">right</div><div class="mid">mid</div>
   缺点： 文字出现，布局会变得混乱，导致扩展性不好
   设置： 左右设置float，中间设置margin

.left{
  width: 80px
  height: 200px
  float: left
}
.right{
  width: 80px
  height: 200px
  float: right
}
.mid{
  margin-left: 90px
  margin-right: 90px
  height: 200px
}

2. flex实现

父元素display： flex， 中间flex： 1自适应
<div class="container"><div class="left">left</div><div class="middle">mid</div><div class="right">right</div></div>

.container{
  display: flex
}
.left,.right{
  width: 80px
  height: 100px
}
.middle{
  flex: 1
  margin-left: 10px
  margin-right: 10px
}

3. grid实现
   parent的div设置display: grid,设置grid-template-columns属性，固定左右的宽度，中间auto
   <div class="container"><div class="left">left</div><div class="middle">mid</div><div class="right">right</div></div>

.container{
  display: grid
  width: 100%
  grid-template-rows: 30px
  grid-template-columns: 80px auto 80px
}
.middle{
  margin-left: 10px
  margin-right: 10px
}

4. 圣杯布局实现
   <div class="container"><div class="middle">mid</div><div class="left">left</div><div class="right">right</div></div>

.container{ 
  overflow: hidden;
  padding: 0px 80px;
}
.left{
  width: 80px
  height: 200px
  margin-left: -100%
  position: relative
  left: -80px
}
.right{
  width: 80px
  height: 200px
  margin-left: -80px
  position: relative
  left: 80px
}
.middle{
  width: 100%
}
.middle, .left, .right{
  float: left
  padding-bottom: 10000px
  margin-bottom: -10000px
}

之前介绍过Flex布局，但CSS中的布局方式还有很多，主要有如下六种：

• Flex布局
• 圣杯布局
• 双飞翼布局
• 绝对定位布局
• 表格布局
• 网格布局

一、Flex布局

CSS3提供的一种方便的布局方式 display：flex

二、圣杯布局

简介： 布局从上到下分为header、container、footer， 然后container部分定为三栏布局。这种布局方式同样分为三栏。圣杯布局的缺陷在于center是在container的padding中的，因此宽度小的时候会出现混乱。

三、双飞翼布局

简介： 给center部分包裹了一个main通过设置margin主动把页面撑开

四、绝对定位布局

简介： 给container设置position: relative 和 overflow: hidden， 因为绝对定位的元素的参照物是第一个position不为static的祖先元素。左边部分设置float: left 右边部分设置float: right，中间设置absolute定位，通过设置左右两部分把两边撑开。center设置top：0 和 bottom: 0 使其高度撑开。

五、表格布局

简介： 表格布局的好处是三栏的高度统一

六、网格布局

简介： 借助网格的属性，可能是最强大的布局方式，使用极其方便，但是兼容性不好。网格布局可以将页面分割成为多个区域，或者用来定义内部元素的大小、位置、图层关系。