刷前端面經筆記（二）

rottengeek 發布于2019-08-23 15:07 / 2699人閱讀

摘要：但這會帶來高度塌陷的問題，所以要清除浮動。核心內置類，會嘗試先于例外的是，利用的是轉換。安全性請求可被緩存，請求保存在瀏覽器的歷史記錄中則不能被緩存。與相比，的安全性較差，因為發送的數據是的一部分。

1.實現三欄布局（左右兩邊固定寬度，中間自適應）

1)浮動布局
左右兩邊固定寬度，并分別設置float:left和float:right。（但這會帶來高度塌陷的問題，所以要清除浮動。清除浮動的方式有：
a. 給父級盒子設置height；
b.給父級盒子設置overflow:hidden；
c.在父級盒子結束前的盒子添加clear:both；
d.父級盒子也設置浮動；
e.父級div定義偽類：after和zoom，

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

2)絕對定位布局
左中右三個盒子都設置position:absolute;然后分別設置定位
3)flex布局
父盒子設置display:flex;位于中間的子盒子設置flex:1
4)表格布局
父盒子設置display:table;左中右三個盒子設置display:table-cell;左右兩個盒子分別設置寬度；
5)網格布局
父盒子設置display:grid; grid-template-columns:300px auto 300px;

2.== 和 === 的區別

===為恒等符：當等號兩邊的值為相同類型的時候，直接比較等號兩邊的值，值相同則返回true，若等號兩邊的值類型不同時直接返回false。

==為等值符：當等號兩邊的值為相同類型時比較值是否相同，類型不同時會發生類型的自動轉換，轉換為相同的類型后再作比較。
a、如果一個是null、一個是undefined，那么相等。
b、如果一個是字符串，一個是數值，把字符串轉換成數值再進行比較。
c、如果任一值是 true，把它轉換成 1 再比較；如果任一值是 false，把它轉換成 0 再比較。
d、如果一個是對象，另一個是數值或字符串，把對象轉換成基礎類型的值再比較。對象轉換成基礎類型，利用它的toString或者valueOf方法。 js核心內置類，會嘗試valueOf先于toString；例外的是Date，Date利用的是toString轉換。那些不是JavaScript語言核心中的對象則通過各自的實現中定義的方法轉換為原始值。
e、任何其他組合，都不相等。

3.transition和animation

transition
1）語法
transition是一個復合屬性，可設置四個過渡屬性，簡寫方式如下：
transition{ transition-property transition-duration transition-timing-function transition-delay}
transition-property:是用來指定當元素其中一個屬性改變時執行transition效果，值有none（沒有屬性改變）、all（默認值，所有屬性改變），indent（某個屬性名，一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性，如果要設置多個屬性時，需分別設置，中間以逗號隔開）【當其值為none時，transition馬上停止執行，當指定為all時，則元素產生任何屬性值變化時都將執行transition效果】;
transition-duration:過度時間，是用來指定元素轉換過程的持續時間，單位為s(秒)或ms(毫秒)；
transition-timing-function:時間函數，根據時間的推進去改變屬性值的變換速率，值ease（逐漸變慢）、linear（勻速）、ease-in（加速）、ease-out（減速）、ease-in-out（加速然后減速）、cubic-bezier：（自定義一個時間曲線）；
transition-delay:延遲，指定一個動畫開始執行的時間，也就是當改變元素屬性值后多長時間開始執行transition效果，單位為s（秒）或ms（毫秒）；
2）觸發方式
偽類觸發：:hover,:focus,:checked,:active
js觸發：toggleClass
3）以下情況下，屬性值改變不能產生過渡效果
a.background-image，如url(a.jpg)到url(b.jpg)（與瀏覽器支持相關，有的瀏覽器不支持）等
b.float浮動元素
c.height或width使用auto值
d.display屬性在none和其他值（block、inline-block、inline）之間變換
e.position在static和absolute之間變換
transition示例:




 BOX1
 BOX2

