弹性盒子布局：
1.html，body必须都写height：100%才会产生弹性盒子；
2.必须给所有块元素最外面写一个盒子.mian{display: -webkit-box;- webkit-box-orient: vertical}
3.给中间元素article添加{-webkit-box-flex: 1;height:100%;width:100%;}
复制代码1.两种方式：
（1）display：flex （2）display：inline-flex
2.弹性盒属性
（1）.container 容器
flex-direction：方向 横向：row
列向：column
justify-content：控制内容的属性值
align-items：
align-content：
flex-flow：row nowrap
（2）.item 内容条目
order： 排序方式
flex-grow：
3.媒体查询
@media screen and（max-width：400px）{
body{
background：red；
}
}
4.media Type：媒体类型
（1）all：所有设备
（2）screen：电脑屏幕，平板电脑，智能手机
（3）print：打印机
复制代码 妙味课堂
第一节课
中间显示：align-items:center
1. 定义盒模型：display:box 类似于左浮动
display:inline-box
2.box-orient 定义盒模型布局方式
（1）horizontal 水平显示
（2）vertical 垂直显示
3.box-direction 盒模型布局方向（也叫排列方向）
（1）normal 正序
（2）reverse 反序
4.box-ordinal-group 设置元素的具体位置
例：-webkit-ordinal-group：2 将当前元素排列在第二个位置
5.box-flex 定义盒子的弹性空间
公式：子元素的尺寸 = 盒子的尺寸*子元素的box-flex属性值/所有子元素的box-flex属性值的和
6.box-pack:富裕空间管理
（1）.start （默认值）所有子元素在盒子左侧显示 富裕空间在右侧
end 所有子元素在盒子右侧显示 富裕空间在左侧
center 所有元素居中
justify 富裕空间在子元素之间平均分布
7.box-align ：start 上面显示 end 下面显示 center 中间显示
8.（这两项必须要加在父元素上）
display：flex 弹性盒布局 类似于float
justify - content：四个属性
space-between： 弹性盒子元素会平均地分布在行里
space - around ：将各元素的左右留有空白
flex-start ：弹性盒子元素将向行起始位置对齐
flex-end ：弹性盒子元素将向行结束位置对齐
面试题
一个未知宽高的块元素如何在屏幕中水平垂直居中 水平：box-pack：center
垂直：box-align：center
复制代码第二节课
1.text-shadow ：0 0 10px #ccc 文字阴影
2. box-shadow：inset x y blur模糊半径 spread 扩展阴影半径 color 阴影颜色
box-shadow ：0 0 10px #ccc 盒模型阴影
box-shadow ：inset 0 0 10px #ccc 盒模型阴影 →→→→ 内投影
box-shadow ： 0 0 10px #ccc 盒模型阴影 →→→→ 外投影 （不加inset）
3.box-reflect 倒影
box-reflect：right 右倒影
left 左倒影
above
below
4.background：-webkit-linear-gradient（red 0，blue 100%） 颜色（阴影）渐变
5.实例：图片右倒影，然后渐变颜色
box-reflect：right 10px -webkit-linear-gradient（right，rgba（0,0,0,1） 0，rgba（0,0,0,0） 100%）
6.拖拽控制窗口大小
resize 必须配合overflow：auto 一起使用才会有效果
resize： none：不可拖拽
both：水平和垂直方向可以拖拽
horizontal：水平可以拖拽
vertical ：垂直方向可以拖拽
7.box-siziing：content-box 标准盒模型 （width/height = border+padding+content）
border-box 怪异盒模型 （width/height = content）
复制代码第三节课 响应式布局
css3分栏布局:只有webkit可以用
1.column - width 栏目宽度 column - width:250px
2.column - count 栏目列数 column - count :4
3.column-gap 栏目距离 column-gap :10px
4.column - rule 栏目间隔线 column - rule :1px solid #ccc
响应式布局：可以适应不同终端 如：app和web
1."stylesheet" type="text/css" href="indexa" media="screen and (min-width:800px)"/>
"stylesheet" type="text/css" href = "indexb" madia = "screen and (min-width:600px) and (max-width:800px)"/>
2.横屏 和 竖屏
"stylesheet" media = "all and (orientation:portrait)" href = "indexa".css/> 横屏
"stylesheet" media = "all and (orientation:landscape)" href = "indexb".css/> 竖屏
3.媒体查询
style内部引入媒体查询
@media screen and （min-width:400px） and (max-width:500px){
.box{margin:0 auto;}
}
style外部引入：
@import url("indexc.css") screen and （min-width:400px） and (max-width:500px);
4.media Type：媒体类型
（1）all：所有设备
（2）screen：电脑屏幕，平板电脑，智能手机
（3）print：打印机
（4）braille 盲文触觉设备
（5）embossed 盲文打印机
（6）projection 打印预览
（7）speech “听觉类似的媒体类型”
（8）tty 不适用像素的设备
（9）tv 电视
复制代码第四节课 新增ui属性
1.border-radius：10px 圆角
border-radius：50% 圆
2.边框背景
border-image：url（）
border-image-sourceg 引入图片
border-image-slice 切割图片
border-image-width 边框图片
borde-image 图片排列方式
repeat 平铺
round 重复
stretch 拉伸
3.border-colors 边框颜色
火狐浏览器：左边框六种颜色叠加：-moz-border-left-colors：blue red yellow blue red yellow
4. background-image：-webkit-linear-gradient（起点 | | 角度 | | 颜色 ） 线性渐变
例：background-image：-webkit-linear-gradient（left top，red ，blue，yellow）从左上角→→左下角 由红色渐变为蓝色到黄
background-image：-webkit-linear-gradient（30deg，red，blue）
5. background-image：-webkit-repeating-linear-gradient（60deg，red 0.blue 30px） 渐变 + 平铺
6. IE 下颜色渐变兼容ie
filter : progid : DXImageTransform . Microsoft .gradient(startColorstr = "red" , endColorstr = "blue" , GradientType = "0")
startColorstr : 开始颜色
endColorstr ：结束颜色
GradientType= "0" 颜色从 上→下 渐变
= “1” 颜色从 左→右 渐变
7. -webkit-radial-gradient(left top, red,blue) 径向渐变
注意 Firefox 目前只支持关键字
（1）起点 ： 可以是关键字 （left，right，top,bottom）,具体数值或者百分比
（2）形状 ：ellipse 椭圆 cirle 圆
（3）大小 ： closest-side 最近端
farthest-corner 最远角
closest-Corner 最近角
farthest-side 最远端
contain 包含
cover 覆盖
8. background：url（a.jpg） 0 0 ，url（b.jpg） 0 100% 多背景
9. background-size ：x y
background-size ：100% 100%
Cover 放大 contain 缩小
10. 背景 background-origin ：border || padding || content
background-origin ： border-box ：从border 区域开始显示背景
background-origin ： padding-box ：从padding区域开始显示背景
background-origin ： content-box ：从content 区域开始显示背景
11. background-clip
background-clip：border 从border区域向外裁剪背景
background-clip：no-clip 从border区域向外裁剪背景
background-clip：padding 从padding区域向外裁剪背景
background-clip：content 从content区域向外裁剪背景
12. -webkit-background-clip:text 只有Safari和Chrom才能实现用背景图片来填充文本的效果
background-clip:text配合其私有属性-webkit-text-fill-color: transparent,
例子：-webkit-background-clip: text;
-webkit-text-fill-color: transparent; 透明的
.text{
font-size:40px;text-transform: uppercase; 文字变成大写的-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
13. -webkit-mask:url() no-repeat position 遮罩
复制代码第五课：
API:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
API:http://www.ibm.com/developerworks/cn/web/1409_chengfu_css3flexbox/
弹性盒子布局方向：
1.display：flex
2.fiex-direction
属性：
属性值 含义
row（默认值） 主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是 ltr，则排列顺序是从左到右；如果文档顺序是 rtl，则排列顺序是从右到左。
row-reverse 主轴为水平方向。排列顺序与页面的文档顺序相反。
column 主轴为垂直方向。排列顺序为从上到下。
column-reverse 主轴为垂直方向。排列顺序为从下到上。
3.flex-wrap：
属性值 含义
nowrap（默认值） 容器中的条目只占满容器在主轴方向上的一行，可能出现条目互相重叠或超出容器范围的现象。
wrap 当容器中的条目超出容器在主轴方向上的一行时，会把条目排列到下一行。下一行的位置与交叉轴的方向一致。
wrap-reverse 与 wrap 的含义类似，不同的是下一行的位置与交叉轴的方向相反。
注意：可以使用"flex-flow"属性把"flex-direction"和"flex-wrap"结合起来
例如：flex-flow: row wrap;
4.兼容写法
1. 等分
.parent{display: -webkit-box; display: -webkit-flex; display: flex;}
.child{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}
2. 水平居中
.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;}
3. 垂直居中
.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;}
div垂直居中：
http://www.cnblogs.com/gwcyulong/p/6251342.html
复制代码