#布局的分类：
1.固定式布局：一般宽度为960/1000/1024px
2.不固定布局：主要靠文档流原理来布局（如span）
#样式的一些规则：尽量不要写死宽高
#使用什么css布局？
- 如果需要兼容IE9，使用float布局，必要时使用-margin
- 只兼容最新浏览器，用grid布局
- 不需要兼容IE9，不需要兼容最新浏览器，用flex，必要时使用-margin，相当于拉宽了。
#float布局：
- 子元素上加float：left和width
- 在父元素上加.clearfix(一定要加)
.clearfix的代码如：
.clearfix::after{content:'';
display:bolck;
clear:both}
#例行写上的代码是：
*{margin:0;padding:0;box-sizing:border-box;}
**一般最后的一个可以不设width，或者设置一个max-width
**小笔记：border是尽量地放宽自己，如果需要尽量缩窄，可以添加display:inline-block
**小笔记，如果发现图片下面有多余的东西，需要添加代码：vertical-align：top；
有时候border会干扰你的宽度，可以通过删除border或者加outline（不占像素）解决
flex布局：
**container(容器，一般作为父元素),**items（项）
让一个元素变成flex容器
.container{
display:flex;一定要有
flex-direction:column/*可以让item竖起来,row是从左往右，row-reverse从右往左，collumn-reverser从下往上
flex-wrap:nowrap(不折行)|wrap（折行）|wrap-reverse从下往上折;
justify-content:center(中间，简写jc)，end(从右边靠)，space-between（把空间放在item中间），space-around（空间围绕item），flex-start（从左边靠）
align-items：center三个并排的item的在竖直方向上对齐
align-items：stretch：一样高，延伸的意思
align-content：flex-start：（往上顶，把多余空间往下放）|center（把多余的行高放两边）|stretch（空间分配到每个item下面，有点平均的感觉）|space-between（空间平均放在item中间，而且最后item可以触底）|spcae-around（空间围绕item）|flex-end(往下放)
}
item样式：
** 第一个孩子（冒号：前后不能空格）： .item:first-child{**
** order:100(可以规定item排在第几，默认order都是零，数最小排最前，负数**
**有效) **
** flex-grow：1（分一份）**
}
** 第二个孩子：.item:nth-child(2){**
** flex-grow：2（如果有多余的空间，分两份给child2）**
** flex-shrink：4（当空间不够时，child2瘦得更快，默认值是1，0就是不变）**
}
最后孩子：.item:last-child{
}
可以让某一个item鹤立独行，就是在其中添加align-self：flex-end
#grid布局：
** 定义：.container{**
** grid-template-column:40px 50px auto 50px 40px;**
** grid-template-columns:repeat(8,120px),repeat创建8个120px列**
** 另外的用法：**
grid-template-columns: 50px repeat(3, 1fr) 50px; repeat(3,1fr)中间的区域平均分成3份
** grid-template-rows:25% 100px auto;**
** grid-gap:12px；可以设置之间的空隙距离**
** grid-template-columns:1fr 5fr (一行分成6分，第一个区域占1份，第二个区域站5份)**
**} **
** .item{**
** grid-column-start:2（理解为竖直方向开始数）**
** grid-column-end:five;从哪一行结束**
** grid- row-start：（理解为水平方向开始数）**
** grid-row-end：3 从那一列结束**
#grid的高级用法：
在.contaniner{
grid-template-areas:
"header header header"
"aside main ad"
"footer footer footer"
grid-template-rows: 60px auto 60px; 行的宽度
grid-template-column: 100px auto 100px; 列宽度
grid-column-gap：10px；列之间的空隙宽度
grid-row0gap：10px 行之间的宽度
这几行代码相当于划分好各个区域
然后 在.contaniner>header{
grid-area:header;把上面分化好的header区域，分给header"
}
