css中常见的布局方式

三栏布局

三栏布局是页面中比较常见的布局方式，也有好几种实现方式，分别是flex布局，grid布局，float布局，position定位。
我们先假设左右两栏宽度为300px，中间宽度自适应，整体高度为100px。

1. float布局
这种方式的布局设计之初是为了解决文字环绕的问题，因为浮动后的元素会脱离文档流，使父元素的高度塌陷。
这里注意，使用float布局需要注意DOM结构，left、right需要在center的前面，如果是left-right-center的结构，会造成中间的div占位，会将右边的盒子顶下去。

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

<style>
div {
  height: 200px;
}
.left{
  float: left;
  width: 173px;
}
.right {
  float: right;
  width: 170px;
}
.center {
  margin-left: 100px;
  margin-right: 100px;
}
.main::after {
  conten: "";
  display: block;
  clear: both;
}
</style>

为中间的盒子添加margin值是为了防止中间内容过多时，内容会从左边盒子下方开始显示。最后不要忘了清除浮动，避免对下面的其他布局照成影响。

2. 绝对定位（position）布局
定位理解起来非常容易，就是指定元素边框相对于其正常位置应该出现的位置，或者说父元素、页面浏览器边框。轮播图就是一个典型的使用定位布局的例子。
position有五个值，分别是：

1. static 默认值，参考文档流
2. relative 相对定位，相对于其正常位置进行定位
3. absolute 绝对定位，相对于static定位之外最近的一个父元素进行定位
4. fixed 相对定位，相对于浏览器定位，不随页面的滚动而滚动
5. inherit: 继承父元素的position属性值

知道了所有的属性及其代表的作用，我们就可以进行绝对定位的布局了，这里还有一个口诀叫做： “子绝父相”。相对定位是相对于原本位置进行定位，当位置发生偏移时，原位置留白。

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

<style>
.main {
  position: relative;
}
.left {
  position: absolute;
  left: 100px;
}
.center {
  position: abosolute;
  right: 200px;
  left: 200px;
}
.right {
  position: absolute;
  right: 100px;
}
</style>

3. flex布局
上述的方法都属于比较传统的布局方式，但有些布局结构实现起来并不方便，flex布局的出现，使页面布局变的更加灵活，简单，并且可以做到响应式布局。
flex的属性有很多，这里仅将用到的一些属性加以介绍。结构和上面的定位布局相同，这里就不赘述了。
将任意一容器指定为flex容器，包括行内元素（display: inline-flex）

<style>
.main {
  display: flex;   
  flex-direction: row;
  justify-content: space-between;
}
.left {
  margin-left: 100px;
}
.right {
  margin-right: 100px;
}
</style>

上述代码就是先将容器变成弹性容器，设置主轴排列方向为横向排列，最后定义主轴的排列方式为两端对齐。将左右两列分别左右margin100像素就可以实现一样的效果了。

4. grid布局
栅格布局就是将网页画成一个个的格子，是css布局中一种比较强大的布局方式，但是兼容性较低，因此使用的较为少数。
也是需要将容器变为栅格容器，然后划分行和列，将行划分为100px，一行。而列则是左右各300，中间部分居中显示。

.main {
  display: grid;
  gird-template-rows: 100px;
  grid-template-colums: 300px auto 300px;
}