写一下CSS布局
布局是什么？
把页面分成一块一块，按左中右，上中下等排列。如图：
布局总共可以分为三类：
固定宽度布局
一般宽度为960px/1000px/1024px
不固定宽度布局
主要靠文档流的原理来布局，因为在文档流中，本身就是自适应的
响应式布局
手机上用不固定宽度布局，在pc上固定宽度布局，这是一种混合的布局。
布局要用的技术
按照图片所示，如果需要兼容ie,则我们用float布局，如果不需要兼容，直接flex,想秀一秀技术的，grid走起。
float布局
- 子元素加上float和width 2.父元素上加clearfix类
.clearfix{
clear:both;
content:"";
display:block;
}
这样就好了。
注意
* 在float布局中，一般最后一个元素是不设置width的
* 在IE6/7中，因为有双倍margin bug，所以需要记一下解决的办法：1.将IE6/7的margin减半。2.将块的display设置为inline-block
一般来说，只用float解决PC的需求，如果是移动端，那直接用flex。 这是我用float写的页面布局页面布局
flex布局
flex布局就简单很多了，而且现在移动端的适配性已经很高了
就算是万恶的微软，都已经变成黄色支持度了，证明直接在移动端用就完事了！
接下来好好介绍一下flex布局，之后大部分情况都是用这个布局:
container
首先，想要使用flex，我们就需要一个容器，英语叫做container,专门就是为了包裹flex而产生的，代码上的表示是display:flex，这样我们就做出了一个flex容器。
在这个container中，里面的一个个div就是一个个items,实际上，我们做flex其实就是对里面的items进行排序而已。
而这里面的items遵守flex的相应规则，也就是弹性规则。
常见的操作
flex-direction:row | row-reverse | column | column-reverse
这段代码用来改变flex的流动的方向，row是按行流，column是按照列流动
justify-content:flex-start | flex-end | center | space-around | space-between
这个做水平布局，效果如图
align-items:flex-end | flex-start | center | stretch | baseline
这个用来作垂直布局，效果如图
align-content:flex-start | flex-end | center | strech | space-between | space-around
如果有多个div的情况，想要将它们放在一起或是怎么样，就用这个做布局。
效果如下：
以上是针对一大段的，如果只是其中的一小块，怎么写呢？也就是针对flex item
.parent{
display:flex;
jusity-content:center;
}
.child{
flex-self:flex-end;
}
flex的相关还有很多，相信说了这么多，还是记不住，没关系，这边有个游戏，每次不记得了，就去刷一遍，就全部都会了小青蛙游戏
grid布局
最后是介绍以下grid布局，这个现在的兼容性还不是特别好，请看caniuse上面的兼容性显示：
所以请酌情使用
这个也是一样，一个游戏，写完就全部都会了。土地规划小游戏
布局就写到这里，不过这只是一个大致的布局设置，详细的还没说完，请看下文———垂直水平居中
