CSS

Q: HTML引入CSS的方式有哪些？

A: HTML element的style屬性，HTML內部style標簽引入，HTML外部link標簽引入，CSS代碼import引入。

Q: png、jpg、gif三種圖片格式如何選擇，你還知道哪些圖片格式？

A: 顏色簡單、有透明的用png、顏色豐富(照片)用jpg，有動畫的用gif。圖片格式還有webp、svg等等。

Q: 什么是盒子模型？

A: 由內到外：content-box、padding-box、border-box、margin-box，默認width、height是content-box的寬高，IE怪異模式下width、height是border-box的寬高。

Q: 解釋box-sizing: border-box的作用。

A: 設置width、height為border-box的寬高。

Q: 什么是margin折疊？

A: 同一個BFC內的文檔流里的多個相鄰(兄弟和父子)塊級元素的垂直方向的margin合并成一個。

Q: 計算如下margin寬度折疊后的margin寬度：(3px, 5px)，(3px, -5px)，(3px, 5px, -4px)，并說明計算方法。

A: 5px， -2px，1px。計算方法是正值的最大值加上負值的最小值。

Q:

<div style="font-size: 10px">

<p style="font: 2em/2em arial">test</p>

</div>

說出以上代碼里p元素的font-size和line-height的computed value，并解釋原因。

A: p元素的font-size為20px，line-height為40px，em相對于自身的font-size或繼承的font-size。

Q: em和rem的區(qū)別是什么？

A: em相對于自身的字體大小，而rem相對于root element(html)。

Q: 描述一下選擇器的優(yōu)先級。

A: 先比較選擇器里id選擇器的個數，如果相同則比較class選擇器的個數，如果還相同就比較type(tag)選擇器的個數。

Q: inline、block、inline-block的區(qū)別是什么？

A: inline元素和其他inline元素在同一行展示，寬度由內容決定，無法設置寬度；block元素在新行開始，默認寬度為容器的寬度，可以設置寬度；inline-block是使元素以塊級元素的形式呈現(xiàn)在行內。意思就是說，讓這個元素顯示在同一行不換行，但是又可以控制高度和寬度，這相當于內斂元素的增強。

。

Q: 什么是clearfix？寫出clearfix的代碼。

A: float的元素不在文檔流里，無法撐開容器，clearfix就是為了解決這個問題?？梢杂胦verflow:hidden，也可以在容器末尾加一個空div并設置clear:both，還可以用如下代碼：

.clearfix:after {

content: '';

display: block;

clear: both;

}

Q:

<div>

<img src="...">

<p>text</p>

</div>

以上文檔結構，如果設置img為float:left則p的文字會在圖片的右邊展示，如果文字很長則會繞到圖片的下方，給出一個方案讓文字都在圖片的右邊不繞到圖片的下邊，且p需要占滿圖片右邊的空間，并解釋原因。

A: 給p設置overflow:hidden，原理是給p生成新的BFC。

Q: 如何做水平和垂直居中？給出幾種方案。

A: 方案一，已知寬高，設為absolute，然后left、top都設為50%，根據寬高設置負margin來居中；方案二，類似方案一，最后一步用transform: translate(-50%,-50%)；方案三，絕對定位，top、bottom、left、right都設為0，設好寬高，margin設為auto；方案四，display:table-cell + vertical-align:middle。

Q: transition、animation、transform有什么區(qū)別？

A: transition和animation用來做動畫的，transition是從一個狀態(tài)過度到另一個狀態(tài)，而animation是按照keyframes來做動畫。transform用來做位移和變形的。

JS

Q: 給出如下代碼的輸出并解釋原因：

var a = 1;

function f() {

console.log(a);

var a = 2;

}

f();

Q: 輸出undefined，因為變量定義會提前到函數開頭(hoisting)。

Q: 什么是作用域鏈(scope chain)？可舉例說明。

A: 幾個要點：作用域的范圍是函數，函數嵌套函數，查找變量從內層函數依次向外層找，最后找不到在window上找。

Q:

function A() {

this.a = 1;

}

function B() {

this.b = 2;

}

寫出讓B原型繼承A的代碼。

A: B.prototype = new A;

Q: 什么是原型鏈(prototype chain)？可舉例說明。

A: 上一題的例子

var b = new B;

// b.b == 2

// b.a == 1

b.b在b自己的屬性上找，b.a自己的屬性里沒找到則去b的原型即b,__proto__也就是B.prototype里找，一層一層往上找，到null為止，b.__proto__.__proto__是Object.prototype，b.__proto__.__proto__.__proto__為null。

