web前端4

盒子模型

盒子大小由padding（内边距）margin（外边距）border

padding无负，margin有负--可实现元素水平居中（）

一个值：上下左右

俩值时：上下    左右

三值：  上     左右   下

四值： 上  右   下    左

行内元素的左右边距可以准确输入

box-sizing：boder-box解决padding影响盒子大小

display：flex变为弹性盒子

flex-direction：row-reverse  column   column-reverse改变元素排列方式

justify-content：space-between（俩边贴边中间平分）                             -around（平分在子项俩边）                                      -evenly

                            center（主轴方向对齐方式）

               align-items：center（侧轴单航对齐方式）

                align-content：center（多航）

flex-wrap：warp允许换航

flex：数字；站剩余空间多少

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

body（ul）{margin：0

padding：0}去除标签默认外边距

background-image：linear-gradient（to right，red，pink）渐变色第一个是方向

background-image：repeating-linear-gradient（度数，）   

transform：translateX（200px）移动rotateZ(45dg旋转   scaleX(2)缩放

transform-origin：top left；改原点（对移动无影响，其他的都有影响）

transform-style：preserve-3d改成3d

perspective：800px

transition-property：width，height，background-color；

transition-duration：5s；

transition：all 3s 

@keyframs  movie{

from{

border-radius：0；

transform：translateX(0) rotate (0)}

to{border-radius：50%；

transform：translateX(1100px) rotate (360dg)}

}定义动画

animation-name：movie<定义的名字

animation-duration：执行时间

animation-delay：延迟时间

animation-timing-function：动画方式 stp（12）执行次数

animation-iteration-count：infinite；动画方向