1 介紹一下標(biāo)準(zhǔn)的CSS的盒子模型莹妒？與低版本IE的盒子模型有什么不同的原茅？

標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content）+ border + padding + margin
低版本IE盒子模型：寬度=內(nèi)容寬度（content+border+padding）+ margin

2 box-sizing屬性？

用來(lái)控制元素的盒子模型的解析模式址否，默認(rèn)為content-box
context-box：W3C的標(biāo)準(zhǔn)盒子模型，設(shè)置元素的 height/width 屬性指的是content部分的高/寬
border-box：IE傳統(tǒng)盒子模型。設(shè)置元素的height/width屬性指的是border + padding + content部分的高/寬

3 CSS選擇器有哪些晒屎？哪些屬性可以繼承？

CSS選擇符：id選擇器(#myid)缓升、類選擇器(.myclassname)鼓鲁、標(biāo)簽選擇器(div, h1, p)、相鄰選擇器(h1 + p)港谊、子選擇器（ul > li）骇吭、后代選擇器（li a）、通配符選擇器（*）歧寺、屬性選擇器（a[rel=”external”]）燥狰、偽類選擇器（a:hover, li:nth-child）

可繼承的屬性：font-size, font-family, color

不可繼承的樣式：border, padding, margin, width, height

優(yōu)先級(jí)（就近原則）：!important > [ id > class > tag ]
!important 比內(nèi)聯(lián)優(yōu)先級(jí)高

4 CSS優(yōu)先級(jí)算法如何計(jì)算棘脐？

元素選擇符： 1
class選擇符： 10
id選擇符：100
元素標(biāo)簽：1000

!important聲明的樣式優(yōu)先級(jí)最高，如果沖突再進(jìn)行計(jì)算龙致。
如果優(yōu)先級(jí)相同蛀缝，則選擇最后出現(xiàn)的樣式。
繼承得到的樣式的優(yōu)先級(jí)最低目代。
5 CSS3新增偽類有那些?

p:first-of-type 選擇屬于其父元素的首個(gè)元素
p:last-of-type 選擇屬于其父元素的最后元素
p:only-of-type 選擇屬于其父元素唯一的元素
p:only-child 選擇屬于其父元素的唯一子元素
p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素
:enabled :disabled 表單控件的禁用狀態(tài)屈梁。
:checked 單選框或復(fù)選框被選中。

6 如何居中div榛了？如何居中一個(gè)浮動(dòng)元素在讶？如何讓絕對(duì)定位的div居中？

div：

border: 1px solid red;
margin: 0 auto;
height: 50px;
width: 80px;
1
2
3
4
border: 1px solid red;
margin: 0 auto;
height: 50px;
width: 80px;
浮動(dòng)元素的上下左右居中：

border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;
1
2
3
4
5
6
7
8
border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;
絕對(duì)定位的左右居中：

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;
1
2
3
4
5
6
7
border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;
還有更加優(yōu)雅的居中方式就是用flexbox霜大，我以后會(huì)做整理构哺。

7 display有哪些值？說(shuō)明他們的作用?

inline（默認(rèn)）–內(nèi)聯(lián)
none–隱藏
block–塊顯示
table–表格顯示
list-item–項(xiàng)目列表
inline-block

8 position的值僧诚？

static（默認(rèn)）：按照正常文檔流進(jìn)行排列遮婶；
relative（相對(duì)定位）：不脫離文檔流，參考自身靜態(tài)位置通過 top, bottom, left, right 定位湖笨；
absolute(絕對(duì)定位)：參考距其最近一個(gè)不為static的父級(jí)元素通過top, bottom, left, right 定位旗扑；
fixed(固定定位)：所固定的參照對(duì)像是可視窗口。

9 CSS3有哪些新特性慈省？

RGBA和透明度
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap（對(duì)長(zhǎng)的不可分割單詞換行）word-wrap：break-word
文字陰影：text-shadow： 5px 5px 5px #FF0000;（水平陰影臀防，垂直陰影，模糊距離边败，陰影顏色）
font-face屬性：定義自己的字體
圓角（邊框半徑）：border-radius 屬性用于創(chuàng)建圓角
邊框圖片：border-image: url(border.png) 30 30 round
盒陰影：box-shadow: 10px 10px 5px #888888
媒體查詢：定義兩套css袱衷，當(dāng)瀏覽器的尺寸變化時(shí)會(huì)采用不同的屬性
10 請(qǐng)解釋一下CSS3的flexbox（彈性盒布局模型）,以及適用場(chǎng)景？

該布局模型的目的是提供一種更加高效的方式來(lái)對(duì)容器中的條目進(jìn)行布局笑窜、對(duì)齊和分配空間致燥。在傳統(tǒng)的布局方式中，block 布局是把塊在垂直方向從上到下依次排列的排截；而 inline 布局則是在水平方向來(lái)排列嫌蚤。彈性盒布局并沒有這樣內(nèi)在的方向限制，可以由開發(fā)人員自由操作断傲。
試用場(chǎng)景：彈性布局適合于移動(dòng)前端開發(fā)脱吱，在Android和ios上也完美支持。

11 用純CSS創(chuàng)建一個(gè)三角形的原理是什么认罩？

首先箱蝠，需要把元素的寬度、高度設(shè)為0。然后設(shè)置邊框樣式宦搬。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
1
2
3
4
5
6
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
12 一個(gè)滿屏品字布局如何設(shè)計(jì)?

第一種真正的品字：

三塊高寬是確定的牙瓢；
上面那塊用margin: 0 auto;居中；
下面兩塊用float或者inline-block不換行床三；
用margin調(diào)整位置使他們居中一罩。
第二種全屏的品字布局:
上面的div設(shè)置成100%杨幼，下面的div分別寬50%撇簿，然后使用float或者inline使其不換行。

13 常見的兼容性問題差购？

不同瀏覽器的標(biāo)簽?zāi)J(rèn)的margin和padding不一樣四瘫。*{margin:0;padding:0;}
IE6雙邊距bug：塊屬性標(biāo)簽float后，又有橫行的margin情況下欲逃，在IE6顯示margin比設(shè)置的大找蜜。hack：display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。
漸進(jìn)識(shí)別的方式稳析，從總體中逐漸排除局部洗做。首先，巧妙的使用“9”這一標(biāo)記彰居，將IE瀏覽器從所有情況中分離出來(lái)诚纸。接著，再次使用“+”將IE8和IE7陈惰、IE6分離開來(lái)畦徘，這樣IE8已經(jīng)獨(dú)立識(shí)別。

