动画及盒模型

动画

transform 实现元素得形状/角度/位置等得变化。

值有：

1.rotate

rotate(角度deg) 延中心点Z轴旋转

rotateX() 延中线X轴旋转
rotateY() 延中线Y轴旋转
rotateZ() 延中线Z轴旋转
rotate3d(x, y, z, deg) 延（x , y, z）的向量为轴旋转指定角度

2.scale

scale(x) 以x倍缩放或放大元素
scale(x,y) 宽度以x倍缩放，高度以y倍缩放

scaleX(x) 宽度以x倍缩放或扩大

scaleY(y) 高度以y倍缩放或扩大
scaleZ(z)

厚度以z倍缩放或扩大（主要用于3d效果）

scale3d(x,y,z) 定义3d旋转效果

3.skew

skew(角度deg)   对元素进行横向扭曲

skew(xdeg, ydeg)  对元素横向扭曲x度 纵向扭曲ydeg 
skewX(xdeg) 对元素航向扭曲x度
skewY(ydeg) 对元素纵向扭曲y度

4.translate

translate(x,y) 可以移动的距离相对原来位置
只写一个参数默认第二个参数为0   （相当于平移）

    .demo {
        transform: translate(100px, 100px);
    }
    .demo1 {
        transform: translate3d(100px, 100px, 100px)
    }

tranform-origin

改变transform的变换原点

tranform-origin: x, y, z;

x的取值：left/center/right/length/%  选择像素值使其像素值的原点即（0，0）点为该元素的左上角的点

y的取值：top/center/bottom/length/%

z的取值：length

translation 过渡动画

transition 属性是css3的一个复合属性，主要包括一下几个子属性:

1.transition-property:指定过渡或动态模拟的css属性 (要变换的css属性)

2.transition-duration:指定过渡所需要的时间

3.transition-timing-function:指定过渡函数

4.transition-delay:指定开始出现的延迟时间

<div class="trans">
    <div class="box"></div>
</div>
<style>
   .trans .box {
        width: 100px;
        height: 100px;
      /* 可以复合写，也可以分开单独写*/
        transition: width 2s linear 1s; 
        background-color: red;
    }
    .trans .box:hover {
        width: 300px;
    }

</style>

animation 动画

动画关键帧
@keyframes

animation 动画会按照keyframes 关键帧里面指定的帧状态而过渡执行。
0% - 100% 代表动画的时间过渡

animation 属性为css3的复合属性，主要包括以下子属性

1. animation-name: 此属性为执行动画的 keyframe 名

2. animation-duration:此属性为动画执行的时间

3. animation-timing-function:指定过渡函数速率

4. animation-delay: 执行延迟时间

5. animation-iteration-count: infinite/number;
   动画执行次数： 无限/指定次数 （默认为1）

6. animation-direction: normal/reverse/alternate/alternate-reverse;
   动画运动方向： 正常/反向/往返/反往（从后往前运动）

7. animation-fill-mode:forwards/backwards/both/none;
   动画开始之前或完成之后的位置： 动画结束在最后一个关键帧的位置/动画立即执行0%关键帧/两者都用/

8. animation-play-state:running/pasued;控制元素动画的播放状态，配合js来用

@keyframes mymove {
    from {top:0px;}
    to {top:200px;}
}
.demo {
    animation: mymove 2s liner 2s infinite  
}

column 多列布局

column-count: 2;两列布局
column-width: 160px; 列宽
columns: 160px 2;
每列之间有一个空隙，空隙的大小为默认字体大小。

默认字体大小是9px 10px

column-gap: 10px; 两列之间的宽度为10px
column-rule: 1px solid #eee; //两列之间的线条 该线条不占用列宽

column-rule-width: 50px;
column-rule-style: dashed;
column-rule-color: #eee;

column-span: 1/all; //标题跨列 1列或所有列

盒模型

IE6混杂盒模型： 触发怪异模式 怪异模式下可以给行内元素加宽高， 图片的padding值会失效 margin:0 auto不好使

触发怪异模式并不能让页面对页面中的盒子用IE6混杂盒模型来解析
怎么能用IE6混杂模式盒模型来解析呢 ？ 怪异模式 + IE6浏览器

css3中的可以选择盒模型的类型:
box-sizing: border-box/content-box;

弹性盒子 display:flex;

把父级设置成display: flex; 为弹性盒子
若子集宽度大于父级宽度则子集会整体压缩或者给子集设置flex-shrink: 1;缩小比例
若子集宽度小于父级宽度则可给子集设置flex-grow: 1; 扩大比例 均分剩余部分

我们把父级叫做容器 子集叫做项目

设置在父级上的属性：

1. flex-direction: row | row-reverse | column | column-reverse;

2. flex-wrap: nowrap | wrap | wrap-reverse  多行情况下会撑开父级

3. flex-flow: row nowrap;  //是前两者的缩写形式

4. justify-content: flex-start | flex-end | center | space-between(每个项目之间得宽度是相等的,两边到头中间自适应) | space-around(每个项目左右两边空间是相等的);

5. align-items: center/flex-end/flex-start/  //项目在副轴上如何对齐所有项目都按照这个属性垂直方向排列

6. align-content:  align-content: flex-start | flex-end | center | space-between | space-around | stretch; // 项目在多个轴线上的对齐方式，单个轴线不起作用

设置在子元素上的属性：

1.flex-grow: 1; 剩余空间平均分配

2.flex-shrink: 1; 超出的部分平均缩小

3.flex-basis: 50px;  伸缩基准值占主轴的空间（默认主轴是x轴方向）  优先级最高

4.flex: 1 1 0%   //前三项的缩写

5.order: number定义项目的排列顺序, 默认0，越小越靠前

6. align-self: auto | flex-start | flex-end | center | baseline | stretch;
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖父级align-items属性。