Q: 找出以下代碼的錯誤，并改正：

function A(a) {

this.x = a;

var get = function() {

return this.x;

}

this.print = function() {

console.log(get());

}

}

a = new A(1);

a.print();

A: 在print被調用時，get函數里的this為window，有2種改正方法：

var that = this;

var get = function() {

return that.x;

}

或者

var get = function() {

return this.x;

}.bind(this);

Q: 解釋call、apply、bind的區(qū)別，可舉例說明。

A: call和apply都是調用一個函數，并指定this和參數，call和apply第一個參數都是指定的this的值，區(qū)別在于call第二個參數開始的參數是替換的參數，而apply的第二個參數是一個數組。bind是由一個函數創(chuàng)建一個新函數，并綁定this和部分參數，參數形式和call類似。

Q: ajax和jsonp哪個可以跨域，原理是什么？

A: ajax默認無法跨域，xhr2新增的CORS讓ajax也可以跨域，需要輸出http頭(Access-Control-Allow-Origin)。jsonp可以跨域， 原理是script元素的src可以跨域。

Q: 描述事件捕獲和事件冒泡的順序。

A: 先從外向內捕獲，然后從內向外冒泡。

Q: 描述事件委派(delegation)的原理和優(yōu)點。

A: 原理是在容器節(jié)點上綁定事件，利用冒泡，判斷事件是否在匹配指定的選擇器的節(jié)點上被觸發(fā)。優(yōu)點是只用綁定一次，不用對每個目標做綁定，還有對動態(tài)插入的節(jié)點也生效，無需重新綁定。

Q: 有哪些觸屏事件？

A: touchstart，touchmove，tauchend，touchcancel

Q: 為什么老版本的webkit的click事件有300ms延遲？fastclick.js

A: 為了支持雙擊放大，如果300ms以內有兩次點擊則觸發(fā)放大操作，而不是click。chromium較新版本在沒有雙擊放大的頁面去掉了click事件的300ms延遲。

Q: 為什么cookie的容量比localStorage小？

A: 因為cookie會附帶在http請求的header里，如果容量大會有性能問題。

Q: 描述application cache更新的過程。

A: 第一次訪問緩存manifest文件里列的文件，之后訪問先加載緩存，在后臺加載manifest文件按字節(jié)對比看是否有變化，如果沒變化則說明緩存未失效，否則在后臺按列表更新緩存，在下一次刷新頁面的時候使用新的資源。

Q: classList和dataset分別是什么？

A: classList類似className，區(qū)別是className是空格隔開的字符串，而classList是一個類數組對象，有add、remove、toggle方法。dataset是獲取以data-開頭的屬性的方法。

Q: 描述history.pushState的作用。

A: 無刷新的新增一個歷史記錄，第一個參數是記錄綁定的數據，第二個參數是標題(很多瀏覽器都忽略了)，第三個參數是新的URL。

前端面試題1

HTML

Doctype作用? 嚴格模式與混雜模式如何區(qū)分？它們有何意義?

（1）<!DOCTYPE> 聲明位于文檔中的最前面，處于 <html> 標簽之前。告知瀏覽器的解析器，

? ? ? 用什么文檔類型 規(guī)范來解析這個文檔。

（2）嚴格模式的排版和 JS 運作模式是? 以該瀏覽器支持的最高標準運行。

（3）在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。

（4）DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現(xiàn)。 DOCTYPE 非常詳盡的學習文檔： https://hsivonen.fi/doctype/

行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

（1）CSS規(guī)范規(guī)定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值，

? 比如div默認display屬性值為“block”，成為“塊級”元素； span默認display屬性值為“inline”，是“行內”元素。

（2）行內元素有：a b span img input select strong（強調的語氣）

? 塊級元素有：divulollidldtddh1h2h3h4…p

（3）知名的空元素： <br><hr><img><input><link><meta> 鮮為人知的是： <area><base><col><command><embed><keygen><param><source><track><wbr>

link 和@import 的區(qū)別是？

1.link屬于XHTML標簽，而@import是CSS提供的;

2.頁面被加載時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

3.import只在IE5以上才能識別，而link是XHTML標簽，無兼容問題;

4.link方式的樣式的權重高于@import的權重.

瀏覽器的內核分別是什么?

IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內核原為Presto，現(xiàn)為Blink；

常見兼容性問題？

1.png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.

2. 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一。

3.IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。

