刷前端面經筆記（二）
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 示例:
<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-out3 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 的一部分。