animation
1）語法
animation{ animation-name animation-duration animatino-timing-function animation-delay animation-iteration-count animation-direction animtion-play-state animation-fill-mode}
animation-name：用來調用@keyframes定義好的動畫，與@keyframes定義的動畫名稱一致；
animation-duration：指定元素播放動畫所持續的時間；
animation-timing-function：和transition中的transition-timing-function 中的值一樣。根據上面的@keyframes中分析的animation中可能存在多個小動畫，因此這里的值設置是針對每一個小動畫所在所在時間范圍內的屬性變換速率；
animation-delay：定義在瀏覽器開始執行動畫之前的等待的時間、這里是指整個animation執行之前的等待時間，而不是上面所說的多個小動畫；
animation-iteration-count：定義動畫的播放次數，通常是整數，默認是1,若為infinity，動畫將無限多次的播放；
animation-direction：主要用來設置動畫播放次數，其主要有兩個值：normal:默認值，動畫每次訓話都是按順序播放；alternate:動畫播放在第偶數次向前播放，第奇數次想反方向播放（animation-iteration-count取值大于1時設置有效）
animation-play-state：屬性用來控制元素動畫的播放狀態。主要有兩個值：running:可以通過該值將暫停的動畫重新播放，這里的重新播放不是從元素動畫的開始播放，而是從暫停的那個位置開始播放；paused:暫停播放。
animation-fill-mod：　默認情況下，動畫結束后，元素的樣式將回到起始狀態，animation-fill-mode屬性可以控制動畫結束后元素的樣式。主要具有四個屬性值：none（默認，回到動畫沒開始時的狀態。）,forwards（動畫結束后動畫停留在結束狀態）,backwords（動畫回到第一幀的狀態）,both（根據animation-direction輪流應用forwards和backwards規則）。
animation示例:

4.事件冒泡的事件捕獲

事件冒泡，事件會從最內層的元素開始發生，一直向上傳播，直到document對象；
事件捕獲則跟事件冒泡相反，事件會從document對象開始發生，直到最具體的元素；

5.GET和POST的區別

1.發送方式：GET請求數據放在url上，即HTTP的協議頭中；而POST把數據放在HTTP的包體中。
2.大小的限制：GET傳的參數有長度的限制，因為瀏覽器對url的長度有限制；而POST理論上是沒有限制的。
3.安全性：GET請求可被緩存，請求保存在瀏覽器的歷史記錄中；POST則不能被緩存。與POSＴ相比，GET的安全性較差，因為發送的數據是URL的一部分。

云服務器 GPU云服務器家面經崗面經面經分享大廠面經

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101546.html

刷前端面經筆記（一）

摘要：協商緩存從緩存數據庫中取出緩存的標識，然后向瀏覽器發送請求驗證請求的數據是否已經更新，如果已更新則返回新的數據，若未更新則使用緩存數據庫中的緩存數據。 1.CSS的盒子模型包含元素內容content、內邊距padding、邊框border、外邊距marginbox-sizing:border-box;content-box;inherit;1) content-box:總寬度=mar...

劉德剛 2019-08-23 15:07 評論0 收藏0
刷前端面經筆記（十二）

摘要：以下遞歸函數存在棧溢出的風險，請問如何優化解答請實現一個計算最大公約數的函數在這里編寫代碼解答數組去重如果數組中有排除用實現斐波那契數列函數返回第個斐波那契數。父類我的名字是我今年歲原型繼承構造函數繼承組合繼承組合繼承優化 1.以下遞歸函數存在棧溢出的風險，請問如何優化？ function factorial(n){ return n*factorial(n-1) } 解答： ...

Rocko 2019-08-23 15:18 評論0 收藏0
刷到就是賺到！八月阿里 Android 高級崗面經（年薪百萬）

摘要：前段時間，前同事跳槽，機緣巧合下面了阿里，本來憑著試一試的態度，卻不料好事成雙，拿到了，而且薪資也了。面就沒啥東西可聊的，基本上就是對此次面試的一個評價定薪等等一些之內的話題。如果是現場面試，記得關注當天的天氣，提前查一下路線。 ...

aisuhua 2021-09-26 09:55 評論0 收藏0
18年求職面經及總結

摘要：年求職面經及總結我的求職之路差不多走到盡頭了感覺真是精疲力盡了把這大半年的經歷和面試總結寫下來希望能給和我一樣在求職路上煎熬的人一點幫助先說背景微電子科學與工程專業學過兩門和相關的課程語言和單片機這個專業的唯一好處就是大部分人并不知道這個專 18年求職面經及總結我的求職之路差不多走到盡頭了,感覺真是精疲力盡了.把這大半年的經歷和面試總結寫下來,希望能給和我一樣在求職路上煎熬的人一點幫...

zhangwang 2019-08-22 11:07 評論0 收藏0
18年求職面經及總結

摘要：年求職面經及總結我的求職之路差不多走到盡頭了感覺真是精疲力盡了把這大半年的經歷和面試總結寫下來希望能給和我一樣在求職路上煎熬的人一點幫助先說背景微電子科學與工程專業學過兩門和相關的課程語言和單片機這個專業的唯一好處就是大部分人并不知道這個專 18年求職面經及總結我的求職之路差不多走到盡頭了,感覺真是精疲力盡了.把這大半年的經歷和面試總結寫下來,希望能給和我一樣在求職路上煎熬的人一點幫...

fjcgreat 2019-08-01 17:38 評論0 收藏0