? 浮動ie產生的雙倍距離 #box{float:left;width:10px;margin:0 0 0 10px;} 這種情況之下IE會產生20px的距離，解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別) 漸進識別的方式，從總體中逐漸排除局部。

? 首先，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來。

? 接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。 css.bb{background-color:#f1ee18;/*所有識別*/.background-color:#00deff\9;/*IE6、7、8識別*/+background-color:#a200ff;/*IE6、7識別*/_background-color:#1e0bd1;/*IE6識別*/}

4.IE下,既可以使用獲取常規(guī)屬性的方法來獲取自定義屬性, 又可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性. 解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性.

5.IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性. 解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。

6.Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust:none; 解決. 如果這一屬性也不成 使用 transform:scale 來實施

7. 超鏈接訪問過后hover樣式就不出現(xiàn)了 被點擊訪問過的超鏈接樣式不再具有hover和active樣式了

? 解決方法是改變CSS屬性的排列順序:LoVe-HA:a:link{}a:visited{}a:hover{}a:active{}

html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？

1. HTML5 現(xiàn)在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

? 繪畫 canvas

? 用于媒介回放的 video 和 audio 元素

? 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失；

? sessionStorage 的數據在瀏覽器關閉后自動刪除

? 語意化更好的內容元素，比如 article、footer、header、nav、section

? 表單控件，calendar、date、time、email、url、search

? 新的技術webworker, websockt, Geolocation

? 移除的元素

? 純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；

? 對可用性產生負面影響的元素：frame，frameset，noframes；

? 支持HTML5新標簽：

2. IE8/IE7/IE6支持通過document.createElement方法產生的標簽，可以利用這一特性讓這些瀏覽器支持HTML5新標簽，

? 瀏覽器支持新標簽后，還需要添加標簽默認的樣式：

? 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 <!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]--> 3. 如何區(qū)分： DOCTYPE聲明\新增的結構元素\功能元素

你如何理解HTML結構的語義化

去掉或樣式丟失的時候能讓頁面呈現(xiàn)清晰的結構： html本身是沒有表現(xiàn)的，我們看到例如<h1>是粗體，字體大小2em，加粗；<strong>是加粗的，不要認為這是html的表現(xiàn)，這些其實html默認的css樣式在起作用，所以去掉或樣式丟失的時候能讓頁面呈現(xiàn)清晰的結構不是語義化的HTML結構的優(yōu)點，但是瀏覽器都有有默認樣式，默認樣式的目的也是為了更好的表達html的語義，可以說瀏覽器的默認樣式和語義化的HTML結構是不可分割的。

屏幕閱讀器（如果訪客有視障）會完全根據你的標記來“讀”你的網頁. 例如,如果你使用的含語義的標記,屏幕閱讀器就會“逐個拼出”你的單詞,而不是試著去對它完整發(fā)音.PDA、手機等設備可能無法像普通電腦的瀏覽器一樣來渲染網頁（通常是因為這些設備對CSS的支持較弱）

使用語義標記可以確保這些設備以一種有意義的方式來渲染網頁.理想情況下,觀看設備的任務是符合設備本身的條件來渲染網頁. 語義標記為設備提供了所需的相關信息,就省去了你自己去考慮所有可能的顯示情況（包括現(xiàn)有的或者將來新的設備）.例如,一部手機可以選擇使一段標記了標題的文字以粗體顯示.而掌上電腦可能會以比較大的字體來顯示.無論哪種方式一旦你對文本標記為標題,您就可以確信讀取設備將根據其自身的條件來合適地顯示頁面. 搜索引擎的爬蟲也依賴于標記來確定上下文和各個關鍵字的權重

過去你可能還沒有考慮搜索引擎的爬蟲也是網站的“訪客”,但現(xiàn)在它們他們實際上是極其寶貴的用戶.沒有他們的話,搜索引擎將無法索引你的網站,然后一般用戶將很難過來訪問. 你的頁面是否對爬蟲容易理解非常重要,因為爬蟲很大程度上會忽略用于表現(xiàn)的標記,而只注重語義標記. 因此,如果頁面文件的標題被標記,而不是,那么這個頁面在搜索結果的位置可能會比較靠后.除了提升易用性外,語義標記有利于正確使用CSS和JavaScript,因為其本身提供了許多“鉤鉤”來應用頁面的樣式與行為.SEO主要還是靠你網站的內容和外部鏈接的。

