javascript原生技巧篇
W3C官網 css相關資料
https://drafts.csswg.org/
https://www.w3.org/Style/CSS/
Date.now() VS performance.now()
都是計算程式碼的效能
以前我們使用
Date.now()返回自1970年1月1日00:00:00 UTC以來經過的毫秒數
let c=Date.now(); for (let i = 0; i < 1000000; i++) { } let d=Date.now(); console.log(d - c);現在可以使用，高解析度API
let a=performance.now(); for (let i = 0; i < 1000000; i++) { } let b=performance.now(); console.log(b - a);返回自任意紀元以來經過的毫秒數/微秒
精度較高,
30s 大佬的簡歷
https://www.chalarangelo.me/
css 屬性選擇器
讓我們的選擇器更具有表現力,不僅具有特定性和範圍,還能通過HTML傳遞意圖
<div ds-test="aaa"></div> [ds-test*='aaa'] { width: 100px; height: 100px; background-color: khaki; }
console.assert()
如果斷言為false,則將一個錯誤寫入控制檯
console.assert(false,'xxxxxx) // Assertion failed: xxxxxx
學習的地址https://coryrylan.com/
flex 關於滾動條
第一種方案
預設可以設定y軸滾動
<div class="flex"> <div class="aaa"> 可以把需要滾動的內容寫在這裡 </div> </div> .flex{ width: 400px; height: 500px; display: flex; overflow: auto; min-height: 0; } .aaa{ width: 200px; height: 30000px; background-color: deeppink; border:2px solid #777777; }
第二種方案
flex-shrink:0 元素不會縮放
在修改flex-direction: column; 也是預設效果
關於左自適應,右等寬的問題,flex的解決思路
min-width=0flex中min-width自動計算其容器應大於我們想要的容器
完整程式碼
<div class="parent">
<div class="two-flex-child"><h1>1. This is a long string that is OK to truncate please and thank you</h1></div>
<div class="flex-end"></div>
</div>
.parent {
display: flex;
align-items: center;
padding: 10px;
margin: 30px 0;
}
h1{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*第三種,就是比較完美的結論*/
.two-flex-child{
flex:1;
min-width:0;
}
用程式設計的方式測試媒體查詢
window.matchMedia
window.matchMedia('(max-width:750px)').addListener(e=>{
if (e.matches) {
console.log('width小於750');
}else{
console.log('width大於750');
}
})
模板字串的有趣問題
let age=12;
const user=([str1],age)=>{
console.log(str1);// hello
console.log(age);// 12
}
user`hello,${age}`;
let age=12;
const user=([str1,str2],age)=>{
console.log(str1); // hello
console.log(str2); // one
console.log(age); // 12
}
user`hello,${age}one`;
個人理解類似把 string 切割成一個數組,我們可以按照順序解構
let age=12;
let obj={
name:'wo'
}
const user=([str1,str2],age,{name})=>{
console.log(str1); // hello
console.log(str2); // one
console.log(age); // 12
console.log(name);// wo
}
user`hello,${age}one${obj}`;
max-width min-width
max-width
預設
max-height:none
width: 600px;max-width: 100%;width: 100%; max-width: 600px;
這兩種效果相同
範圍0<x<600px
.bbb{
//width: 600px;
//max-width: 100%;
width: 100%;
max-width: 600px;
height:300px;
background-color: firebrick;
}
<div class="bbb"></div>
場景:
父元素為1000
width:600px;max-width:100%因為不返回最大寬度規則,所以是600px,寬度小於600px就都是100%,範圍形象的是螢幕是 100%<600px;就是0-600px;width:1000px;max-width:600px這個超過了600px,違反了最大寬度規則,因此元素降低到600px,相當於定死了,就是最多600px;父母寬度320
width:600px;max-width:100%元素最大為320,所以就是320px, 範圍 0-600px;
min-width
width:100%;min-width:600px 至少600px;範圍就是600px<100%
width:300px;min-width:500px 至少有500px;範圍一直是500px;
width:600px;min-width:100% 優先順序最大min-width,所以一直是100%
- 假如我們在一個文章中只設置
min-height:100px;裡面有很多文字,我們簡單理解裡面文字的高度在最大螢幕的時候是100px,那麼當螢幕縮小的時候文字裡面盒子的高度會增加,他的優先順序就是min-width,範圍就是100px<100% - 預設的時候
min-height:auto它被解析為0
小案例
<div class="aaa">
<div class="bbb">
我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥我很帥
</div>
<div class="ccc"></div>
</div>
.aaa{
display: flex;
}
.bbb{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 50px;
background-color: firebrick;
}
.ccc{
width: 200px;
height: 50px;
margin-left:50px;
background-color: pink;
}
預設值
min-width:auto計算為0,當彈性佈局,min-width不會計算為0,min-width等於內容的大小所以我們需要設定
min-width或者min-height
.c-person__name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width:0; //新增設定為0
}
混合min-width/max-width
.aaa{
min-width:50%;
max-width: 80%;
display: inline-block;
height: 100px;
background-color: khaki;
}
優先順序高的是 min-width
display:block預設的寬度為0或者自身內容撐起來,所以優先順序比較高的應該是min-width
.aaa{
min-width:50%;
max-width: 80%;
display: block;
height: 100px;
background-color: khaki;
}
優先順序高的是 max-width
個人覺得
display:block他的預設寬度是100%,由於它的最大寬度是80%,所以優先順序最大的應該是max-width
綜合案例
width: 500px;
min-width: 50%;
max-width: 100%;
首先我們思考一個問題
width:500px;max-width:100% 它的螢幕範圍就是0-500px,width的優先順序就大於max-width的優先順序
width:500px;min-width:50% 由於我們知道min-width>width的時候展示的是最小長度,設我們的父盒子長度為x,他的範圍就是500px< x*50%,我們側面的思考 min-width的優先順序就大於width的優先順序
綜合結論:
500px<x*50%
備註 (x * 50%)的長度要大於500px所以我們主要思考的問題就是誰的優先順序更高,就突出誰
css 比較功能
.aaa{
max-width:calc(max(500px,100%-80px))
/* 另一種方式 */
max-width:max(500px,calc(100%-80px))
}
我們會發現寬度始終保持在0<x<500px