{
background-color:#f1ee18;/所有識(shí)別/
.background-color:#00deff\9; /IE6抬闯、7井辆、8識(shí)別/
+background-color:#a200ff;/IE6、7識(shí)別/
_background-color:#1e0bd1;/IE6識(shí)別/
}
1
2
3
4
5
6
{
background-color:#f1ee18;/所有識(shí)別/
.background-color:#00deff\9; /IE6溶握、7杯缺、8識(shí)別/
+background-color:#a200ff;/IE6、7識(shí)別/
_background-color:#1e0bd1;/IE6識(shí)別/
}
設(shè)置較小高度標(biāo)簽（一般小于10px）睡榆，在IE6萍肆，IE7中高度超出自己設(shè)置高度。hack：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度肉微。
IE下匾鸥，可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性；Firefox下碉纳，只能使用getAttribute()獲取自定義屬性勿负。解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性。
Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。
超鏈接訪問過后hover樣式就不出現(xiàn)了奴愉，被點(diǎn)擊訪問過的超鏈接樣式不再具有hover和active了琅摩。解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
14 為什么要初始化CSS樣式

因?yàn)闉g覽器的兼容問題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的锭硼，如果沒對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異房资。

15 absolute的containing block計(jì)算方式跟正常流有什么不同？

無(wú)論屬于哪種檀头，都要先找到其祖先元素中最近的 position 值不為 static 的元素轰异，然后再判斷：

若此元素為 inline 元素，則 containing block 為能夠包含這個(gè)元素生成的第一個(gè)和最后一個(gè) inline box 的 padding box (除 margin, border 外的區(qū)域) 的最小矩形暑始；
否則,則由這個(gè)祖先元素的 padding box 構(gòu)成搭独。
如果都找不到，則為 initial containing block廊镜。

補(bǔ)充：

static(默認(rèn)的)/relative：簡(jiǎn)單說(shuō)就是它的父元素的內(nèi)容框（即去掉padding的部分）
absolute: 向上找最近的定位為absolute/relative的元素
fixed: 它的containing block一律為根元素(html/body)
16 CSS里的visibility屬性有個(gè)collapse屬性值牙肝？在不同瀏覽器下以后什么區(qū)別？

