Front End Developer Questions 前端開發人員問題（二）CSS 後續

問題來源：http://markyun.github.io/2015/Front-end-Developer-Questions/

3一、視差滾動效果，如何給每頁作不一樣的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別
怎麼作？）
答：視差滾動（Parallax Scrolling）就是這樣的效果之一。這種技術經過在網頁向下滾動的時候，控
制背景的移動速度比前景的移動速度慢來建立出使人驚歎的3D效果。
原理：（1）CSS3實現
優勢：開發時間短、性能和開發效率比較好，缺點是不能兼容到低版本的瀏覽器
（2）jquery實現
經過控制不一樣層滾動速度，計算每一層的時間，控制滾動效果。
優勢：能兼容到各個版本的，效果可控性好
缺點：開發起來對製做者要求高
（3）插件實現方式
例如：parallax-scrolling，兼容性十分好

3二、::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個僞元素的做用。
答：（1）單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素
在css2以前用的是單冒號，以後css3使用時雙冒號。目前除了IE外不兼容雙冒號，其餘的瀏覽器兼容雙
冒號，建議仍是使用單冒號。
（2）：：before就是以一個子元素的存在，定義在元素主體內容以前的一個僞元素。並不存在與dom之
中，只存在在頁面之中。同理，after是在主體內容以後顯示的。

3三、如何修改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文本框使用背景圖片
一、圖片不復雜可使用第一種狀況解決，純色內陰影覆蓋
二、使用js實現;存在一個問題是使用js方法會致使提交表單的時候沒法將value值傳過去。
三、使用form標籤上的關閉自動填充功能：autocomplete="off"

3四、你對line-height是如何理解的？
答：行高是指一行文字的高度，具體說是兩行文字間基線的距離。
css中起高度做用的因該是height和line-height，一個沒有定義height屬性，最終其表現做用必定是
line-height。
單行文本垂直居中：把line-height值設置爲height同樣大小的值能夠實現單行文字的垂直居中，其實
也能夠把height刪除。
多行文本垂直居中：須要設置display屬性爲inline-block。

3五、設置元素浮動後，該元素的display值是多少？（自動變成display:block）
答：display：block
IE出現雙邊框的緣由：浮動元素的浮動方向與margin的方向一致會出現雙邊框。
解決bug：（1）給浮動元素添加一個display：inline
（2）給IE6寫一個hack，其值爲正常值的一半。

3六、怎麼讓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是縮放比例

3七、讓頁面裏的字體變清晰，變細用CSS怎麼作？（-webkit-font-smoothing: antialiased;）
答：-webkit-font-smoothing在window系統下沒有起做用，可是在IOS設備上起做用
-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

3八、font-style屬性可讓它賦值爲「oblique」 oblique是什麼意思？
答：在css規範中這麼描述的，讓一種字體表示爲斜體（oblique），若是沒有這樣樣式，就可使用
italic。oblique是一種傾斜的文字，不是斜體。

3九、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

4一、display:inline-block 何時會顯示間隙？(攜程)相似於13題
答：（1）有空格時候會有間隙 解決：移除空格
（2）margin正值的時候 解決：margin使用負值
（3）使用font-size時候 解決：font-size:0、letter-spacing、word-spacing

4二、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%）是瀏覽器的滾動條的寬度

4三、有一個高度自適應的div，裏面有兩個div，一個高度100px，但願另外一個填滿剩下的高度。
答：（1）height：calc（100%-100px）
（2）absolute positioning：外層position：relative；
百分百自適應元素 position: absolute; top: 100px; bottom: 0; left: 0

4四、png、jpg、gif 這些圖片格式解釋一下，分別何時用。有沒有了解過webp？
答：（1）png是便攜式網絡圖片（Portable Network Graphics）是一種無損數據壓縮位圖文件格式，
優勢是：壓縮比高，色彩好。 大多數地方均可以用。
（2）jpg是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調及顏色平滑變化作的
不錯。在www上，被用來儲存和傳輸照片的格式。
（3）gif是一種位圖文件格式，以8位色重現真色彩的圖像。能夠實現動畫效果時候

