零碎知識(shí)點(diǎn)與工作中積累的小技巧。
一行文本溢出處理:
overflow: hidden;超出部分隱藏
white-space: nowrap;強(qiáng)制文字不換行
text-overflow: ellipsis;文本超出部分顯示省略
多行文本溢出處理:
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;彈性伸縮盒子模型
-webkit-line-clamp: 值;定義顯示文本的行數(shù)
-webkit-box-orient: vertical;伸縮盒對(duì)象子元素排列方式
word-wrap:break-word;(長(zhǎng)標(biāo)點(diǎn)符號(hào)換行需再加該屬性)
word-break:break-all;(針對(duì)英文 , 標(biāo)點(diǎn)和長(zhǎng)數(shù)字的換行需加該屬性)
段落換行：
overflow: hidden;
word-break: break-all;
word-wrap: break-word;
行內(nèi)塊特性(問題):
1.產(chǎn)生間隙,fontsize設(shè)為0;
2.為父元素第一個(gè)子元素設(shè)上外邊距時(shí)父元素被拉下;
3.為行內(nèi)塊兄弟元素其中一個(gè)設(shè)上外邊距時(shí),兩者同時(shí)上下移動(dòng);
父子元素邊框重合問題:
1.子元素設(shè)內(nèi)邊距取代外邊距;
2.給父元素設(shè)display:table;
3.給父元素設(shè)overflow:hidden;
4.給父元素設(shè)透明色(transparent)邊框;
5.給父元素添加偽對(duì)象并設(shè)display:table;
兄弟元素同時(shí)下拉問題:(根本原因:對(duì)齊方式)
1.采用浮動(dòng)或相對(duì)定位;
2.為兩個(gè)元素設(shè)不同的垂直對(duì)齊方式,再給其中一個(gè)元素添加與其對(duì)齊方式相反的外邊距值即可;
3.設(shè)其中一元素屬性為底部外邊距，當(dāng)?shù)撞客膺吘酁檎禃r(shí)移動(dòng)的是該元素的兄弟，負(fù)值時(shí)移動(dòng)的是元素本身;
行內(nèi)元素:不能設(shè)置寬高,所占位置由內(nèi)容決定,不換行,不能設(shè)置上下內(nèi)外邊距(img,input除外)
塊級(jí)元素:相鄰兩個(gè)塊級(jí)元素同時(shí)設(shè)置了上下外邊距時(shí),外邊距會(huì)重合,距離由較大的外邊距決定
常用布局方式:
1.行內(nèi)塊布局:可設(shè)寬高也可一行顯示,容器寬度不夠時(shí)自動(dòng)換行,但行內(nèi)塊容器間會(huì)存在空白節(jié)點(diǎn),需給父元素設(shè)置font-size:0
2.彈性盒子布局:flex屬性是flex-grow,flex-shrink,flex-basis的簡(jiǎn)寫,默認(rèn)值為0 1 auto,auto:(1 1 auto);none:(0 0 auto)
3.定位布局:static/absolute/relative/fixed,絕對(duì)定位以position為非static元素或body進(jìn)行定位(需給位置值);固定定位以瀏覽器窗口進(jìn)行定位
4.浮動(dòng)布局:脫離文檔流,父元素高度塌陷,后方文檔流元素頂上,需清浮動(dòng);水平居中困難,需通過外邊距假裝居中;浮動(dòng)元素高度不一致會(huì)搗亂布局(瀑布流)
清除浮動(dòng):
1.父級(jí)元素增加overflow:hidden/auto;
2.父元素最后加一個(gè)塊級(jí)子元素(空標(biāo)簽)并設(shè)clear:both;
3.父元素添加偽對(duì)象after,設(shè)置為塊級(jí)元素,content:"";clear:both;(height:0);
圖片相對(duì)于父元素居中:
1.top，left士修，right阔籽，bottom設(shè)為50%父元素寬高,子元素不設(shè)寬高;
2.top涣达，left設(shè)50%寇窑，margin-left饮笛，margin-top設(shè)-50%子元素寬高;
3.absolute時(shí)top，left:50%；transform：translate(-50%,-50%);
4.absolute時(shí)margin：auto钠龙；上下左右為0px(或-999px),為寬高中較大者設(shè)長(zhǎng)度;
常用居中:
1.text-align："center";(文本居中)
2.margin：0 auto;(塊元素水平居中)
3.valign：middle(表格單元格內(nèi)容垂直居中)
4.line-height與height等高(垂直居中單行文字)
5.vertical-align："center";(可添加空<span>輔助垂直居中,兩者都需設(shè)置該屬性)
換圖片思路:
1.直接替換圖片路徑
2.利用圖二高度陵像，透明度，絕對(duì)定位覆蓋圖一
3.雪碧圖利用background-position-x(y)移動(dòng)圖片并設(shè)超出隱藏
(淡出淡入寇壳，高度變化結(jié)合transition過渡動(dòng)畫和overflow: hidden)
設(shè)置不可見思路:
1.高度height設(shè)為0
2.透明度opacity:0/1
3.display:none/block
4.顏色color:transparent
5.可見visibility:hidden
(小程序中圖片無故不可見,可設(shè)visibility:visible嘗試)
css畫圓形:
border-radius:50%;即為圓形
但最好設(shè)為寬高的一半,避免兼容問題
css畫三角形:
等腰三角寬高為0,設(shè)三條邊寬度且其中兩條為transparent(頂角所對(duì)邊不用設(shè)寬度)
直角三角寬高為0,設(shè)兩條邊寬度且其中一條為transparent(直角三角為等腰三角一半)
JPEG,PNG與GIF：
JPEG適用于照片(連續(xù)色調(diào))和復(fù)雜圖像,包含1600萬種顏色 , "有損"格式醒颖，不支持透明度和動(dòng)畫
PNG適用于單色和線條構(gòu)成的圖像，包含上百萬種顏色(png-8/png-24/png-32),無損,支持透明
GIF同PNG,也用于logo和剪切畫,包含256種顏色,無損格式,只支持單一顏色透明,文件大,支持動(dòng)畫
注釋:
<!四個(gè)連字符>
// <壳炎！--（可能無效）js行注釋
/*css*/ /*js*/塊注釋
瀏覽器內(nèi)核及兼容前綴:
Blink-opera;-o-歐朋
Gecko-Firefox;-moz-火狐
webkit-safari泞歉，chrome;-webkit-谷歌，safari
Trident-IE;360(雙核),qq,遨游,獵豹;-ms-IE
(需要用到兼容性寫法時(shí)匿辩，常規(guī)寫法需要寫到兼容寫法后面)
scss:
@import+文件名,引入
在嵌套中,&代表當(dāng)前元素,>代表子元素
@charset "utf-8"字符編碼
聲明$color即可在下方多次引用($color)
聲明@mixin加類名{},可用@include+類名引用
@function {@return }
https://blog.csdn.net/jiang_fulai/article/details/80134663
http://www.baidu.com+絕對(duì)路徑
協(xié)議http:// 域名baidu.com 網(wǎng)站名www.baidu.com
Web服務(wù)器網(wǎng)址都為絕對(duì)路徑腰耙，瀏覽器會(huì)轉(zhuǎn)換；
若請(qǐng)求為文件夾則會(huì)返回默認(rèn)文件index.html或default.htm
git的使用:
1.碼云創(chuàng)建項(xiàng)目并復(fù)制地址
2.git clone +創(chuàng)建項(xiàng)目地址(把項(xiàng)目復(fù)制進(jìn)空文件夾)
3.git add ./ 當(dāng)前文件夾(進(jìn)入項(xiàng)目操作(git文件層級(jí)))
4.git commit -m (m為項(xiàng)目提交說明)
5.git pull ——把更新的代碼下載到本地
6.git push ——將本地代碼提交到碼云遠(yuǎn)程庫(kù)里
7.版本回退 git reset --...
Cd ..上行到父文件夾
viewport:
理想視口,即達(dá)到布局視口等于設(shè)備視口的大小(為了能讓更多的內(nèi)容在屏幕里顯示)
物理像素:即分辨率;邏輯像素:指程序上的像素值;設(shè)備像素比=物理像素 / 邏輯像素
ppi:(設(shè)備像素密度)設(shè)備每英寸所占的像素個(gè)數(shù);計(jì)算:設(shè)備的寬高值通過勾股定理計(jì)算出對(duì)角線的值然后除以設(shè)備大小(英寸)
bootstrap:
bootstrap3布局原理(less):多用浮動(dòng)布局
bootstrap4響應(yīng)式布局原理(sass):媒體查詢;百分比;彈性布局
移動(dòng)端圖片的處理:
padding-top百分比的計(jì)算為子元素的高度除以父元素的寬度
當(dāng)padding / margin取形式為百分比的值時(shí)left / right / top / bottom撒汉，都是以父元素的width為參照物的沟优，https://segmentfault.com/a/1190000004231995
媒體查詢:
eg:@media only screen and (min-width: 375px){ }
移動(dòng)端<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
移動(dòng)端布局:
1.rem
2.百分比
3.彈性盒子
4.媒體查詢
5.利用設(shè)備像素比
6.bootstrap柵格系統(tǒng)
//隱藏select的默認(rèn)樣式
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
//清除ie的默認(rèn)選擇框樣式清除，隱藏下拉箭頭
select::-ms-expand {
display: none;
}
//禁止圖片拖拽
draggable="false"
行內(nèi)元素添加動(dòng)畫:
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
-webkit-box-orient: vertical;
//chrome
var isChrome = !!window.chrome; 判斷是否為chrome瀏覽器
瀏覽器默認(rèn)16px,chrome最小為12px,可通過-webkit-text-size-adjust：none;或-webkit-transform: scale( );改變
偽對(duì)象:即為目標(biāo)元素添加一個(gè)子行內(nèi)元素
雙引號(hào)不能嵌套雙引號(hào),除非嵌套的是中文雙引號(hào),單引號(hào)同理
標(biāo)題h1-h6相當(dāng)于正常字體的60% 90% 100% 120% 150% 200%
圖像作為鏈接時(shí)要求關(guān)閉鏈接和圖片text-direction,用邊框來創(chuàng)建鏈接的下劃線
多數(shù)顯示器默認(rèn)頻率是60Hz睬辐，即1秒刷新60次挠阁，所以理論上動(dòng)畫最小間隔為 1/60＊1000ms ＝ 16.7ms
手指在屏幕上進(jìn)行移動(dòng)時(shí)，對(duì)應(yīng)的組件上就會(huì)以 16 ms 一次的頻率不斷觸發(fā) touchmove 事件
字體變清晰: -webkit-font-smoothing: antialiased;（抗鋸齒）
瀏覽器渲染過程：HTML->HTML 解析器->DOM 樹溯饵；樣式->樣式解析器->樣式規(guī)則侵俗；DOM 樹和樣式規(guī)則進(jìn)行結(jié)合形成渲染樹。(CSS 選擇器是從右往左解析的)
若父容器設(shè)置了transform屬性丰刊，則其內(nèi)部子元素的 position:fixed; 屬性會(huì)失效
px像素隘谣，rpx小程序常用單位，em相對(duì)于父元素的字體大小啄巧，rem相對(duì)于根元素html的字體大小寻歧，vh(vw)相對(duì)于當(dāng)前視窗的大小(1%)
border:none與border:0的區(qū)別：
1.性能上的差異：border:0邊框不見，但是瀏覽器依然會(huì)對(duì)border-width和border-color進(jìn)行渲染秩仆，占用瀏覽器的資源码泛，而使用border:none瀏覽器就不會(huì)做出渲染動(dòng)作。
2.兼容性差異：對(duì)于input標(biāo)簽和button標(biāo)簽澄耍，將border設(shè)成0在所有瀏覽器效果都一樣噪珊，將border設(shè)成none在IE6、7中無效齐莲，在其它瀏覽器中有效痢站。
如果想在使用border:none的同時(shí)兼容所有的瀏覽器，只需要加上background屬性即可选酗。（border：0 none阵难；）
字體圖標(biāo)庫(kù)的使用:(web端)
1.直接下載icon,適用于圖標(biāo)少且不需要維護(hù)時(shí),若成體系應(yīng)用則不合適
2.unicode引用(在線鏈接模式 , 本地flie需加https: , 缺點(diǎn)是不支持多色)
定義@font-face與iconfont樣式,亦可自定義樣式 , 格式: <i class="iconfont self"></i>
3.font-class引用 , 與unicode相似 , 類名具有可讀性 , 引入css鏈接 , 格式: <i class="iconfont icon-feiji self"></i>
4.symbol引用,最為推薦 , 支持多色但兼容性一般 , 初始icon通用樣式并引入js鏈接 , 格式:
<svg class="icon self" aria-hidden="true">
<use xlink:href="#icon-laji"></use>
</svg>
5.文件下載方式(vue等項(xiàng)目里使用) , css文件與四種兼容格式文件 , 其他為演示教程文件 , 引入css文件(可改樣式與別名) , 格式:
<i class="iconfont icon-cheliangzhuangtai self"></i>
vue使用: 在main中引入css文件 , 即可在頁面使用
小程序使用: http://www.reibang.com/p/f6f25df98d7c
優(yōu)化(減少頁面加載文件數(shù))
1.合并css , js文件;
2.上拉加載更多:
// 可滾動(dòng)容器的高度
var innerHeight = document.querySelector('#app').clientHeight
// 屏幕尺寸高度
var outerHeight = document.documentElement.clientHeight
// 可滾動(dòng)容器超出當(dāng)前窗口顯示范圍的高度(兼容)
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
if ((outerHeight + scrollTop) >= innerHeight) { }
3.利用雪碧圖 , background-image , background-size , no-repeat , background-position拼接成的大圖及其尺寸,不重復(fù),超出隱藏,以及展示部分小圖的對(duì)應(yīng)位置background-position
https://www.toptal.com/developers/css/sprite-generator/
圖片處理:
1.阿里云oss圖片處理
2.容器超出隱藏 , 圖片絕對(duì)定位居中 , 定高或?qū)?00%(截取或留白 , 不變形)
3.容器定寬高不超出隱藏 , 圖片max-width(height)都設(shè)為100% , 定位居中(不裁剪不變形 , 留白)
(亦可用js處理 , 高大于寬時(shí)定高100% , 反之)
4.將圖片變成背景 , background-size控制
5.寬高100% , object-fit (寬高必填 , 容器可不溢出隱藏 , 屬性本身有該功能) , object-fit: contain(等比縮放 , 留白) , cover(填滿 , 不變形 , 裁剪) , fill(填滿 , 變形 , 不裁剪) , none(原尺寸) , scale-down(尺寸與 none 或 contain 中的一個(gè)相同，取決于它們兩個(gè)之間誰得到的對(duì)象尺寸會(huì)更小一些) object-position , x軸 y軸距離 , 默認(rèn)值50% 50%即居中 , 100% 100%代表位于right bottom
inline-flex:
flex默認(rèn)使容器占據(jù)一整行寬度星掰，高度根據(jù)子元素自適應(yīng)
inline-flex寬高均由子元素自適應(yīng)多望，適合做一些根據(jù)內(nèi)容而不斷增寬的組件 , 如點(diǎn)贊組件(但會(huì)有閃爍現(xiàn)象)
深拷貝:
參考https://segmentfault.com/a/1190000016672263
對(duì)象的淺拷貝
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));
}
快速排序(簡(jiǎn)潔版)
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<res.s.length;i++){
var li = "<li>"+res.s[i]+"</li>";
str1 += li;
}
ul.innerHTML = str1;
ul.style.display = "block";
if (ul.children.length == 0){
ul.style.display = "none";
}
}
h5拉起支付 微信&支付寶
參考: http://www.reibang.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)
填坑記錄:
請(qǐng)求頭導(dǎo)致兼容問題?
eslint語法檢查導(dǎo)致報(bào)錯(cuò)
文本溢出處理失效可能沒設(shè)寬
圖片不顯示可能由于背景不透明導(dǎo)致
scroll-view中需嵌套view再使用彈性布局
小程序頁面定位:頂部宜用absolute,底部用fixed
小程序輸入框置空提示語怀偷，可用空格代替空字符串
vue打包上傳失敗，檢查.gitignore文件是否包含dist
按鈕點(diǎn)擊事件無效可能被其他元素fixed擋住播玖，可加z-index:-1
富文本引用時(shí)椎工，js里的命名與賦值命名不能重復(fù)，且避開關(guān)鍵字保留字
小程序跳轉(zhuǎn)公眾號(hào)蜀踏，不能是個(gè)人賬號(hào)且需綁定公眾號(hào)维蒙，一個(gè)頁面只能有一個(gè)webview
webview打開網(wǎng)頁后無返回鍵解決方案，去到空白新頁面再顯示果覆，返回時(shí)設(shè)置開關(guān)和來源頁識(shí)別
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兼容問題:
點(diǎn)擊事件無效可嘗試加cursor: pointer;
-webkit-appearance: none;去除ios下input橢圓形
ios緩存機(jī)制颅痊，返回不觸發(fā)onload，嘗試onpageshow
vue分享頁面鏈接局待，詳情頁路徑依舊為首頁路徑:jssdk / beforeRouteEnter
h5視頻標(biāo)簽禁止播放自動(dòng)全屏: 行內(nèi) webkit-playsinline="" playsinline="true"
beforeRouteEnter (to, from, next) {
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
// XXX: 修復(fù)iOS版微信HTML5 History兼容性問題
if (isiOS && to.path !== location.pathname) {
// 此處不可使用location.replace
location.assign(to.fullPath)
} else {
next()
}
}
微信端識(shí)別二維碼需確保二維碼圖片和包住圖片的div都沒設(shè)置position:fixed;
微信端頁面重定向后導(dǎo)致二維碼不能長(zhǎng)按識(shí)別=>刷新頁面三次斑响，a鏈接跳轉(zhuǎn)識(shí)別不了改用路由跳轉(zhuǎn)
input框聚焦時(shí):
1.光標(biāo)上移，不設(shè)置line-height
(光標(biāo)顏色https://segmentfault.com/q/1010000019140946)
2.屏幕自動(dòng)放大(meta設(shè)置user-scalable=no)
3.type為search時(shí)钳榨，自定義的關(guān)閉叉×失效
小程序跳轉(zhuǎn)所傳參數(shù)為字符串!
字符串不能直接比較大小!
手機(jī)熄屏重開會(huì)執(zhí)行onshow,若有重新setdata應(yīng)考慮對(duì)頁面的影響
字符串轉(zhuǎn)數(shù)值時(shí) , 若超過最大限制16位數(shù)則失真(如小程序setData時(shí) , parseInt()等轉(zhuǎn)換時(shí))
var color = {r: 186, g: 218, b: 85};
// RGB to HEX
// (1 << 24)的作用為保證結(jié)果是6位數(shù)
var rgb2hex = function(r, g, b) {
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b)
.toString(16) // 先轉(zhuǎn)成十六進(jìn)制舰罚，然后返回字符串
.substr(1); // 去除字符串的最高位，返回后面六個(gè)字符串
}
rgb2hex(color.r, color.g, color.b)
小程序setInterval在真機(jī)調(diào)試時(shí)最小時(shí)間間隔為1s,即200ms等會(huì)失效
