原则:不到万不得已，不要写死宽度高度，IE就直接写死，否则bug一堆，自己慢慢解决吧

float布局(兼容IE8)

公式：
子元素全加 float: left （right）
父元素加.clearfix

tips

两个横向的部分如果想水平居中，用line-hight和margin去填充
如果横向宽度太小布局会挂，请加上min-width
做平均布局可以使用-margin让子元素伸出去，爷爷层margin做居中，父亲层margin做布局
横向两栏布局，中间加间距，先浮动:内部加div，设置marigin

.clearfix:after{
    content: '';
    display: block;
    clear: both;
} //IE8

.clearfix{
    zoom: 1;
}//IE6价格zoom

Flex布局(不兼容IE8)

基本概念

Flex container的属性

flex-direction

flex-direction:row                   //行(横向排列,默认)
flex-direction:row-reverse          //反向行
flex-direction:column               //列(竖向) 
flex-direction:column-reverse       //反向

flex-warp

flex-warp:no-warp                   //不换行(不管多少个都记在这一行,默认)
flex-warp:warp                      //换行

flex-flow

flex-direction和flex-warp的简写

flex-flow:row nowrap               //默认

justify-content

主轴方向上的对齐方式,主轴由flex-direction决定,默认为水平方向
偷一下阮一峰老师的图

justify-content:space-between      //空间都在中间
justify-content:space-around       //空间都在之间，之前，之后
justify-content:flex-start         //都往容器起点靠
justify-content:flex-end           //都往容器重点靠
justify-content:center             //都在容器中间

align-items

侧轴对齐方式

aligh-itenms:flex-start           //交叉轴的起点对齐。
aligh-itenms:flex-end             //交叉轴的终点对齐。
aligh-itenms:center               //交叉轴的中点对齐。
aligh-itenms:baseline             //项目的第一行文字的基线对齐。
aligh-itenms:stretch（默认值）      //如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content

定义多根轴线的对其方式,多行多列用,使用频率较低

align-content:flex-start             //与交叉轴的起点对齐。
align-content:flex-end               //与交叉轴的终点对齐。
align-content:center                 //与交叉轴的中点对齐。
align-content:space-between          //与交叉轴两端对齐，轴线之间的间隔平均分布。
align-content:space-around           //每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
align-content:stretch（默认值）      //轴线占满整个交叉轴。

Flex item的属性

flex-grow

定义item放大比例，默认为0，空间过多时可以使用

.a{flex-grow:1}
.b{flex-grow:2}
.c{flex-grow:3}                     //空间将以 1:2:3的比例分配给a b c

flex-shrink

定义item的收缩比例，默认为1，空间不足时使用

flex-basis

item默认大小,一般不用，默认为auto可以设定width、height，占据固定空间

flex

flex-grow、flex-shrink、flex-basis的缩写

.a{flex:0 1 auto}                       //默认

order

改变item的顺序，可代替双飞翼

.a{order:3}
.b{order:2}
.c{order:1}                      //item的顺序就会反着了,脑补好吧,这么简单

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

最后推荐一个游戏学习flex布局:flex froggy

Grid布局

未完待续

移动端布局

移动端响应式

媒体查询

媒体查询：一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。

方法一

直接写css

@media(条件){
    do something
}

引入css

<link herf="xxx" media="(max-width:768px)"

tips：

手机端如果响应式不想让图片变形，那么我们使用background而不要用img

background:transparent url() no-repeat center;
background-size:cover;

学会隐藏元素

移动端一个界面,pc端一个界面,配合媒体查询,mobile first,因为用手机的人多啊

viewport

meta viewport ：viewport的宽度等于设备的宽度，不允许手动缩放，初始缩放值1.0,最大缩放值1.0,最小缩放值1.0

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

判断useragent

后端的事情了，判断你使用的设备，使用那另外一个域名，就不用媒体查询和响应式了，参考淘宝如果你用的手机，那么网址就是m.taobao.com了
或者参考知乎,判断useragent使用不用的html样式

移动端的特点

没有hover
没有touch
没有resize
没有滚动条

float-flex-grid-移动端布局