lesson 3

**CSS3的进阶特性**

- verticle-align    

    - 垂直对齐方式    

    - 只对容器内的inline-block元素起作用：图片，按钮，单复选框，单行/多行文本框等HTML控件    

    - top, text-top, middle, bottom, text-bottom, baselinehttp://www.zhangxinxu.com/study/201005/verticle-align-test-demo.html- flex```

1

2

3

4

.flex-container{

width: 160px;

height: 100px;

background: #FFD54F;

display: flex;

/* flex-direction: row;

flex-wrap: wrap;*/

}

.flex-item{

background: white;

width: 40px;

height: 40px;

text-align: center;

vertical-align: middle;

margin: 4px;

text-align: center;

}

.flex-item-inner{

left: 5px;

top: 5px;

position: relative;

width: 30px;

height: 30px;

line-height: 30px;

font-size: 20px;

border-radius: 50%;

color: white;

background: orange;

}```    - ie9开始支持    - display:flex;    - justify-content: 主轴对齐方式    - align-items: 副轴对齐方式    - order: 顺序    - wrap: 是否换行 默认不换    - flex-basis: 在还有剩余空间时的    - flex-grow:    - flex-shrink:- transform  translateX translateY scale rotate- 动画transition- 动画animation