當(dāng)一個(gè)元素的visibility屬性被設(shè)置成collapse值后嗤朴，對(duì)于一般的元素配椭，它的表現(xiàn)跟hidden是一樣的。

chrome中雹姊，使用collapse值和使用hidden沒有區(qū)別股缸。
firefox，opera和IE容为，使用collapse值和使用display：none沒有什么區(qū)別乓序。
17 display:none與visibility：hidden的區(qū)別？

display：none 不顯示對(duì)應(yīng)的元素坎背，在文檔布局中不再分配空間（回流+重繪）
visibility：hidden 隱藏對(duì)應(yīng)元素替劈，在文檔布局中仍保留原來(lái)的空間（重繪）

18 position跟display、overflow得滤、float這些特性相互疊加后會(huì)怎么樣陨献？

display屬性規(guī)定元素應(yīng)該生成的框的類型；position屬性規(guī)定元素的定位類型懂更；float屬性是一種布局方式眨业，定義元素在哪個(gè)方向浮動(dòng)。
類似于優(yōu)先級(jí)機(jī)制：position：absolute/fixed優(yōu)先級(jí)最高沮协，有他們?cè)跁r(shí)龄捡，float不起作用，display值需要調(diào)整慷暂。float 或者absolute定位的元素聘殖，只能是塊元素或表格。

19 對(duì)BFC規(guī)范(塊級(jí)格式化上下文：block formatting context)的理解？

BFC規(guī)定了內(nèi)部的Block Box如何布局奸腺。
定位方案：

內(nèi)部的Box會(huì)在垂直方向上一個(gè)接一個(gè)放置餐禁。
Box垂直方向的距離由margin決定，屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊突照。
每個(gè)元素的margin box 的左邊帮非，與包含塊border box的左邊相接觸。
BFC的區(qū)域不會(huì)與float box重疊讹蘑。
BFC是頁(yè)面上的一個(gè)隔離的獨(dú)立容器末盔，容器里面的子元素不會(huì)影響到外面的元素。
計(jì)算BFC的高度時(shí)衔肢，浮動(dòng)元素也會(huì)參與計(jì)算庄岖。
滿足下列條件之一就可觸發(fā)BFC

根元素，即html
float的值不為none（默認(rèn)）
overflow的值不為visible（默認(rèn)）
display的值為inline-block角骤、table-cell、table-caption
position的值為absolute或fixed
20 為什么會(huì)出現(xiàn)浮動(dòng)和什么時(shí)候需要清除浮動(dòng)心剥？清除浮動(dòng)的方式邦尊？

浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留。由于浮動(dòng)元素不在文檔流中优烧，所以文檔流的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣蝉揍。浮動(dòng)元素會(huì)漂浮在文檔流的塊框上。
浮動(dòng)帶來(lái)的問題：

父元素的高度無(wú)法被撐開畦娄，影響與父元素同級(jí)的元素
與浮動(dòng)元素同級(jí)的非浮動(dòng)元素（內(nèi)聯(lián)元素）會(huì)跟隨其后
若非第一個(gè)元素浮動(dòng)又沾，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁(yè)面顯示的結(jié)構(gòu)熙卡。
清除浮動(dòng)的方式：

父級(jí)div定義height
最后一個(gè)浮動(dòng)元素后加空div標(biāo)簽 并添加樣式clear:both杖刷。
包含浮動(dòng)元素的父標(biāo)簽添加樣式overflow為hidden或auto。
父級(jí)div定義zoom
21 上下margin重合的問題

在重合元素外包裹一層容器驳癌，并觸發(fā)該容器生成一個(gè)BFC滑燃。
例子：

<div class="aside"></div>
<div class="text">
<div class="main"></div>
</div>

