一柒爸、頁面布局問題
模擬移動端頁面受裹，大體布局思路是，頭部區(qū)域动猬，中間內容區(qū)域啤斗，底部區(qū)域
大體結構：
<html>
<head></head>
<body>
<header>頭部</header>
<section>中間內容</section>
<footer>底部</footer>
</body>
</html>
布局方式①：利用定位
html,body設置width，height 百分百
body相對定位赁咙，溢出隱藏
header钮莲，section，footer 絕對定位
在section中處理內容彼水，下拉刷新崔拥，上拉加載更多等
布局方式②：利用流體盒子 (需處理流體盒子兼容性問題)
html,body設置width，height 百分百
body設置display:flex,flex-direction: column凤覆，溢出隱藏
section 設置 flex:1
在section中處理內容链瓦，下拉刷新，上拉加載更多等
二盯桦、input輸入框獲取焦點或輸入時慈俯，整個頁面白屏的問題渤刃。
解決方案 ： 為input直接父級設置 position:relative;
三、滾動條卡頓問題
解決方案：為根節(jié)點設置 -webkit-overflow-scrolling : touch; 開啟硬件加速
四肥卡、點擊事件觸發(fā)背景高亮問題
解決方案：*{-webkit-tap-highlight-color: transparent;} or *{-webkit-tap-highlight-color: rgba(0,0,0,0);} 或者直接設置到根節(jié)點上
五溪掀、軟鍵盤彈出遮擋底部input輸入框問題
思路：①獲取軟鍵盤彈出前 滾動條滾動高度 ②輸入框獲取焦點時，將內容高度賦值給滾動條滾動高度 ③輸入框失去焦點時步鉴，將軟鍵盤彈出前滾動條滾動高度賦值給滾動條滾動高度
六揪胃、軟鍵盤彈出頂起頁面布局問題
思路：軟鍵盤彈出時（大多情況時在，輸入框獲取焦點時）氛琢，將body高度設置成瀏覽器可視區(qū)高度
document.body.offsetHeight = document.body.clientHeight
七喊递、關于位置移動的問題
請使用 transform + translate（瀏覽器會開啟一個獨立層，無需重繪） 代替 top right bottom left （導致頁面重繪阳似，影響頁面性能骚勘，設置卡頓）
