https://www.bilibili.com/video/BV1ek4y1r7GT
文章目錄
day01 css3
1.標籤語義化
顧名思義，合理的標籤幹合適的事情
塊級（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot
行級（display：inline）：a、span、small、strong、em、i、code、
行內塊（display：inline-block）：img、input
區別：
1.行內元素與塊級函數可以相互轉換，通過修改display屬性值來切換塊級元素和行內元素，行內元素display：inline，塊級元素display：block。
2.行內元素和其他行內元素都會在一條水平線上排列，都是在同一行的；塊級元素卻總是會在新的一行開始排列，各個塊級元素獨佔一行，垂直向下排列，若想使其水平方向排序，可使用左右浮動（float：left/right）讓其水平方向排列。
3.行內元素不可以設置寬高，寬度高度隨文本內容的變化而變化，但是可以設置行高（line-height），同時在設置外邊距margin上下無效，左右有效，內填充padding上下無效，左右有效；塊級元素可以設置寬高，並且寬度高度以及外邊距，內填充都可隨意控制。
4.塊級元素可以包含行內元素和塊級元素，還可以容納內聯元素和其他元素；行內元素不能包含塊級元素，只能容納文本或者其他行內元素。
display還有none（隱藏dom）、flex（彈性）、table（表）
display：none和visibility：hidden、ocpacity：0（兼容用fliter）
filter濾鏡：對比度、飽和度、陰影、色相、透明度
display：flex 響應式、兼容性
2.盒子水平垂直居中
項目中經常遇到這種需求，最開始xxx，喜歡用flex，後來發現xxx，在xx博客上突然發現xx更好，xx解決了兼容性（拒絕背書式）
（1）定位1：需要知道父的寬高
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-VlsIX3oj-1591087127372)(upload\image-20200602104327188.png)]
（2）定位2：需要父親有寬高限定
（3）定位3：不需要父有具體寬高限制（兼容性不如上邊Ie9+）
（4）display:flex（ie10+）
（5）js實現就是模擬css寫樣式
（6）固定寬高的父級 display：table-cell 子級inline-block
3.盒模型標準
content、padding、border、margin
標準盒模型（content-box）、ie怪異盒模型（border-box）、flex彈性伸縮盒模型、column多列盒模型
怪異盒模型的好處，固定到border控制寬高，不用重新計算padding和border
flex詳見阮一峯的flex佈局
多列布局
4.幾大經典佈局
–左右固定、中間自適應
聖盃佈局
雙飛翼
使用calc
使用flex
定位實現
–移動端響應式佈局
*媒體查詢（一套）
*rem（應用於兩套 中的移動端）
flex
vh/vw
day 02 js
1.對象深淺拷貝
JSON.parse(JSON.stringify(obj))不能對函數、正則、時間對象、數字對象的時候會不好用
最佳遞歸實現（這個沒搞function），自己加一下用instanceof即可,建議統一用Object.prototype.toString.call
2.堆棧內存+閉包作用域
堆：存儲引用類型值的空間
棧：存儲基本類型值和指定代碼的環境
答案：培訓，對象的key數字和字符串等效
答案：珠峯，Symbol的特點，都是唯一的
答案：培訓，key會轉化成字符串[Obejct object]
答案：‘4’，alert彈出的會轉化成字符串
答案：‘1’ ‘4’
3.一道面向對象面試題
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-4Ewbg242-1591087127430)(https://gitee.com/mus-z/blogImage/raw/master/img/20200602124255.png)]
4.EventLoop
同步異步、宏任務微任務
5.使下面輸出1
var a={
toString = function*(){
yield 1;
yield 2;
yield 3;
}
}
a.toString
會轉換，規則：
對象==字符串 對象.toString
null==undefined 相等 但是和其他值不相等
NaN！=NaN
剩下的都轉換成數字
數據劫持
數組彈出
day03 React常見
1.react雙向綁定
2.跨域問題
因爲同源策略，採用前後端分離
Jsonp
只能get，不安全、有緩存、大小限制
iframe
- window.name
- document.domin
- location.hash
- post message
CORS-服務端配置
http Proxy
webpack添加proxy
nginx反向代理
在build之後proxy不可以用，要服務器端nginx反向代理
3.組件中通信
day 04 入門算法
1.數組去重和排序
去重
排序
冒泡、插入、快速（略