.aside {
margin-bottom: 100px;
width: 100px;
height: 150px;
background: #f66;
}
.main {
margin-top: 100px;
height: 200px;
background: #fcc;
}
.text{
/盒子main的外面包一個(gè)div，通過改變此div的屬性使兩個(gè)盒子分屬于兩個(gè)不同的BFC颓鲜，以此來(lái)阻止margin重疊/
overflow: hidden; //此時(shí)已經(jīng)觸發(fā)了BFC屬性表窘。
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="aside"></div>
<div class="text">
<div class="main"></div>
</div>

.aside {
margin-bottom: 100px;
width: 100px;
height: 150px;
background: #f66;
}
.main {
margin-top: 100px;
height: 200px;
background: #fcc;
}
.text{
/盒子main的外面包一個(gè)div，通過改變此div的屬性使兩個(gè)盒子分屬于兩個(gè)不同的BFC甜滨，以此來(lái)阻止margin重疊/
overflow: hidden; //此時(shí)已經(jīng)觸發(fā)了BFC屬性乐严。
}
22設(shè)置元素浮動(dòng)后，該元素的display值是多少衣摩？

自動(dòng)變成display:block

23 移動(dòng)端的布局用過媒體查詢嗎昂验？

通過媒體查詢可以為不同大小和尺寸的媒體定義不同的css，適應(yīng)相應(yīng)的設(shè)備的顯示。

<head>里邊<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>
CSS : @media only screen and (max-device-width:480px) {/css樣式/}
24 使用 CSS 預(yù)處理器嗎凛篙？
Less sass

25 CSS優(yōu)化黍匾、提高性能的方法有哪些？

避免過度約束
避免后代選擇符
避免鏈?zhǔn)竭x擇符
使用緊湊的語(yǔ)法
避免不必要的命名空間
避免不必要的重復(fù)
最好使用表示語(yǔ)義的名字呛梆。一個(gè)好的類名應(yīng)該是描述他是什么而不是像什么
避免锐涯！important，可以選擇其他選擇器
盡可能的精簡(jiǎn)規(guī)則填物，你可以合并不同類里的重復(fù)規(guī)則
26 瀏覽器是怎樣解析CSS選擇器的纹腌？

CSS選擇器的解析是從右向左解析的。若從左向右的匹配滞磺，發(fā)現(xiàn)不符合規(guī)則升薯，需要進(jìn)行回溯，會(huì)損失很多性能击困。若從右向左匹配涎劈，先找到所有的最右節(jié)點(diǎn)，對(duì)于每一個(gè)節(jié)點(diǎn)阅茶，向上尋找其父節(jié)點(diǎn)直到找到根元素或滿足條件的匹配規(guī)則蛛枚，則結(jié)束這個(gè)分支的遍歷。兩種匹配規(guī)則的性能差別很大脸哀，是因?yàn)閺挠蚁蜃蟮钠ヅ湓诘谝徊骄秃Y選掉了大量的不符合條件的最右節(jié)點(diǎn)（葉子節(jié)點(diǎn)）蹦浦，而從左向右的匹配規(guī)則的性能都浪費(fèi)在了失敗的查找上面。
而在 CSS 解析完畢后撞蜂，需要將解析的結(jié)果與 DOM Tree 的內(nèi)容一起進(jìn)行分析建立一棵 Render Tree盲镶，最終用來(lái)進(jìn)行繪圖。在建立 Render Tree 時(shí)（WebKit 中的「Attachment」過程）蝌诡，瀏覽器就要為每個(gè) DOM Tree 中的元素根據(jù) CSS 的解析結(jié)果（Style Rules）來(lái)確定生成怎樣的 Render Tree溉贿。

27 在網(wǎng)頁(yè)中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢送漠？

使用偶數(shù)字體顽照。偶數(shù)字號(hào)相對(duì)更容易和 web 設(shè)計(jì)的其他部分構(gòu)成比例關(guān)系。Windows 自帶的點(diǎn)陣宋體（中易宋體）從 Vista 開始只提供 12闽寡、14代兵、16 px 這三個(gè)大小的點(diǎn)陣，而 13爷狈、15植影、17 px時(shí)用的是小一號(hào)的點(diǎn)。（即每個(gè)字占的空間大了 1 px涎永，但點(diǎn)陣沒變）思币，于是略顯稀疏鹿响。

28 margin和padding分別適合什么場(chǎng)景使用？

何時(shí)使用margin：

需要在border外側(cè)添加空白
空白處不需要背景色
上下相連的兩個(gè)盒子之間的空白谷饿，需要相互抵消時(shí)惶我。
何時(shí)使用padding：

需要在border內(nèi)側(cè)添加空白
空白處需要背景顏色
上下相連的兩個(gè)盒子的空白，希望為兩者之和博投。
兼容性的問題：在IE5 IE6中绸贡，為float的盒子指定margin時(shí)，左側(cè)的margin可能會(huì)變成兩倍的寬度毅哗。通過改變padding或者指定盒子的display：inline解決听怕。

