成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

刷前端面經(jīng)筆記（二）

rottengeek / 2705人閱讀

摘要：但這會帶來高度塌陷的問題，所以要清除浮動。核心內(nèi)置類，會嘗試先于例外的是，利用的是轉(zhuǎn)換。安全性請求可被緩存，請求保存在瀏覽器的歷史記錄中則不能被緩存。與相比，的安全性較差，因?yàn)榘l(fā)送的數(shù)據(jù)是的一部分。

1.實(shí)現(xiàn)三欄布局（左右兩邊固定寬度，中間自適應(yīng)）

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

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

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

2.== 和 === 的區(qū)別

===為恒等符：當(dāng)?shù)忍杻蛇叺闹禐橄嗤愋偷臅r候，直接比較等號兩邊的值，值相同則返回true，若等號兩邊的值類型不同時直接返回false。

==為等值符： 當(dāng)?shù)忍杻蛇叺闹禐橄嗤愋蜁r比較值是否相同，類型不同時會發(fā)生類型的自動轉(zhuǎn)換，轉(zhuǎn)換為相同的類型后再作比較。
a、如果一個是null、一個是undefined，那么相等。
b、如果一個是字符串，一個是數(shù)值，把字符串轉(zhuǎn)換成數(shù)值再進(jìn)行比較。
c、如果任一值是 true，把它轉(zhuǎn)換成 1 再比較；如果任一值是 false，把它轉(zhuǎn)換成 0 再比較。
d、如果一個是對象，另一個是數(shù)值或字符串，把對象轉(zhuǎn)換成基礎(chǔ)類型的值再比較。對象轉(zhuǎn)換成基礎(chǔ)類型，利用它的toString或者valueOf方法。 js核心內(nèi)置類，會嘗試valueOf先于toString；例外的是Date，Date利用的是toString轉(zhuǎn)換。那些不是JavaScript語言核心中的對象則通過各自的實(shí)現(xiàn)中定義的方法轉(zhuǎn)換為原始值。
e、任何其他組合，都不相等。

3.transition和animation

transition
1）語法
transition是一個復(fù)合屬性，可設(shè)置四個過渡屬性，簡寫方式如下：
transition{ transition-property transition-duration transition-timing-function transition-delay}
transition-property:是用來指定當(dāng)元素其中一個屬性改變時執(zhí)行transition效果，值有none（沒有屬性改變）、all（默認(rèn)值，所有屬性改變），indent（某個屬性名，一條transition規(guī)則，只能定義一個屬性的變化，不能涉及多個屬性，如果要設(shè)置多個屬性時，需分別設(shè)置，中間以逗號隔開）【當(dāng)其值為none時，transition馬上停止執(zhí)行，當(dāng)指定為all時，則元素產(chǎn)生任何屬性值變化時都將執(zhí)行transition效果】;
transition-duration:過度時間，是用來指定元素轉(zhuǎn)換過程的持續(xù)時間，單位為s(秒)或ms(毫秒)；
transition-timing-function:時間函數(shù)，根據(jù)時間的推進(jìn)去改變屬性值的變換速率，值ease（逐漸變慢）、linear（勻速）、ease-in（加速）、ease-out（減速）、ease-in-out（加速然后減速）、cubic-bezier：（自定義一個時間曲線）；
transition-delay:延遲，指定一個動畫開始執(zhí)行的時間，也就是當(dāng)改變元素屬性值后多長時間開始執(zhí)行transition效果，單位為s（秒）或ms（毫秒）；
2）觸發(fā)方式
偽類觸發(fā)：:hover,:focus,:checked,:active
js觸發(fā)：toggleClass
3）以下情況下，屬性值改變不能產(chǎn)生過渡效果
a.background-image，如url(a.jpg)到url(b.jpg)（與瀏覽器支持相關(guān)，有的瀏覽器不支持）等
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：用來調(diào)用@keyframes定義好的動畫，與@keyframes定義的動畫名稱一致；
animation-duration：指定元素播放動畫所持續(xù)的時間；
animation-timing-function：和transition中的transition-timing-function 中的值一樣。根據(jù)上面的@keyframes中分析的animation中可能存在多個小動畫，因此這里的值設(shè)置是針對每一個小動畫所在所在時間范圍內(nèi)的屬性變換速率；
animation-delay：定義在瀏覽器開始執(zhí)行動畫之前的等待的時間、這里是指整個animation執(zhí)行之前的等待時間，而不是上面所說的多個小動畫；
animation-iteration-count：定義動畫的播放次數(shù)，通常是整數(shù)，默認(rèn)是1,若為infinity，動畫將無限多次的播放；
animation-direction：主要用來設(shè)置動畫播放次數(shù)，其主要有兩個值：normal:默認(rèn)值，動畫每次訓(xùn)話都是按順序播放；alternate:動畫播放在第偶數(shù)次向前播放，第奇數(shù)次想反方向播放（animation-iteration-count取值大于1時設(shè)置有效）
animation-play-state：屬性用來控制元素動畫的播放狀態(tài)。主要有兩個值：running:可以通過該值將暫停的動畫重新播放，這里的重新播放不是從元素動畫的開始播放，而是從暫停的那個位置開始播放；paused:暫停播放。
animation-fill-mod：　默認(rèn)情況下，動畫結(jié)束后，元素的樣式將回到起始狀態(tài)，animation-fill-mode屬性可以控制動畫結(jié)束后元素的樣式。主要具有四個屬性值：none（默認(rèn)，回到動畫沒開始時的狀態(tài)。）,forwards（動畫結(jié)束后動畫停留在結(jié)束狀態(tài)）,backwords（動畫回到第一幀的狀態(tài)）,both（根據(jù)animation-direction輪流應(yīng)用forwards和backwards規(guī)則）。
animation示例:
4.事件冒泡的事件捕獲

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

5.GET和POST的區(qū)別

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101546.html

相關(guān)文章

  • 刷前端面經(jīng)筆記（一）

    摘要：協(xié)商緩存從緩存數(shù)據(jù)庫中取出緩存的標(biāo)識，然后向?yàn)g覽器發(fā)送請求驗(yàn)證請求的數(shù)據(jù)是否已經(jīng)更新，如果已更新則返回新的數(shù)據(jù)，若未更新則使用緩存數(shù)據(jù)庫中的緩存數(shù)據(jù)。 1.CSS的盒子模型 包含元素內(nèi)容content、內(nèi)邊距padding、邊框border、外邊距marginbox-sizing:border-box;content-box;inherit;1) content-box:總寬度=mar...

    劉德剛 評論0 收藏0

  • 刷前端面經(jīng)筆記（十二）

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

    Rocko 評論0 收藏0

  • 刷到就是賺到！八月阿里 Android 高級崗面經(jīng)（年薪百萬）

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

    aisuhua 評論0 收藏0

  • 18年求職面經(jīng)及總結(jié)

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

    zhangwang 評論0 收藏0

  • 18年求職面經(jīng)及總結(jié)

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

    fjcgreat 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<