页面初始化 css

*,::before,::after{box-sizing:border-box}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}a{display:inline-block;text-decoration:none;color:inherit;transition:color .2s ease}a:hover{color:inherit}button,input,textarea{outline:0;border:0;font:inherit;-webkit-appearance:none;border-radius:0}textarea{overflow:auto}button{cursor:pointer}i,em{display:inline-block;vertical-align:-.25em}img{max-width:100%;border:0;height:auto}input::placeholder,textarea::placeholder{font-family:inherit;color:inherit}li,ul{list-style:none}.clearfix{zoom:1}.clearfix::after{content:"";display:block;height:0;visibility:hidden;clear:both}main,section,article{display:block}.flex{display:flex;flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-row-reverse{flex-direction:row-reverse}.flex-column-reverse{flex-direction:column-reverse}.flex-column-c{align-items:center}.flex-column-fe{align-items:flex-end}.flex-column-fs{align-items:flex-start}.flex-row-c{justify-content:center}.flex-row-sb{justify-content:space-between}.flex-row-sa{justify-content:space-around}.flex-row-se{justify-content:space-evenly}.flex-row-fe{justify-content:flex-end}.flex-row-fs{justify-content:flex-start}.flex-row-column-c{justify-content:center;align-items:center}.flex-row-column-sb-c{justify-content:space-between;align-items:center}.line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.line2{display:block;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.line3{display:block;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.line4{display:block;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}.line5{display:block;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}.container{width:100%;max-width:1640px;margin:0 auto;padding:0 20px}table{border-collapse:collapse}.table td,.table th{border:1px solid #efefef;padding:2px 6px}.table-bottom td,.table-bottom th{border-bottom:1px solid #e5e5e5;padding:8px}img.lazy{display:block;opacity:0;width:100%}img:not(.initial){transition:opacity .6s,transform .3s ease}img.error,img.initial,img.loaded{opacity:1}img:not([src]){visibility:hidden}.lazy-wrap{width:100%;display:block;position:relative;overflow:hidden}.lazy-wrap::after{content:"";display:block;padding-bottom:100%}.lazy-load{display:block;position:absolute;width:18px;height:18px;top:50%;left:50%;margin-top:-9px;margin-left:-9px;background-color:#ccc;-webkit-animation:loading 1.5s ease infinite;animation:loading 1.5s ease infinite;border-radius:100%}.lazy-wrap.lazy-loaded .lazy-load{animation:none;display:none}.lazy-wrap.lazy-loaded::after{padding-bottom:0}body,html{font-family:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;overflow-x:hidden}

清除浮动

.clearfix{zoom:1}.clearfix:after{clear:both;content:" ";display:block;height:0;visibility:hidden}

字数超出省略号

.line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.line2{display:block;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

.line3{display:block;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

.line4{display:block;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}

.line5{display:block;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}

隐藏滚动条

::-webkit-scrollbar{display:none}

vanilla-lazyload 懒加载

img.lazy{display:block;opacity:0;width:100%}img:not(.initial){transition:opacity .6s,transform .3s ease}img.error,img.initial,img.loaded{opacity:1}img:not([src]){visibility:hidden}.lazy-wrap{width:100%;display:block;position:relative;overflow:hidden}.lazy-wrap::after{content:"";display:block;padding-bottom:100%}.lazy-load{display:block;position:absolute;width:18px;height:18px;top:50%;left:50%;margin-top:-9px;margin-left:-9px;background-color:#ccc;-webkit-animation:loading 1.5s ease infinite;animation:loading 1.5s ease infinite;border-radius:100%}.lazy-wrap.lazy-loaded .lazy-load{animation:none;display:none}.lazy-wrap.lazy-loaded::after{padding-bottom:0}

flex 布局

.flex{display:flex;flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-row-reverse{flex-direction:row-reverse}.flex-column-reverse{flex-direction:column-reverse}.flex-column-c{align-items:center}.flex-column-fe{align-items:flex-end}.flex-column-fs{align-items:flex-start}.flex-row-c{justify-content:center}.flex-row-sb{justify-content:space-between}.flex-row-sa{justify-content:space-around}.flex-row-se{justify-content:space-evenly}.flex-row-fe{justify-content:flex-end}.flex-row-fs{justify-content:flex-start}.flex-row-column-c{justify-content:center;align-items:center}.flex-row-column-sb-c{justify-content:space-between;align-items:center}

根据文字长度自适应

.fit-content{width:fit-content;width:-webkit-fit-content;width:-moz-fit-content}

loading 动画

div{-webkit-animation:swiper-preloader-spin 1s linear infinite;animation:swiper-preloader-spin 1s linear infinite}@keyframes swiper-preloader-spin{to{transform:rotate(360deg)}}

美化滚动条

/*整体部分*/
::-webkit-scrollbar{width:6px;height:6px}
/*滑动轨道*/
::-webkit-scrollbar-track{border-radius:0;background:0 0}
/*滑块*/
::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgba(255,255,255,.35)}
/*滑块效果*/
::-webkit-scrollbar-thumb:hover{background-color:rgba(255,255,255,.75)}