零碎知识点与工作中积累的小技巧。
一行文本溢出处理:
overflow: hidden;超出部分隐藏
white-space: nowrap;强制文字不换行
text-overflow: ellipsis;文本超出部分显示省略
多行文本溢出处理:
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;弹性伸缩盒子模型
-webkit-line-clamp: 值;定义显示文本的行数
-webkit-box-orient: vertical;伸缩盒对象子元素排列方式
word-wrap:break-word;(长标点符号换行需再加该属性)
word-break:break-all;(针对英文 , 标点和长数字的换行需加该属性)
段落换行：
overflow: hidden;
word-break: break-all;
word-wrap: break-word;
行内块特性(问题):
1.产生间隙,fontsize设为0;
2.为父元素第一个子元素设上外边距时父元素被拉下;
3.为行内块兄弟元素其中一个设上外边距时,两者同时上下移动;
父子元素边框重合问题:
1.子元素设内边距取代外边距;
2.给父元素设display:table;
3.给父元素设overflow:hidden;
4.给父元素设透明色(transparent)边框;
5.给父元素添加伪对象并设display:table;
兄弟元素同时下拉问题:(根本原因:对齐方式)
1.采用浮动或相对定位;
2.为两个元素设不同的垂直对齐方式,再给其中一个元素添加与其对齐方式相反的外边距值即可;
3.设其中一元素属性为底部外边距，当底部外边距为正值时移动的是该元素的兄弟，负值时移动的是元素本身;
行内元素:不能设置宽高,所占位置由内容决定,不换行,不能设置上下内外边距(img,input除外)
块级元素:相邻两个块级元素同时设置了上下外边距时,外边距会重合,距离由较大的外边距决定
常用布局方式:
1.行内块布局:可设宽高也可一行显示,容器宽度不够时自动换行,但行内块容器间会存在空白节点,需给父元素设置font-size:0
2.弹性盒子布局:flex属性是flex-grow,flex-shrink,flex-basis的简写,默认值为0 1 auto,auto:(1 1 auto);none:(0 0 auto)
3.定位布局:static/absolute/relative/fixed,绝对定位以position为非static元素或body进行定位(需给位置值);固定定位以浏览器窗口进行定位
4.浮动布局:脱离文档流,父元素高度塌陷,后方文档流元素顶上,需清浮动;水平居中困难,需通过外边距假装居中;浮动元素高度不一致会捣乱布局(瀑布流)
清除浮动:
1.父级元素增加overflow:hidden/auto;
2.父元素最后加一个块级子元素(空标签)并设clear:both;
3.父元素添加伪对象after,设置为块级元素,content:"";clear:both;(height:0);
图片相对于父元素居中:
1.top，left，right，bottom设为50%父元素宽高,子元素不设宽高;
2.top，left设50%，margin-left，margin-top设-50%子元素宽高;
3.absolute时top，left:50%；transform：translate(-50%,-50%);
4.absolute时margin：auto；上下左右为0px(或-999px),为宽高中较大者设长度;
常用居中:
1.text-align："center";(文本居中)
2.margin：0 auto;(块元素水平居中)
3.valign：middle(表格单元格内容垂直居中)
4.line-height与height等高(垂直居中单行文字)
5.vertical-align："center";(可添加空辅助垂直居中,两者都需设置该属性)
换图片思路:
1.直接替换图片路径
2.利用图二高度，透明度，绝对定位覆盖图一
3.雪碧图利用background-position-x(y)移动图片并设超出隐藏
(淡出淡入，高度变化结合transition过渡动画和overflow: hidden)
设置不可见思路:
1.高度height设为0
2.透明度opacity:0/1
3.display:none/block
4.颜色color:transparent
5.可见visibility:hidden
(小程序中图片无故不可见,可设visibility:visible尝试)
css画圆形:
border-radius:50%;即为圆形
但最好设为宽高的一半,避免兼容问题
css画三角形:
等腰三角宽高为0,设三条边宽度且其中两条为transparent(顶角所对边不用设宽度)
直角三角宽高为0,设两条边宽度且其中一条为transparent(直角三角为等腰三角一半)
JPEG,PNG与GIF：
JPEG适用于照片(连续色调)和复杂图像,包含1600万种颜色 , "有损"格式，不支持透明度和动画
PNG适用于单色和线条构成的图像，包含上百万种颜色(png-8/png-24/png-32),无损,支持透明
GIF同PNG,也用于logo和剪切画,包含256种颜色,无损格式,只支持单一颜色透明,文件大,支持动画
注释:
// <！--（可能无效）js行注释
/*css*/ /*js*/块注释
浏览器内核及兼容前缀:
Blink-opera;-o-欧朋
Gecko-Firefox;-moz-火狐
webkit-safari，chrome;-webkit-谷歌，safari
Trident-IE;360(双核),qq,遨游,猎豹;-ms-IE
(需要用到兼容性写法时，常规写法需要写到兼容写法后面)
scss:
@import+文件名,引入
在嵌套中,&代表当前元素,>代表子元素
@charset "utf-8"字符编码
声明$color即可在下方多次引用($color)
声明@mixin加类名{},可用@include+类名引用
@function {@return }
https://blog.csdn.net/jiang_fulai/article/details/80134663
http://www.baidu.com+绝对路径
协议http:// 域名baidu.com 网站名www.baidu.com
Web服务器网址都为绝对路径，浏览器会转换；
若请求为文件夹则会返回默认文件index.html或default.htm
git的使用:
1.码云创建项目并复制地址
2.git clone +创建项目地址(把项目复制进空文件夹)
3.git add ./ 当前文件夹(进入项目操作(git文件层级))
4.git commit -m (m为项目提交说明)
5.git pull ——把更新的代码下载到本地
6.git push ——将本地代码提交到码云远程库里
7.版本回退 git reset --...
Cd ..上行到父文件夹
viewport:
理想视口,即达到布局视口等于设备视口的大小(为了能让更多的内容在屏幕里显示)
物理像素:即分辨率;逻辑像素:指程序上的像素值;设备像素比=物理像素 / 逻辑像素
ppi:(设备像素密度)设备每英寸所占的像素个数;计算:设备的宽高值通过勾股定理计算出对角线的值然后除以设备大小(英寸)
bootstrap:
bootstrap3布局原理(less):多用浮动布局
bootstrap4响应式布局原理(sass):媒体查询;百分比;弹性布局
移动端图片的处理:
padding-top百分比的计算为子元素的高度除以父元素的宽度
当padding / margin取形式为百分比的值时left / right / top / bottom，都是以父元素的width为参照物的，https://segmentfault.com/a/1190000004231995
媒体查询:
eg:@media only screen and (min-width: 375px){ }
移动端
移动端布局:
1.rem
2.百分比
3.弹性盒子
4.媒体查询
5.利用设备像素比
6.bootstrap栅格系统
//隐藏select的默认样式
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
//清除ie的默认选择框样式清除，隐藏下拉箭头
select::-ms-expand {
display: none;
}
//禁止图片拖拽
draggable="false"
行内元素添加动画:
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
-webkit-box-orient: vertical;
//chrome
var isChrome = !!window.chrome; 判断是否为chrome浏览器
浏览器默认16px,chrome最小为12px,可通过-webkit-text-size-adjust：none;或-webkit-transform: scale( );改变
伪对象:即为目标元素添加一个子行内元素
双引号不能嵌套双引号,除非嵌套的是中文双引号,单引号同理
标题h1-h6相当于正常字体的60% 90% 100% 120% 150% 200%
图像作为链接时要求关闭链接和图片text-direction,用边框来创建链接的下划线
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上动画最小间隔为 1/60＊1000ms ＝ 16.7ms
手指在屏幕上进行移动时，对应的组件上就会以 16 ms 一次的频率不断触发 touchmove 事件
字体变清晰: -webkit-font-smoothing: antialiased;（抗锯齿）
浏览器渲染过程：HTML->HTML 解析器->DOM 树；样式->样式解析器->样式规则；DOM 树和样式规则进行结合形成渲染树。(CSS 选择器是从右往左解析的)
若父容器设置了transform属性，则其内部子元素的 position:fixed; 属性会失效
px像素，rpx小程序常用单位，em相对于父元素的字体大小，rem相对于根元素html的字体大小，vh(vw)相对于当前视窗的大小(1%)
border:none与border:0的区别：
1.性能上的差异：border:0边框不见，但是浏览器依然会对border-width和border-color进行渲染，占用浏览器的资源，而使用border:none浏览器就不会做出渲染动作。
2.兼容性差异：对于input标签和button标签，将border设成0在所有浏览器效果都一样，将border设成none在IE6、7中无效，在其它浏览器中有效。
如果想在使用border:none的同时兼容所有的浏览器，只需要加上background属性即可。（border：0 none；）
字体图标库的使用:(web端)
1.直接下载icon,适用于图标少且不需要维护时,若成体系应用则不合适
2.unicode引用(在线链接模式 , 本地flie需加https: , 缺点是不支持多色)
定义@font-face与iconfont样式,亦可自定义样式 , 格式:
3.font-class引用 , 与unicode相似 , 类名具有可读性 , 引入css链接 , 格式:
4.symbol引用,最为推荐 , 支持多色但兼容性一般 , 初始icon通用样式并引入js链接 , 格式:
5.文件下载方式(vue等项目里使用) , css文件与四种兼容格式文件 , 其他为演示教程文件 , 引入css文件(可改样式与别名) , 格式:
vue使用: 在main中引入css文件 , 即可在页面使用
小程序使用: https://www.jianshu.com/p/f6f25df98d7c
优化(减少页面加载文件数)
1.合并css , js文件;
2.上拉加载更多:
// 可滚动容器的高度
var innerHeight = document.querySelector('#app').clientHeight
// 屏幕尺寸高度
var outerHeight = document.documentElement.clientHeight
// 可滚动容器超出当前窗口显示范围的高度(兼容)
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
if ((outerHeight + scrollTop) >= innerHeight) { }
3.利用雪碧图 , background-image , background-size , no-repeat , background-position拼接成的大图及其尺寸,不重复,超出隐藏,以及展示部分小图的对应位置background-position
https://www.toptal.com/developers/css/sprite-generator/
图片处理:
1.阿里云oss图片处理
2.容器超出隐藏 , 图片绝对定位居中 , 定高或宽100%(截取或留白 , 不变形)
3.容器定宽高不超出隐藏 , 图片max-width(height)都设为100% , 定位居中(不裁剪不变形 , 留白)
(亦可用js处理 , 高大于宽时定高100% , 反之)
4.将图片变成背景 , background-size控制
5.宽高100% , object-fit (宽高必填 , 容器可不溢出隐藏 , 属性本身有该功能) , object-fit: contain(等比缩放 , 留白) , cover(填满 , 不变形 , 裁剪) , fill(填满 , 变形 , 不裁剪) , none(原尺寸) , scale-down(尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些) object-position , x轴 y轴距离 , 默认值50% 50%即居中 , 100% 100%代表位于right bottom
inline-flex:
flex默认使容器占据一整行宽度，高度根据子元素自适应
inline-flex宽高均由子元素自适应，适合做一些根据内容而不断增宽的组件 , 如点赞组件(但会有闪烁现象)
深拷贝:
参考https://segmentfault.com/a/1190000016672263
对象的浅拷贝
function clone(obj) {
let newObj = {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] =obj[key];
}
}
return newObj;
}
冒泡排序(arr按从小到大排列)
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr.length; j++) {
if (arr[i] < arr[j]) {
var n = arr[i];
arr[i] = arr[j];
arr[j] = n;
}
}
}
二分法排序(快速排序,从小到大)
function myKP(arr) {
if (arr.length<=1) return arr;
var firstItem = arr[0];
var left = [];
var right = [];
arr.slice(1).forEach((cur,idx)=>{
if (cur<=firstItem) left.push(cur);
if (cur>=firstItem) right.push(cur);
});
return myKP(left).concat(firstItem).concat(myKP(right));
}
快速排序(简洁版)
function sortArr(arr) {
return arr.length <= 1 ? arr : sortArr(arr.slice(1).filter(item => item <= arr[0])).concat(arr[0], sortArr(
arr.slice(1).filter(item => item > arr[0])));
}
回到顶部按钮
var btn = document.getElementById("btn");
btn.addEventListener("click",function() {
var moveto = window.pageYOffset;
var move = setInterval(function() {
if(window.pageYOffset<=0) {
clearInterval(move);
} else {
moveto -= 20;
document.body.scrollTop = document.documentElement.scrollTop = moveto;
}
},10)
})
搜索功能提示
var inp = document.querySelector("input");
inp.addEventListener("input",function(){
var str = inp.value;
var scp = document.createElement("script");
scp.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+str+"&cb=callback";
document.body.appendChild(scp);
document.body.removeChild(scp);
});
var ul = document.querySelector("ul");
function callback(res){
var str1 = "";
for (var i=0;i";
str1 += li;
}
ul.innerHTML = str1;
ul.style.display = "block";
if (ul.children.length == 0){
ul.style.display = "none";
}
}
h5拉起支付 微信&支付宝
参考: https://www.jianshu.com/p/155757d2b9eb
微信: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6
支付宝:
1.api: https://blog.csdn.net/a15088712506/article/details/82894945
2.表单提交: http://www.fly63.com/article/detial/891
(支付成功需指定重定向页面，传参只能通过缓存，且需用localStorage)
填坑记录:
请求头导致兼容问题?
eslint语法检查导致报错
文本溢出处理失效可能没设宽
图片不显示可能由于背景不透明导致
scroll-view中需嵌套view再使用弹性布局
小程序页面定位:顶部宜用absolute,底部用fixed
小程序输入框置空提示语，可用空格代替空字符串
vue打包上传失败，检查.gitignore文件是否包含dist
按钮点击事件无效可能被其他元素fixed挡住，可加z-index:-1
富文本引用时，js里的命名与赋值命名不能重复，且避开关键字保留字
小程序跳转公众号，不能是个人账号且需绑定公众号，一个页面只能有一个webview
webview打开网页后无返回键解决方案，去到空白新页面再显示，返回时设置开关和来源页识别
mode为history404需后端配置:
https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
h5视频:
隐藏控件
*::-webkit-media-controls-panel {
display: none!important;
-webkit-appearance: none;
}
*::--webkit-media-controls-play-button {
display: none!important;
-webkit-appearance: none;
}
*::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
ios兼容问题:
点击事件无效可尝试加cursor: pointer;
-webkit-appearance: none;去除ios下input椭圆形
ios缓存机制，返回不触发onload，尝试onpageshow
vue分享页面链接，详情页路径依旧为首页路径:jssdk / beforeRouteEnter
h5视频标签禁止播放自动全屏: 行内 webkit-playsinline="" playsinline="true"
beforeRouteEnter (to, from, next) {
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
// XXX: 修复iOS版微信HTML5 History兼容性问题
if (isiOS && to.path !== location.pathname) {
// 此处不可使用location.replace
location.assign(to.fullPath)
} else {
next()
}
}
微信端识别二维码需确保二维码图片和包住图片的div都没设置position:fixed;
微信端页面重定向后导致二维码不能长按识别=>刷新页面三次，a链接跳转识别不了改用路由跳转
input框聚焦时:
1.光标上移，不设置line-height
(光标颜色https://segmentfault.com/q/1010000019140946)
2.屏幕自动放大(meta设置user-scalable=no)
3.type为search时，自定义的关闭叉×失效
小程序跳转所传参数为字符串!
字符串不能直接比较大小!
手机熄屏重开会执行onshow,若有重新setdata应考虑对页面的影响
字符串转数值时 , 若超过最大限制16位数则失真(如小程序setData时 , parseInt()等转换时)
var color = {r: 186, g: 218, b: 85};
// RGB to HEX
// (1 << 24)的作用为保证结果是6位数
var rgb2hex = function(r, g, b) {
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b)
.toString(16) // 先转成十六进制，然后返回字符串
.substr(1); // 去除字符串的最高位，返回后面六个字符串
}
rgb2hex(color.r, color.g, color.b)
小程序setInterval在真机调试时最小时间间隔为1s,即200ms等会失效