1、流式布局（百分比布局）： 流式布局也称为非固定像素布局，通过将盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
防止无限拉伸 内容显示不佳 设定一个最大最小宽度 max-width 最大宽度 min-width 最小宽度
<style> section { width: 100%; max-width: 1000px; min-width: 350px; } section div { float: left; width: 50%; height: 400px; } div:nth-child(1) { background-color: pink; } div:nth-child(2) { background-color: red; } </style>二倍精灵图做法：
在fireworks里面把精灵图等比例缩放为原来的一半之后根据大小测量坐标注意代码里面background-size也要写：精灵图为原来的一半2、flex布局（弹性布局）： 对比传统布局：
传统布局flex布局1.兼容性好1.操作方便，布局极为简单，移动端应用很广泛2.布局繁琐2.PC端浏览器支持情况较差3.局限性3.IE11或更低版本，不支持或仅部分支持布局原理： 用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局 采用flex布局的元素，称为flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为flex项目（flex item）简称项目。
注意：
当我们为父盒子设为flex布局以后，子元素的float、clear、和vertical-align属性将失效伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局子容器可以横向排列也可以纵向排列常见父项属性：
flex-direction:设置主轴的方向 一、主轴与侧轴 在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列，xy轴 1.默认主轴方向就是x轴方向，水平向右 2.默认侧轴方向就是y轴方向，水平向下 二、属性值 flex-direction属性决定主轴的方向（即项目的排列方向） 注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，另外一个就是侧轴。而子元素是跟着主轴来排列的 .box { flex-direction: row | row-reverse | column | column-reverse; }justify-content:设置主轴上的子元素排列方式 .box { justify-content: flex-start | flex-end | center | space-between | space-around; } 注意： 1.使用这个属性之前一定要确定好主轴是哪个 2.通过设置flex-direction为column 再把justify-content设置为center就能实现垂直居中 flex-wrap∶设置子元素是否换行 默认情况下，项目都排在一条线上（又称“轴线”）上。flex-wrap属性定义，flex布局中默认是不换行 （如果装不开会缩小元素的宽度） .box{ flex-wrap: nowrap | wrap | wrap-reverse; } align-content:设置侧轴上的子元素的排列方式 (多行) 设置子项在侧轴上的排列方式，并且只能用于子项出现换行（flex-wrap：wrap）的情况，在单行下是没有效果的 .box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } align-items:设置侧轴上的子元素排列方式 (单行） 该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项的时候使用 .box { align-items: flex-start | flex-end | center | baseline | stretch; } baseline: 项目的第一行文字的基线对齐 streth：不能设置高度
总结align-content和align-items区别： 1.align-items 适用于单行情况，只有上对齐、下对齐、居中和拉伸 2.align-content适用于换行的情况下 {对单行情况无效}，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
flex-flow :复合属性，相当于同时设置了flex-direction和flex-wrap flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 .box { flex-flow: <flex-direction> <flex-wrap>; }常见子项属性：
flex属性 flex属性定义子项目分配剩余空间，用flex来表示占多少份数 .item{ /* 默认为0*/ flex:<number>; } <style> section { display: flex; width: 60%; height: 100px; margin: 0 auto; } section div:nth-child(1) { width: 100px; height: 100px; background-color: pink; } section div:nth-child(2) { flex: 1; background-color: black; } section div:nth-child(3) { width: 100px; height: 100px; background-color: blue; } </style> 注意：如果子盒子没有设置宽度，那父盒子剩余空间就是整个宽度，flex=1即每个子盒子各占一份因此子盒子就平分空间 flex里的值也可以用百分比表示 是相对于父盒子的 align-self 控制子项自己在侧轴上的排列方式 align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch. .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } span:nth-child(2){ /*设置自己在侧轴上的排列方式*/ align-self:flex-end; } order 属性定义项目的排列顺序 order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 .item { order: <integer>; }背景的线性渐变： linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 语法：
/* 从上到下，蓝色渐变到红色 */ -webkit-linear-gradient(45deg, blue, red); /* 渐变轴为45度，从蓝色渐变到红色 */ -webkit-linear-gradient(45deg, blue, red); /* 从右下到左上、从蓝色渐变到红色 */ -webkit-linear-gradient(to left top, blue, red); /* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */ -webkit-linear-gradient(0deg, blue, green 40%, red); 注意： 背景渐变必须添加浏览器的私有前缀 起始方向默认是top案例1：
