刷前端面經筆記（二）

時間 2019-11-30

標籤端面筆記简体版

原文原文鏈接

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

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

.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;java

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示例:安全

<style>     
   #box2{
            height: 100px;
            width: 100px;
            background: blue;
        }
        #box2:hover{
            transform: rotate(180deg) scale(.5, .5);
            background: red;
            transition: background 2s ease, transform 2s ease-in 1s;}
    </style>
</head>
<body>
 <div id="box1">BOX1</div>
 <div id="box2">BOX2</div>
</body>
複製代碼

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示例:函數

<style>
        .box{height:100px;width:100px;border:15px solid black;
            animation: changebox 10s ease-in-out   3 alternate paused;
            }
        .box:hover{
            animation-play-state: running;
        }
        @keyframes changebox {
            10% {  background:red;  }
            50% {  width:80px;  }
            70% {  border:15px solid yellow;  }
            100% {  width:180px;  height:180px;  }
        }
    </style>

<body>
 <div class="box"></div>
</body>
複製代碼

4.事件冒泡的事件捕獲

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

5.GET和POST的區別

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。