便于團隊開發(fā)和維護 W3C給我們定了一個很好的標準，在團隊中大家都遵循這個標準，可以減少很多差異化的東西，方便開發(fā)和維護，提高開發(fā)效率，甚至實現(xiàn)模塊化開發(fā)。

iframe有那些缺點？

1.iframe會阻塞主頁面的Onload事件；

2.iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。

? 使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript 動態(tài)給iframe添加src屬性值，這樣可以可以繞開以上兩個問題。

3.iframe 會降低頁面整體性能， 之前QQ空間的數據是頁面每新增一個iframe，性能下降10%。 更多詳細內容， 參見知乎問答： http://www.zhihu.com/question/20653055

請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？ webstorage和cookie的區(qū)別

cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會 sessionStorage和localStorage的存儲空間更大；達5M之多，而cookie只有4k。 sessionStorage和localStorage有更多豐富易用的接口； sessionStorage和localStorage各自獨立的存儲空間； WebStorage的概念和cookie相似，區(qū)別是它是為了更大容量存儲設計的。Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。

除此之外，WebStorage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規(guī)范的一部分而存在，而WebStorage僅僅是為了在本地“存儲”數據而生。

描述application cache更新的過程

第一次訪問緩存manifest文件里列的文件，之后訪問先加載緩存，在后臺加載manifest文件按字節(jié)對比看是否有變化，如果沒變化則說明緩存未失效，否則在后臺按列表更新緩存，在下一次刷新頁面的時候使用新的資源。

classList和dataset分別是什么？

classList類似className，區(qū)別是className是空格隔開的字符串，而classList是一個類數組對象，有add、remove、toggle方法。dataset是獲取以data-開頭的屬性的方法。

描述history.pushState的作用

無刷新的新增一個歷史記錄，第一個參數是記錄綁定的數據，第二個參數是標題(很多瀏覽器都忽略了)，第三個參數是新的URL。

如何實現(xiàn)瀏覽器內多個標簽頁之間同域頁面的通信?

調用localstorge、cookies等本地存儲方式

webSocket如何兼容低瀏覽器

AdobeFlashSocket

請列舉幾種壓縮HTML文件大小的方式