29 元素豎向的百分比設(shè)定是相對(duì)于容器的高度嗎？

當(dāng)按百分比設(shè)定一個(gè)元素的寬度時(shí)虑绵，它是相對(duì)于父容器的寬度計(jì)算的尿瞭，但是，對(duì)于一些表示豎向距離的屬性翅睛，例如 padding-top , padding-bottom , margin-top , margin-bottom 等声搁，當(dāng)按百分比設(shè)定它們時(shí)，依據(jù)的也是父容器的寬度宏所，而不是高度酥艳。

30 全屏滾動(dòng)的原理是什么？用到了CSS的哪些屬性爬骤？

原理：有點(diǎn)類似于輪播，整體的元素一直排列下去莫换，假設(shè)有5個(gè)需要展示的全屏頁(yè)面霞玄，那么高度是500%，只是展示100%拉岁，剩下的可以通過transform進(jìn)行y軸定位坷剧，也可以通過margin-top實(shí)現(xiàn)
overflow：hidden；transition：all 1000ms ease喊暖；
31 什么是響應(yīng)式設(shè)計(jì)惫企？響應(yīng)式設(shè)計(jì)的基本原理是什么？如何兼容低版本的IE陵叽？

響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive Web design)是一個(gè)網(wǎng)站能夠兼容多個(gè)終端狞尔，而不是為每一個(gè)終端做一個(gè)特定的版本。
基本原理是通過媒體查詢檢測(cè)不同的設(shè)備屏幕尺寸做處理巩掺。
頁(yè)面頭部必須有meta聲明的viewport偏序。

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>
1
<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>
32 視差滾動(dòng)效果？

視差滾動(dòng)（Parallax Scrolling）通過在網(wǎng)頁(yè)向下滾動(dòng)的時(shí)候胖替，控制背景的移動(dòng)速度比前景的移動(dòng)速度慢來(lái)創(chuàng)建出令人驚嘆的3D效果研儒。

CSS3實(shí)現(xiàn)
優(yōu)點(diǎn)：開發(fā)時(shí)間短豫缨、性能和開發(fā)效率比較好，缺點(diǎn)是不能兼容到低版本的瀏覽器
jQuery實(shí)現(xiàn)
通過控制不同層滾動(dòng)速度端朵，計(jì)算每一層的時(shí)間好芭，控制滾動(dòng)效果。
優(yōu)點(diǎn)：能兼容到各個(gè)版本的冲呢，效果可控性好
缺點(diǎn)：開發(fā)起來(lái)對(duì)制作者要求高
插件實(shí)現(xiàn)方式
例如：parallax-scrolling舍败，兼容性十分好
33 ::before 和 :after中雙冒號(hào)和單冒號(hào)有什么區(qū)別？解釋一下這2個(gè)偽元素的作用

單冒號(hào)(:)用于CSS3偽類碗硬，雙冒號(hào)(::)用于CSS3偽元素瓤湘。
::before就是以一個(gè)子元素的存在，定義在元素主體內(nèi)容之前的一個(gè)偽元素恩尾。并不存在于dom之中弛说，只存在在頁(yè)面之中。
:before 和 :after 這兩個(gè)偽元素翰意，是在CSS2.1里新出現(xiàn)的木人。起初，偽元素的前綴使用的是單冒號(hào)語(yǔ)法冀偶，但隨著Web的進(jìn)化醒第，在CSS3的規(guī)范里，偽元素的語(yǔ)法被修改成使用雙冒號(hào)进鸠，成為::before ::after

34 你對(duì)line-height是如何理解的稠曼？

行高是指一行文字的高度，具體說(shuō)是兩行文字間基線的距離客年。CSS中起高度作用的是height和line-height霞幅，沒有定義height屬性，最終其表現(xiàn)作用一定是line-height量瓜。
單行文本垂直居中：把line-height值設(shè)置為height一樣大小的值可以實(shí)現(xiàn)單行文字的垂直居中司恳，其實(shí)也可以把height刪除。
多行文本垂直居中：需要設(shè)置display屬性為inline-block绍傲。

35 怎么讓Chrome支持小于12px 的文字扔傅？

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是縮放比例
1
p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是縮放比例
36 讓頁(yè)面里的字體變清晰，變細(xì)用CSS怎么做烫饼？

-webkit-font-smoothing在window系統(tǒng)下沒有起作用猎塞，但是在IOS設(shè)備上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑枫弟。

