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-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的一部分。