目录
添加/删除类名 classList.add() & classList.remove()
HTML
data-set
data-set是HTML5的一个新特性，其作为元素的attribute用于存放获取数据
语法：
set ：
<div id="my-div" data-yourname="value">
get ：
CSS : （常用于给伪元素:before :after 的 content 赋值）
#my-div:after{
attr(data-yourname)
}
JavaScript :
var value=document.getElementById("my-div").dataset.yourname
CSS
flex布局
flex的出现一定程度上解决了自适应布局和垂直居中的难题。
语法：
定义在父元素上的属性（用于规定子元素的排列方式）
#flex-parent{
/*使用flex布局*/
display:flex/*行内元素使用inline-flex*/;
/*设置主轴方向（子元素排列方向）*/
flex-direction:row/*水平方向从左到右（默认）*/
row-reverse /*水平方向从右到左*/
column /*垂直方向由上到下*/
column-reverse /*垂直方向由下到上*/;
/*换行行为*/
flex-wrap:nowrap/*不换行*/ wrap /*换行*/ wrap-reverse /*下一行出现在上边*/;
/*简写*/
flex-flow:<flex-direction><flex-wrap>;
/*主轴的对齐方式*/
justify-content:flex-start /*左对齐（默认）*/
flex-end /*右对齐*/
center /*居中*/
space-between /*两端对齐，子元素之间间隔相等*/
space-around /*子元素两侧间隔相等，子元素之间间隔比子元素与边框间隔大一倍*/;
/*垂直轴的对齐方式*/
align-items:stretch/*如果子元素未设置高度或高度auto，则充满整个父元素高度*/
flex-start || flex-end || center /*与justify-content类似*/
baseline /*子元素第一行的文字的基线对齐*/;
/*存在多轴线时的对齐方式*/
align-content:flex-start || flex-end || center || space-between || space-around ||
stretch/*(默认)*/;
定义在子元素上的属性（定义某些特例的排列方式）
#div-child{
/*子元素的排列顺序*/
order:<order-number>/*数值越小越靠前，默认0，允许负值*/;
/*子元素的放大比例（如果有多余空间）*/
flex-grow:<grow-number>/*默认0，都为1的时候所有子元素等分剩余空间，若有一个为2，则该元素多占一倍空间*/;
/*子元素缩小比例（如果空间不足）*/
flex-shrink:<shrink-number>/*默认1，即空间不足会缩小，为0则不缩小，不接受负值*/;
/*子元素占据的主轴空间（分配多余空间前）*/
flex-basis:<length> || auto/*默认auto，即子元素本来大小，若设置为子元素的width和height的值，则该元素占据固定空间*/;
/*简写*/
flex:<flex-grow><flex-shrink><flex-basis>/*后两个属性可不写，默认 0 1 auto*/;
/*子元素的对齐方式（定义在子元素的align-items）*/
align-self:auto || flex-start || flex-end || center || baseline || stretch;
}
:before & :after伪元素
在CSS3的语法中，为了将 伪元素 与 伪类 区分开将其写做 ::before 和 ::after
语法：
#selector :before{
content:''/*伪元素的内容*/
/*------样式-------*/
}
伪元素用于在当前元素之前/后创建一个元素，其值为content的值，由于其在HTML结构中未定义，所以叫做伪元素
line-height
line-height为行高，定义为两行文本基线（baseline）之间的距离
baseline
字母x的底端的水平线
transform：rotate（ndeg）
使元素旋转n度
rotateX（ndeg）
以x轴3d旋转
rotateY（ndeg）
以y轴3d旋转
transform-origin:x y z
旋转的原点 top bottom center left right px %
Tips:使用JavaScript无法获得旋转的角度，获得是matrix的矩阵值
backface-visibility
元素背面不可见
animation
#animation-div{
animation:animation-name <duration>;
}
@keyframes animation-name{
from{/*----CSS----*/}
to{/*----CSS----*/}
}
@keyframes animation-name{
0%{/*----CSS----*/}
/*其他百分比阶段的状态*/
100%{/*----CSS----*/}
}
JavaScript
function作为构造函数的使用
语法：
function Constructor(param){
this.property=param/*定义属性*/
/*------*/
}
var object=new Constructor
/*对象的方法定义在原型上，以便所有通过该构造函数创建的对象共享该方法*/
object.prototype.methodsName=function(){/*------*/}
Date()方法 获取日期、月份、年份、时间
var now=new Date()/*获取当前日期和时间*/
/*将日期和时间转换为字符串*/
now.toString()//April 27 HH:mm:ss timezone
now.toLocaleString()//2020/4/27 H:mm:ss
now.toDateString()//April 27
now.toLocaleDateString()//2020/4/27
now.toTimeString()//HH:mm:ss timezone
now.toLocaleTimeString()//H:mm:ss
/*获取当前日期*/
var date=now.getDate()//今天的日期
var week=now.getDay()//今天的星期
var month=now.getMonth()//当前月份
var year=now.getFullYear()//当前的四位年份
var hour=now.getHour()//获取小时
var minute=now.getMinutes()//获取分（方法名有s）
var second=now.getSeconds()//获取秒（方法名有s）
var ms=now.getMillionseconds()//获取毫秒（seconds首字母不大写）
添加/删除类名 classList.add() & classList.remove()
该方法常用于为指定元素在某个时机添加类名以开始动画，在某个时机移除类名以停止动画
语法：
//添加类名
document.getElementById("selector").classList.add("className")
//删除类名
document.getElementById("selector").classList.remove("className")