CSS（2）

1.元素显示模式

 块元素：独占一行，宽、高、内外边距可以设置   

 行内元素：一行多个，宽高、内外边距设置无效 

 行内块元素：可以一行多个，还可以设置宽高、内外边距  

2.flex布局

（1）改子元素排列方式

flex-direction: row-reverse;

flex-direction: column;

（2）改变主轴对其方式

space-between:两边贴边，中间评分剩余空间

space-around：平分在子项的两边

justify-content: space-around; 

justify-content: space-evenly; 

justify-content: center; 

（3）允许换行

flex-wrap: wrap;

（4）侧轴单行

 align-items: center;

（5）侧轴对齐方式

 align-content: center;

align-content: space-between;

align-content: space-around;

align-content: space-evenly;

flex: ;  占用剩余空间的多少

order    值越小，排列越靠前   没有设置的子项目，默认为0

3.去除标签外默认边距

margin: 0;

padding: 0;

4.css的继承性

会继承的css属性 ：字体属性  、文本属性、文字颜色

不会继承的：边框、背景、内外边距、宽高

5.文本设计

（1）字体

 @font-face {

            font-family: ;

            src: url(）;

        }

（2）渐变

background-image: linear-gradient();

background-image: repeating-linear-gradient（);

background-image: radial-gradient();

(3)体检

css书写规范：

        选择器 {

            属性名： 属性值；

            属性名： 属性值；

}

（4）浮动

float: ;

6. 2d转换

  移动 

transform: translateX(200px) translateY(100px); */

transform: translateY(100px);

单独写会发生覆盖，复合：x ，y 

transform: translate(50px, 50px); 

旋转

transform: rotateZ(45deg); 

 

缩放

transform: scaleX(1.5) scaleY(2); 

transform: scale(0.5); 

transform: translateX(100px) translateY(100px) rotateZ(45deg);

transform: scale(0.5) translate(100px, 100px) rotateZ(45deg);

改原点  对移动无影响，对旋转、缩放有响*/

transform-origin: top left

7.3d转换

transform: scaleZ(2);

8.过度

            transition-property: width, height, background-color;

            transition: all 3s steps(120);

9.动画

1、定义动画

 @keyframes movie {

            from {

                border-radius: 0;

                transform: translateX(0) rotateZ(0);

            }

            to {

                border-radius: 50%;

                transform: translateX(1100px) rotateZ(360deg);

            }

        }

 animation-name：定义的动画名字 

 animation-name: movie;

 animation-duration：动画执行所需时间 

animation-duration: 3s;

animation-delay:动画延迟时间 

animation-delay: 1s;

animation-timing-function  动画方式 

animation-timing-function: steps(12); 

控制动画执行次数 

animation-iteration-count: infinite;

动画方向 

animation-direction: alternate;

（卸载定义动画的盒子里）