6.13 弹性布局-拓

order：0；决定了弹性布局时的先后排列顺序；也可以写负值，一样；默认是0，子盒子里设置；不设置默认是0；

★数值越小，排列越靠前；

flex-glow：0；决定了弹性布局剩下的空间分配，在子盒子里设置；不能为负数；不设置默认为0；

flex-shrink：1；定义了缩小比例，默认是1，空间不足，会对设置了此属性的子盒子缩小，空间足够则不会缩小，；

flex-shrink：0；当空间不足的时候，也不会缩小；

★值越大，按比例缩的就越小;

flex-basis：宽度；设置之后的宽度；和直接设置width没区别；★★他们的区别就是当同时设置的时候，优先级：flex-basis > width; 

flex复合属性：

flex：flex-grow, flex-shrink和 flex-basis； flex-shrink和 flex-basis可以不写，不写就是默认值；

★★align-self：给弹性布局里单独一个设置位置；

值：auto | flex-start | flex-end | center | baseline | stretch;

拓展知识：

1.如果有的时候需要奇怪的尺寸：

那么可以在设置的宽高地方加上calc属性 ；可以有“+”“-”的符号  用空格隔开，否则不生效；

calc属性

2.如何不用那么麻烦的去给每个设置相同的颜色：

格式：root{定义变量} 如图：

3.如何在一个动画进行完的时候，定在结束的位置，而不是回到原来的位置：

    animation-fill-mode:forwards; 

Backwards：默认值

animation-fill-mode:forwards动画结束后，停到结束的位置,不返回

animation-play-state: paused|running;

paused ：动画已暂停。

running 规定动画正在播放。

可以利用hover来设置,鼠标摸上的时候停止:animation-play-state : paused

4.iframe标签 

iframe标签 可以嵌套一个html页面，frameborder为边框，一般设置为0.