考察對html結構理解的深淺程度 collapseBooleanAttributes:true,collapseWhitespace:true,conservativeCollapse:true,removeAttributeQuotes:true,removeCommentsFromCDATA:true,removeEmptyAttributes:true,removeOptionalTags:true,removeRedundantAttributes:true,useShortDoctype:true[參見](https://github.com/kangax/html-minifier)

div+css的布局較table布局有什么優(yōu)點？

改版的時候更方便 只要改css文件。

頁面加載速度更快、結構化清晰、頁面顯示簡潔。

表現(xiàn)與結構相分離。

易于優(yōu)化（seo）搜索引擎更友好，排名更容易靠前

談談URL的編碼與解碼

參見： http://www.cnblogs.com/webcc/archive/2012/06/08/2541894.html

Quirks模式是什么？它和Standards模式有什么區(qū)別

從IE6開始，引入了Standards模式，標準模式中，瀏覽器嘗試給符合標準的文檔在規(guī)范上的正確處理達到在指定瀏覽器中的程度。

在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對CSS的支持很差，IE6將對CSS提供更好的支持，然而這時的問題就來了，因為有很多頁面是基于舊的布局方式寫的，而如果IE6支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現(xiàn)有頁面，又提供新的渲染機制呢？

在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。遇到這種問題時的一個常見做法是增加參數和分支，即當某個參數為真時，我們就使用新功能，而如果這個參數不為真時，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是類似這樣做的，它將DTD當成了這個“參數”，因為以前的頁面大家都不會去寫DTD，所以IE6就假定如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

區(qū)別：

總體會有布局、樣式解析和腳本執(zhí)行三個方面的區(qū)別。

盒模型：在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks模式下，IE的寬度和高度還包含了padding和border。

設置行內元素的高寬：在Standards模式下，給<span>等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。

設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用margin:0auto設置水平居中：使用margin:0auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。

（還有很多，答出什么不重要，關鍵是看他答出的這些是不是自己經驗遇到的，還是說都是看文章看的，甚至完全不知道。）

img的alt與title有何異同？b：strong與em的異同？

alt(alttext):為不能顯示圖像、窗體或applets的用戶代理（UA），alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。(在IE瀏覽器下會在沒有title時把alt當成tooltip顯示)title(tooltip):該屬性為設置該屬性的元素提供建議性的信息。 strong:粗體強調標簽，強調，表示內容的重要性 em:斜體強調標簽，更強烈強調，表示內容的強調點

簡述一下src與href的區(qū)別。由此衍伸為啥script的引入使用src，css的引入使用href的。

src用于替換當前元素，href用于在當前文檔和引用資源之間確立聯(lián)系。src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內，例如js腳本，img圖片和frame等元素。<scriptsrc="js.js"></script>當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。href是HypertextReference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，如果我們在文檔中添加<linkhref="common.css"rel="stylesheet"/>那么瀏覽器會識別該文檔為css文件，就會并行下載資源并且不會停止對當前文檔的處理。這也是為什么建議使用link方式來加載css，而不是使用@import方式。

網頁制作會用到的圖片格式有哪些

png-8，png-24，jpeg，gif，svg。

但是上面的那些都不是面試官想要的最后答案。面試官希望聽到是Webp,Apng。（是否有關注新技術，新鮮事物）

科普一下Webp：WebP格式，谷歌（google）開發(fā)的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，并能節(jié)省大量的服務器帶寬資源和數據空間。FacebookEbay等知名網站已經開始測試并使用WebP格式。

在質量相同的情況下，WebP格式圖像的體積要比JPEG格式圖像小40%。Apng：全稱是“AnimatedPortableNetworkGraphics”, 是PNG的位圖動畫擴展，可以實現(xiàn)png格式的動態(tài)圖片效果。04年誕生，但一直得不到各大瀏覽器廠商的支持，直到日前得到 iOSsafari 8的支持，有望代替GIF成為下一代動態(tài)圖標準。

請談一下你對網頁標準和標準制定機構的重要性的理解。

網頁標準和標準制定機構都是為了能讓web發(fā)展的更‘健康’，開發(fā)者遵循統(tǒng)一的標準，降低開發(fā)難度，開發(fā)成本，SEO也會更好做，也不會因為濫用代碼導致各種BUG、安全問題，最終提高網站易用性。

知道什么是微格式嗎？談談理解。在前端構建中應該考慮微格式嗎？

微格式（Microformats）是一種讓機器可讀的語義化XHTML詞匯的集合，是結構化數據的開放標準。是為特殊應用而制定的特殊格式。

優(yōu)點：將智能數據添加到網頁上，讓網站內容在搜索引擎結果界面可以顯示額外的提示。（應用范例：豆瓣，有興趣自行google）

一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優(yōu)化這些圖片的加載，給用戶更好的體驗。

圖片懶加載，在頁面上的未可視區(qū)域可以添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小于后者，優(yōu)先加載。

如果為幻燈片、相冊等，可以使用圖片預加載技術，將當前展示圖片的前一張和后一張優(yōu)先下載。

如果圖片為css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術。

如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗。

如果圖片展示區(qū)域小于圖片的真實大小，則因在服務器端根據業(yè)務需要先行進行圖片壓縮，圖片壓縮后大小與展示一致。

CSS

什么是margin折疊？計算如下margin寬度折疊后的margin寬度：(3px, 5px)，(3px, -5px)，(3px, 5px, -4px)，并說明計算方法。

同一個BFC內的文檔流里的多個相鄰(兄弟和父子)塊級元素的垂直方向的margin合并成一個。

5px， -2px，1px。計算方法是正值的最大值加上負值的最小值。

如何做水平和垂直居中？ 給出幾種方案

方案一，已知寬高，設為absolute，然后left、top都設為50%，根據寬高設置負margin來居中；方案二，類似方案一，最后一步用transform: translate(-50%,-50%)；方案三，絕對定位，top、bottom、left、right都設為0，設好寬高，margin設為auto；方案四，display:table-cell + vertical-align:middle。

transition、animation、transform有什么區(qū)別？

transition和animation用來做動畫的，transition是從一個狀態(tài)過度到另一個狀態(tài)，而animation是按照keyframes來做動畫。transform用來做位移和變形的。

指出以下代碼中p元素的font-size 和 line-height的computed value, 并解釋原因

<divstyle="font-size: 10px"><pstyle="font: 2em/2em arial">test</p></div>

p元素的font-size為20px，line-height為40px，em相對于自身的font-size或繼承的font-size。

介紹一下CSS的盒子模型？

1. 有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 padding; 2. 盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).

CSS 選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？ CSS3新增偽類有那些？

1.id選擇器（ # myid）

2.類選擇器（.myclassname）

3.標簽選擇器（div,h1,p）

4.相鄰選擇器（h1+p）

5.子選擇器（ul<li）

6.后代選擇器（lia）

