【汇总】前端开发中高频次使用的JS、CSS、HTML代码片段合集

pen=1,pointer-events: none;
pea=1,pointer-events: auto;
 
tac=1,text-align: center;
taj=1,text-align: justify;
 
bdw=1,border-width: 1px;
bds=1,border-style: dashed;
bdc=1,border-color: #000;
 
lll=1,left:0;
rrr=1,right:0;
ttt=1,top:0;
bbb=1,bottom:0;
 
pd=1,padding:10px;
pd=2,padding:20px;
pd=3,padding30px;
pd=4,padding:40px;
pd=5,padding:50px;
pt=1,padding-top:10px;
pt=2,padding-top:20px;
pt=3,padding-top:30px;
pt=4,padding-top:40px;
pt=5,padding-top:50px;
pr=1,padding-right:10px;
pr=2,padding-right:20px;
pr=3,padding-right:30px;
pr=4,padding-right:40px;
pr=5,padding-right:50px;
pb=1,padding-bottom:10px;
pb=2,padding-bottom:20px;
pb=3,padding-bottom:30px;
pb=4,padding-bottom:40px;
pb=5,padding-bottom:50px;
pl=1,padding-left:10px;
pl=2,padding-left:20px;
pl=3,padding-left:30px;
pl=4,padding-left:40px;
pl=5,padding-left:50px;
 
mt=1,margin-top:10px;
mt=2,margin-top:20px;
mt=3,margin-top:30px;
mt=4,margin-top:40px;
mt=5,margin-top:50px;
mr=1,margin-right:10px;
mr=2,margin-right:20px;
mr=3,margin-right:30px;
mr=4,margin-right:40px;
mr=5,margin-right:50px;
ml=1,margin-left:10px;
ml=2,margin-left:20px;
ml=3,margin-left:30px;
ml=4,margin-left:40px;
ml=5,margin-left:50px;
mb=1,margin-bottom:10px;
mb=2,margin-bottom:20px;
mb=3,margin-bottom:30px;
mb=4,margin-bottom:40px;
mb=5,margin-bottom:50px;
 
mat=1,margin:0 auto;
mla=1,margin-left:auto;
poa=1,position: absolute;
por=1,position: relative;
 
be=1,&::before { content: ""; $(CRLF)$(CRLF)}
af=1,&::after { content: ""; $(CRLF)$(CRLF)}
 
wib=1,width:100%;
heb=1,height:100%;
wic=1,width:calc(100% - 100px);
wic=2,width:calc(100vh - 100px);
hec=1,height:calc(100% - 100px);
hec=2,height:calc(100vh - 100px);
 
mp=1,.map(v => v.字段名);//返回对象数组中指定字段值的一位数组（不改变原始数组）
fe=1,.forEach((v,i,ar) => {$(CRLF)console.log(v,i,ar)$(CRLF)$(CRLF)});
ar=1,Array.isArray(ar)
ar=2,[].slice.call(document.querySelectorAll("div")) 
 
so=1,.sort((prev, next) => next.降序字段 - prev.降序字段);//从大到小降序(会改变原数组)
so=2,.sort((prev, next) => prev.升序字段 - next.升序字段);//从小到大升序(会改变原数组)
 
max=1,Math.max(...ar)
max=2,.sort((prev, next) => next.最大值字段名 - prev.最大值字段名)[0]
min=1,Math.min(...ar)
min=2,.sort((prev, next) => prev.最小值字段名 - next.最小值字段名)[0]
 
cx=1,.find(v => v.字段名 === "唯一匹配值");//返回单个对象
cx=2,.findIndex(v => v.字段名 === "唯一匹配值");//返回单个对象
cx=3,.filter((v,i,ar) => v.字段名==="多个匹配值");//返回数组
 
df=1,display: flex;
dfa=1,display: flex;align-items: center;
dj=1,display: flex;justify-content: space-between;
dja=1,display: flex;justify-content: center;align-items: center;
dfja=1,display: flex;justify-content: space-between;align-items: center;
fsk=1,flex-shrink:0;
 
op=1,opacity: 0.6;
ac=1,&:active,&[active] { $(CRLF)$(CRLF)$(CRLF)}
ac=1,&:active { $(CRLF)opacity: 0.6; $(CRLF)transform: translate(1px, 1px); $(CRLF)$(CRLF)}
ac=2,&[active] { $(CRLF)$(CRLF)$(CRLF) }
hov=1,cursor: pointer;transition: .618s ease;&:hover{ $(CRLF)$(CRLF) }
ho=1,cursor: default;transition: .618s ease;&:hover{ $(CRLF)$(CRLF) }
ft=1,&:first-of-type{$(CRLF)margin-left: 0;$(CRLF)margin-top: 0;$(CRLF)}
lt=1,&:last-of-type{$(CRLF)margin-right: 0;$(CRLF)margin-bottom: 0;$(CRLF)}
nt=1,&:nth-of-type(2n){$(CRLF)margin-right: 0;$(CRLF)}
fc=1,&:first-child{$(CRLF)margin-left: 0;$(CRLF)margin-top: 0;$(CRLF)}
lc=1,&:last-child{$(CRLF)margin-right: 0;$(CRLF)margin-bottom: 0;$(CRLF)}
nc=1,&:nth-child(2n){$(CRLF)margin-right: 0;$(CRLF)}