The css records that I always forget

Forgetful CSS records

//元素范围已包含边框 设置border属性后不会增加额外像素
box-sizing: border-box;

//pc端字号小于12px时 使用缩放标签
transform: scale(0.8);

//发光字
text-shadow: 0px 0px 2px black;

//发光边框
box-shadow: 0px 0px 2px black;

//设置文字间距
letter-spacing: 2px;

//区分设备 不同样式
//screen	用于电脑屏幕，平板电脑，智能手机等。
//宽度大于600px的设备 font为红色，小于600px的设备 font为蓝色
@media screen and (min-width: 600px){
    
    
  .font{
    
    
    color: red;
  }
}
@media screen and (max-width: 600px){
    
    
  .font{
    
    
    color: blue;
  }
}

//justify-content
justify-content: center;        //居中排列
justify-content: end;           //从行尾开始排列
justify-content: space-between; //均匀排列每个元素 首个元素放置于起点，末尾元素放置于终点
justify-content: space-evenly;  //均匀排列每个元素 第一个元素左右空间相等
justify-content: space-around;  //均匀排列每个元素 第一个元素左边间隔是右边的一半

//文字换行问题
word-break: break-all;	//强制换行，允许拆分单次
white-space:nowrap;     //不换行
white-space:pre;		//保留空白空间，不换行

//透明背景色
background-color: transparent;

//圆角
border-radius： 5px;

//透明度
 background: rgba(80, 80, 80, 0.8); （opacity会使元素内文字也带有透明度）

//滑动
overflow: scroll;

//溢出隐藏 清除浮动
overflow: hidden;

//position
position: fixed;	//相对浏览器定位
position: relative; //相对定位
position: absolute; //绝对定位

//动画
//向左移动后隐藏
@keyframes moveLeft{
    
    
  from {
    
    
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    
    
    visibility: hidden;
    -webkit-transform: translate3d(-65%, 0, 0);
    transform: translate3d(-65%, 0, 0);
  }
}
.animate_moveLeft {
    
    
  -webkit-animation-name: moveLeft;
  animation-name: moveLeft;
}

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-name					动画名
animation-iteration-count 		播放次数 默认1  infinite无限次
animation-duration  			动画周期时间
animation-timing-function		动画速度 linear匀速 ease 低-高-低 ease-in低速开始 ease-out低速结束
								cubic-bezier(n,n,n,n)  在cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
										
animation-delay 				延迟播放
animation-direction 			反向播放
animation-play-state 			动画播放状态 paused暂停  running播放
animation-fill-mode				动画播放结束后的属性是播放之前还是播放之后的 forwards 播放后 backwards播放前  both都应用