7.通配符選擇器（ * ）

8.屬性選擇器（a[rel= "external"]）

9.偽類選擇器（a:hover,li:nth-child）

可繼承的樣式： font-sizefont-familycolor,ULLIDLDDDT; 不可繼承的樣式：borderpaddingmarginwidthheight; 優(yōu)先級就近原則，同權重情況下樣式定義最近者為準; 載入樣式以最后載入的定位為準; 優(yōu)先級為: !important>id>class>tagimportant 比 內聯(lián)優(yōu)先級高 CSS3新增偽類舉例： p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。 p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。 p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。 p:only-child 選擇屬于其父元素的唯一子元素的每個 <p> 元素。 p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 <p> 元素。 :enabled:disabled 控制表單控件的禁用狀態(tài)。 :checked 單選框或復選框被選中。

CSS常見的hack方法

http://baike.baidu.com/view/1119452.htm

如何居中div？如何居中一個浮動元素？

1. 給div設置一個寬度，然后添加margin:0 auto屬性 div{width:200px;margin:0 auto;} 2. 居中一個浮動元素

確定容器的寬高 寬500 高300 的層

設置層的外邊距 .div{position:relative;/* 相對定位 */left:50%;top:50%;width:500px;height:300px;/* 高度可以不設 */margin:-150px 0 0 -250px;background-color:pink;/* 方便看效果 */}

列出display的值，說明他們的作用。position的值， relative和absolute定位原點是？

1.block 象塊類型元素一樣顯示。 none 缺省值。象行內元素類型一樣顯示。 inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。 list-item 象塊類型元素一樣顯示，并添加樣式列表標記。

2.absolute 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。 fixed （老IE不支持）

生成絕對定位的元素，相對于瀏覽器窗口進行定位。 relative 生成相對定位的元素，相對于其正常位置進行定位。 static 默認值。沒有定位，元素出現(xiàn)在正常的流中 (忽略 top,bottom,left,rightz-index 聲明)。 *inherit 規(guī)定從父元素繼承 position 屬性的值。

CSS3有哪些新特性

CSS3實現(xiàn)圓角（border-radius:8px），陰影（box-shadow:10px），對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform） transform:rotate(9deg)scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg);//旋轉,縮放,定位,傾斜 增加了更多的CSS選擇器? 多背景 rgba

為什么要初始化CSS樣式, 最簡單的初始化方法

因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。

當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

最簡單的初始化方法就是： *{padding: 0;margin: 0;} （不建議）

請先口述對BFC規(guī)范的理解, 以下文檔結構，如果設置img為float:left則p的文字會在圖片的右邊展示，如果文字很長則會繞到圖片的下方，給出一個方案讓文字都在圖片的右邊不繞到圖片的下邊，且p需要占滿圖片右邊的空間，并解釋原因。

<div><imgsrc="..."><p>text</p></div>

TODO, 添加一份詳細答案

給p設置overflow:hidden，原理是給p生成新的BFC。

float屬性在IE6下有一個經典的layout錯誤問題，屬于IE6的bug，請描述這個bug和相應的解決辦法？

TheIE5/6 DoubledFloat-MarginBug： http://www.positioniseverything.net/explorer/doubled-margin.html

如果需要手動寫動畫，你認為最小時間間隔是多久，為什么, 即動畫的幀率？

多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms 我補充一下這個答案：

1，多數顯示器默認頻率是60Hz現(xiàn)在已經不適用，LCD來說則不存在刷新率的問題。

2，動畫跟游戲不一樣，游戲普遍是每秒60幀。動畫一般是每秒25幀。但由于現(xiàn)在做的頁面動畫更游戲原理更相似，所以每秒60幀也是適用的。

更詳細的解釋可以參照[知乎回答](http://www.zhihu.com/question/21081976)

display:inline-block 什么時候會顯示間隙？

移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing

清除浮動的常用做法

答案參見： http://blog.csdn.net/baicp3/article/details/24691447

解釋CSS屬性zoom 和 hasLayout, BFC的概念，比較hasLayout和BFC的異同

答案參見： http://segmentfault.com/q/1010000000367669

延展： http://www.smallni.com/haslayout-block-formatting-contexts/

什么是外邊距重疊？重疊的結果是什么？

外邊距重疊就是margin-collapse。

在CSS當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。

折疊結果遵循下列計算規(guī)則：

兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。

兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。

兩個外邊距一正一負時，折疊結果是兩者的相加的和。

rgba()和opacity的透明效果有什么不同？