問題來源：http://markyun.github.io/2015/Front-end-Developer-Questions/
31、視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別
怎么做？）
答：視差滾動（Parallax Scrolling）就是這樣的效果之一。這種技術通過在網頁向下滾動的時候，控
制背景的移動速度比前景的移動速度慢來創建出令人驚嘆的3D效果。
原理：（1）CSS3實現
優點：開發時間短、性能和開發效率比較好，缺點是不能兼容到低版本的瀏覽器
（2）jquery實現
通過控制不同層滾動速度，計算每一層的時間，控制滾動效果。
優點：能兼容到各個版本的，效果可控性好
缺點：開發起來對制作者要求高
（3）插件實現方式
例如：parallax-scrolling，兼容性十分好
32、::before 和 :after中雙冒號和單冒號 有什么區別？解釋一下這2個偽元素的作用。
答：（1）單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素
在css2之前用的是單冒號，之后css3使用時雙冒號。目前除了IE外不兼容雙冒號，其他的瀏覽器兼容雙
冒號，建議還是使用單冒號。
（2）：：before就是以一個子元素的存在，定義在元素主體內容之前的一個偽元素。并不存在與dom之
中，只存在在頁面之中。同理，after是在主體內容之后顯示的。
33、如何修改chrome記住密碼后自動填充表單的黃色背景 ？
答：這黃色背景是chrome會默認給自動填充的input表單加上input：-webkit-autofill私有屬性
input：-webkit-autofill{
background-color : #FAFFBD ;
background-image : none ;
color : #000
}
第一種情況：input文本框是純色背景的
可以對input：-webkit-autofill使用足夠大的純色內陰影來覆蓋input輸入框的黃色背景
input:-webkit-autofill{
-webkit-box-shadow:0 0 0px 1000px white inset;
border：1px solid #ccc ！important;
}
除了chrome默認定義的background-color，background-image，color不能用!important提升其優先級
以外，其他的屬性均可使用!important提升其優先級
第二種情況：input文本框使用背景圖片
1、圖片不復雜可以使用第一種情況解決，純色內陰影覆蓋
2、使用js實現;存在一個問題是使用js方法會導致提交表單的時候無法將value值傳過去。
3、使用form標簽上的關閉自動填充功能：autocomplete="off"
34、你對line-height是如何理解的？
答：行高是指一行文字的高度，具體說是兩行文字間基線的距離。
css中起高度作用的因該是height和line-height，一個沒有定義height屬性，最終其表現作用一定是
line-height。
單行文本垂直居中：把line-height值設置為height一樣大小的值可以實現單行文字的垂直居中，其實
也可以把height刪除。
多行文本垂直居中：需要設置display屬性為inline-block。
35、設置元素浮動后，該元素的display值是多少？（自動變成display:block）
答：display：block
IE出現雙邊框的原因：浮動元素的浮動方向與margin的方向一致會出現雙邊框。
解決bug：（1）給浮動元素添加一個display：inline
（2）給IE6寫一個hack，其值為正常值的一半。
36、怎么讓Chrome支持小于12px 的文字？
答：方法一：首先取消瀏覽器自動調整功能。
.classstyle{ -webkit-text-size-adjust:none; font-size:9px; } （現在無效）
方法二：現在可以使用css3里的一個屬性：transform：scale（）
p{font-size:10px;-webkit-transform:scale(0.8);}//0.8是縮放比例
37、讓頁面里的字體變清晰，變細用CSS怎么做？（-webkit-font-smoothing: antialiased;）
答：-webkit-font-smoothing在window系統下沒有起作用，但是在IOS設備上起作用
-webkit-font-smoothing：antialiased是最佳的，灰度平滑。
38、font-style屬性可以讓它賦值為“oblique” oblique是什么意思？
答：在css規范中這么描述的，讓一種字體表示為斜體（oblique），如果沒有這樣樣式，就可以使用
italic。oblique是一種傾斜的文字，不是斜體。
39、position:fixed;在android下無效怎么處理？
答：在head頭中加入<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
40、如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？（阿里）
答：多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms
41、display:inline-block 什么時候會顯示間隙？(攜程)類似于13題
答：（1）有空格時候會有間隙 解決：移除空格
（2）margin正值的時候 解決：margin使用負值
（3）使用font-size時候 解決：font-size:0、letter-spacing、word-spacing
42、overflow: scroll時不能平滑滾動的問題怎么處理？
答：（1）高度尺寸不確定的時候，使用：overflow-y：scroll;
（2）高度尺寸確定的，要么沒有滾動條，要么直接出現，不會出現跳動。
（3）css3計算calc和vw單位巧妙實現滾動條出現頁面不跳動：
.wrap-outer {
margin-left: calc(100vw - 100%);
}
或.wrap-outer {
padding-left: calc(100vw - 100%);
}
首先，.wrap-outer指的是居中定寬主體的父級，如果沒有，創建一個
然后，calc是css3的計算
100vw是瀏覽器的內部寬度，而100%是可用寬度，不含滾動條
calc（100vw-100%）是瀏覽器的滾動條的寬度
43、有一個高度自適應的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度。
答：（1）height：calc（100%-100px）
（2）absolute positioning：外層position：relative；
百分百自適應元素 position: absolute; top: 100px; bottom: 0; left: 0
44、png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。有沒有了解過webp？
答：（1）png是便攜式網絡圖片（Portable Network Graphics）是一種無損數據壓縮位圖文件格式，
優點是：壓縮比高，色彩好。 大多數地方都可以用。
（2）jpg是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調及顏色平滑變化做的
不錯。在www上，被用來儲存和傳輸照片的格式。
（3）gif是一種位圖文件格式，以8位色重現真色彩的圖像。可以實現動畫效果時候
webp格式
是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%，缺點是壓縮的時間更久了
。兼容性不好，目前谷歌和opera支持。
45、什么是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎么做）還是不懂。。。。。
答：Cookie隔離問題，同一個網頁,多個RemoteWebDriver會共享同一個Cookie。比如想要并行登陸并執
行操作，這樣是不行的。
46、style標簽寫在body后與body前有什么區別？
答：頁面加載自上而下 當然是先加載樣式。
47、css屬性overflow屬性定義溢出元素內容區的內容會如何處理
參數是scroll時候，必會出現滾動條。
參數是auto時候，子元素內容大于父元素時出現滾動條。
參數是visible時候，溢出的內容出現在父元素之外。
參數是hidden時候，溢出隱藏。
48、響應事件
onclick鼠標點擊某個對象
onfocus獲取焦點
onblur 失去焦點
onmousedown冒個鼠標被按下
49、flash和js通過什么類如何交互?
Flash提供了ExternalInterface接口與JavaScript通信，ExternalInterface有兩個方法，call和
addCallback，call的作用是讓Flash調用js里的方法，addCallback是用來注冊flash函數讓js調用。
50、元素的alt和title有什么異同？
這兩個屬性是有些重復了。在不同瀏覽器里面表現有些不同。在alt和title同時設置的時候，alt作為
圖片的替代文字出現，title是圖片的解釋文字。
51、html5標簽
<audio> 標簽定義聲音，比如音樂或其他音頻流。
<canvas> 標簽定義圖形，比如圖表和其他圖像。<canvas> 標簽只是圖形容器，您必須使用腳本來繪制
圖形。 <article>標簽定義外部的內容。比如來自一個外部的新聞提供者的一篇新的文章，或者來自
blog 的文本，或者是來自論壇的文本。亦或是來自其他外部源內容。
<menu> 標簽定義命令的列表或菜單。<menu> 標簽用于上下文菜單、工具欄以及用于列出表單控件和命
令。
command 元素表示用戶能夠調用的命令。<command> 標簽可以定義命令按鈕，比如單選按鈕、復選框或
按鈕。只有當 command 元素位于 menu 元素內時，該元素才是可見的。否則不會顯示這個元素，但是
可以用它規定鍵盤快捷鍵。
52、瀏覽器中使用js跨域獲取數據
只要 協議 、 域名 、 端口 有任何一個 不同, 都被當作是 不同 的域。
53、有效的javascript變量定義規則
第一個字符必須是一個字母、下劃線（_）或一個美元符號（$）；其他字符可以是字母、下劃線、美元
符號或數字。
54、javascript系統方法
parseFloat方法：該方法將一個字符串轉換成對應的小數
escape方法： 該方法返回對一個字符串編碼后的結果字符串
eval方法：該方法將某個參數字符串作為一個JavaScript執行
NaN,即非數值（Not a Number）是一個特殊的數值，這個數值用來表示一個本來要返回數值的操作數未
返回數值的情況（這樣就不會拋出錯誤了）。isNaN（）函數，而任何不能被轉換為數值的值都會導致
這個函數返回true。
55、HTML的Doctype和嚴格模式與混雜模式
對于 HTML 4.01 文檔，
包含嚴格 DTD 的 DOCTYPE 常常導致頁面以標準模式呈現。
包含過度 DTD 和 URI 的 DOCTYPE 也導致頁面以標準模式呈現。
但是有過度 DTD 而沒有 URI 會導致頁面以混雜模式呈現。
DOCTYPE 不存在或形式不正確會導致 HTML 和 XHTML 文檔以混雜模式呈現。
56、JavaScript中 call和apply的描述
call（）方法和apply（）方法的作用相同，他們的區別在于接收參數的方式不同。在使用call（）方
法時，傳遞給函數的參數必須逐個列舉出來。使用apply（）時，傳遞給函數的是參數數組。
function add(c, d){
return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
57、闡述一下CSS sprities？
它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入
的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。
利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背
景定位，background-position可以用數字精確的定位出背景圖片的位置。
利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的性能，這也是CSS Sprites最大
的優點，也是其被廣泛傳播和應用的主要原因；
CSS Sprites能減少圖片的字節，曾經比較過多次3張圖片合并成1張圖片的字節總是小于這3張圖片的字
節總和。所以C錯誤
解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元
素進行命名，從而提高了網頁的制作效率。
更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護
起來更加方便。
下一篇是Front End Developer Questions 前端開發人員問題（三）javascript
文章列表
留言列表