37 position:fixed;在android下無(wú)效怎么處理邢享？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
38 如果需要手動(dòng)寫動(dòng)畫，你認(rèn)為最小時(shí)間間隔是多久淡诗，為什么骇塘？
多數(shù)顯示器默認(rèn)頻率是60Hz伊履，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms款违。

39 li與li之間有看不見的空白間隔是什么原因引起的唐瀑？有什么解決辦法？

行框的排列會(huì)受到中間空白（回車空格）等的影響插爹，因?yàn)榭崭褚矊儆谧址?這些空白也會(huì)被應(yīng)用樣式哄辣，占據(jù)空間，所以會(huì)有間隔赠尾，把字符大小設(shè)為0力穗，就沒有空格了。
解決方法：

可以將<li>代碼全部寫在一排
浮動(dòng)li中float：left
在ul中用font-size：0（谷歌不支持）气嫁；可以使用letter-space：-3px
40 display:inline-block 什么時(shí)候會(huì)顯示間隙当窗？

有空格時(shí)候會(huì)有間隙 解決：移除空格
margin正值的時(shí)候 解決：margin使用負(fù)值
使用font-size時(shí)候 解決：font-size:0、letter-spacing寸宵、word-spacing
41 有一個(gè)高度自適應(yīng)的div崖面，里面有兩個(gè)div，一個(gè)高度100px梯影，希望另一個(gè)填滿剩下的高度

外層div使用position：relative巫员；高度要求自適應(yīng)的div使用position: absolute; top: 100px; bottom: 0; left: 0

42 png、jpg甲棍、gif 這些圖片格式解釋一下简识，分別什么時(shí)候用。有沒有了解過webp感猛？

png是便攜式網(wǎng)絡(luò)圖片（Portable Network Graphics）是一種無(wú)損數(shù)據(jù)壓縮位圖文件格式.優(yōu)點(diǎn)是：壓縮比高财异，色彩好。 大多數(shù)地方都可以用唱遭。
jpg是一種針對(duì)相片使用的一種失真壓縮方法，是一種破壞性的壓縮呈驶，在色調(diào)及顏色平滑變化做的不錯(cuò)拷泽。在www上，被用來(lái)儲(chǔ)存和傳輸照片的格式袖瞻。
gif是一種位圖文件格式司致，以8位色重現(xiàn)真色彩的圖像×可以實(shí)現(xiàn)動(dòng)畫效果.
webp格式是谷歌在2010年推出的圖片格式脂矫，壓縮率只有jpg的2/3，大小比png小了45%霉晕。缺點(diǎn)是壓縮的時(shí)間更久了庭再，兼容性不好捞奕，目前谷歌和opera支持。
43 style標(biāo)簽寫在body后與body前有什么區(qū)別拄轻？

頁(yè)面加載自上而下 當(dāng)然是先加載樣式颅围。
寫在body標(biāo)簽后由于瀏覽器以逐行方式對(duì)HTML文檔進(jìn)行解析，當(dāng)解析到寫在尾部的樣式表（外聯(lián)或?qū)懺趕tyle標(biāo)簽）會(huì)導(dǎo)致瀏覽器停止之前的渲染恨搓，等待加載且解析樣式表完成之后重新渲染院促，在windows的IE下可能會(huì)出現(xiàn)FOUC現(xiàn)象（即樣式失效導(dǎo)致的頁(yè)面閃爍問題）

44 CSS屬性overflow屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理?

參數(shù)是scroll時(shí)候，必會(huì)出現(xiàn)滾動(dòng)條斧抱。
參數(shù)是auto時(shí)候常拓，子元素內(nèi)容大于父元素時(shí)出現(xiàn)滾動(dòng)條。
參數(shù)是visible時(shí)候辉浦，溢出的內(nèi)容出現(xiàn)在父元素之外弄抬。
參數(shù)是hidden時(shí)候，溢出隱藏盏浙。

45 闡述一下CSS Sprites

將一個(gè)頁(yè)面涉及到的所有圖片都包含到一張大圖中去眉睹，然后利用CSS的 background-image，background- repeat废膘，background-position 的組合進(jìn)行背景定位竹海。利用CSS Sprites能很好地減少網(wǎng)頁(yè)的http請(qǐng)求，從而大大的提高頁(yè)面的性能丐黄；CSS Sprites能減少圖片的字節(jié)斋配。

持續(xù)更新中…