webp格式
是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%，缺點是壓縮的時間更久了
。兼容性很差，目前谷歌和opera支持。

4五、什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼作）仍是不懂。。。。。
答：Cookie隔離問題，同一個網頁,多個RemoteWebDriver會共享同一個Cookie。好比想要並行登錄並執
行操做，這樣是不行的。

4六、style標籤寫在body後與body前有什麼區別？
答：頁面加載自上而下 固然是先加載樣式。

4七、css屬性overflow屬性定義溢出元素內容區的內容會如何處理
參數是scroll時候，必會出現滾動條。
參數是auto時候，子元素內容大於父元素時出現滾動條。
參數是visible時候，溢出的內容出如今父元素以外。
參數是hidden時候，溢出隱藏。

4八、響應事件
onclick鼠標點擊某個對象
onfocus獲取焦點
onblur 失去焦點
onmousedown冒個鼠標被按下

4九、flash和js經過什麼類如何交互?
Flash提供了ExternalInterface接口與JavaScript通訊，ExternalInterface有兩個方法，call和
addCallback，call的做用是讓Flash調用js裏的方法，addCallback是用來註冊flash函數讓js調用。

50、元素的alt和title有什麼異同？
這兩個屬性是有些重複了。在不一樣瀏覽器裏面表現有些不一樣。在alt和title同時設置的時候，alt做爲
圖片的替代文字出現，title是圖片的解釋文字。

5一、html5標籤
<audio> 標籤訂義聲音，好比音樂或其餘音頻流。
<canvas> 標籤訂義圖形，好比圖表和其餘圖像。<canvas> 標籤只是圖形容器，您必須使用腳原本繪製
圖形。 <article>標籤訂義外部的內容。好比來自一個外部的新聞提供者的一篇新的文章，或者來自
blog 的文本，或者是來自論壇的文本。亦或是來自其餘外部源內容。
<menu> 標籤訂義命令的列表或菜單。<menu> 標籤用於上下文菜單、工具欄以及用於列出表單控件和命
令。
command 元素表示用戶可以調用的命令。<command> 標籤能夠定義命令按鈕，好比單選按鈕、複選框或
按鈕。只有當 command 元素位於 menu 元素內時，該元素纔是可見的。不然不會顯示這個元素，可是
能夠用它規定鍵盤快捷鍵。

5二、瀏覽器中使用js跨域獲取數據
只要 協議 、 域名 、 端口 有任何一個 不一樣, 都被看成是 不一樣 的域。

5三、有效的javascript變量定義規則
第一個字符必須是一個字母、下劃線（_）或一個美圓符號（$）；其餘字符能夠是字母、下劃線、美圓
符號或數字。

5四、javascript系統方法
parseFloat方法：該方法將一個字符串轉換成對應的小數
escape方法： 該方法返回對一個字符串編碼後的結果字符串
eval方法：該方法將某個參數字符串做爲一個JavaScript執行
NaN,即非數值（Not a Number）是一個特殊的數值，這個數值用來表示一個原本要返回數值的操做數未
返回數值的狀況（這樣就不會拋出錯誤了）。isNaN（）函數，而任何不能被轉換爲數值的值都會致使
這個函數返回true。

5五、HTML的Doctype和嚴格模式與混雜模式
對於 HTML 4.01 文檔，
包含嚴格 DTD 的 DOCTYPE 經常致使頁面以標準模式呈現。
包含過分 DTD 和 URI 的 DOCTYPE 也致使頁面以標準模式呈現。
可是有過分 DTD 而沒有 URI 會致使頁面以混雜模式呈現。
DOCTYPE 不存在或形式不正確會致使 HTML 和 XHTML 文檔以混雜模式呈現。

5六、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

5七、闡述一下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