布局分类

固定宽度布局，一般宽度为960/1000/1024px
不固定宽度布局，主要靠文档流的原理来布局
响应式布局，PC上固定宽度，手机上不固定宽度，也是一种混合布局

布局的两种思路

从大到小，先定下大局，在完善每个部分的小布局
从小到大，先完成小布局然后在组合成大布局

float布局

子元素上加float:left和width
在父元素上加.clearfix()
IE6/7存在双倍margin bug 解决办法有两个
1.将错就错吧margin减半
2.加一个dispaly:inline-block

flex布局

container 容器(包裹住项目)
items 项目(容器里面的内容)

.container{
    display:flex;<!--父级元素类似div(块级元素)-->
}
.container{
    display:inline-flex;<!--父级元素类似span(内联元素)-->
}

flex-direction

控制items流动方向 (主轴XY方向)
常用属性：默认row | row-reverse | column | column-reverse;

flex-wrap

常用属性：默认nowrap | wrap | wrap-reverse;

justify-content

align-items

次轴对齐常用属性：默认flex-start(向上) | flex-end(向下) | center | stretch(两边撑) | baseline;

align-content

多行内容（基本不用，了解一下就行）常用属性：默认flex-start(向上) | flex-end(向下) | center | stretch(两边撑) | baseline;

flex item 属性

order

.item:first-child{
    order:100;<!--第1个child放到最后-->
}
.item:nth-child(2){
    order:-1;<!--第2个child放到第一个-->
}
.item:last-child{
    order:1;<!--如果没有负数最后1个child排序为1-->
}

flex-grow

长胖默认0 谁的数值大谁占得空间的多一些

.item:first-child{
    flex-grow:1;<!--第1个child给一份-->
}
.item:nth-child(2){
    flex-grow:2;<!--第2个child给两份-->
}

flex-shrink

变瘦空间不够用的时候谁的数值大谁缩的多一些

.item:first-child{
    flex-shrink：1;<!--第1个child给一份-->
}
.item:nth-child(2){
    flex-shrink:2;<!--第2个child多缩一份-->
}

align-self

某一个元素可以特立独行常用属性：默认flex-start(向上) | flex-end(向下) | center | stretch(两边撑) | baseline;

grid简单语法

二维布局用grid，一维布局用flex

.conteainer{
    display:grid | inline-grid;<!--}引入-->
}
.container{
    grid-template-columns:40px 50px auto 50px 40px;<!--设置多个行宽-->
    grid-template-rows:25% 100px auto;<!--设置多个行高-->
}

.a{
    grid-row-start:1;<!--设置a的高度从第1根线开始-->
    grid-rows-end:4;<!--设置a的高度从第4根线结束-->
    grid-column-start:1;<!--设置a的宽度从第1根开始-->
    grid-column-end:6;<!--设置a的宽度从第6根结束-->
}
.a{
    grid-template-columns:1fr 2fr 1fr ;<!--设置多个行宽-->
    grid-template-rows:1fr 1fr 1fr;<!--设置多个行高-->
    min-height :400px;
    grid-gap:12px;格子中间的空隙距离
}

areas属性

懒，就不写了，直接上图