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;
浮動(dòng)元素的上下左右居中：
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;
還有更加優(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)位置通過(guò) top, bottom, left, right 定位烤惊；
absolute(絕對(duì)定位)：參考距其最近一個(gè)不為static的父級(jí)元素通過(guò)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)排列肋坚。彈性盒布局并沒(méi)有這樣內(nèi)在的方向限制，可以由開(kāi)發(fā)人員自由操作肃廓。
試用場(chǎng)景：彈性布局適合于移動(dòng)前端開(kāi)發(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;
12 一個(gè)滿屏品字布局如何設(shè)計(jì)?
第一種真正的品字：
三塊高寬是確定的呻澜；
上面那塊用margin: 0 auto;居中；
下面兩塊用float或者inline-block不換行惨险；
用margin調(diào)整位置使他們居中羹幸。
第二種全屏的品字布局:
上面的div設(shè)置成100%肥隆，下面的div分別寬50%碌识，然后使用float或者inline使其不換行膨报。
13 常見(jiàn)的兼容性問(wèn)題蛉腌？
不同瀏覽器的標(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分離開(kāi)來(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í)別*/
}
設(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)一通過(guò)getAttribute()獲取自定義屬性寡夹。
Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示,可通過(guò)加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。
超鏈接訪問(wèn)過(guò)后hover樣式就不出現(xiàn)了厂置，被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不再具有hover和active了菩掏。解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
14 為什么要初始化CSS樣式
因?yàn)闉g覽器的兼容問(wèn)題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的昵济，如果沒(méi)對(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沒(méi)有區(qū)別是偷。
firefox拳氢，opera和IE，使用collapse值和使用display：none沒(méi)有什么區(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èn)題：
父元素的高度無(wú)法被撐開(kāi)沧竟，影響與父元素同級(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重合的問(wèn)題
在重合元素外包裹一層容器糕非，并觸發(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球榆，通過(guò)改變此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)端的布局用過(guò)媒體查詢嗎？
通過(guò)媒體查詢可以為不同大小和尺寸的媒體定義不同的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)化空执、提高性能的方法有哪些窘茁？
避免過(guò)度約束
避免后代選擇符
避免鏈?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」過(guò)程），瀏覽器就要為每個(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 開(kāi)始只提供 12、14醋寝、16 px 這三個(gè)大小的點(diǎn)陣搞挣，而 13、15音羞、17 px時(shí)用的是小一號(hào)的點(diǎn)囱桨。（即每個(gè)字占的空間大了 1 px，但點(diǎn)陣沒(méi)變）嗅绰，于是略顯稀疏舍肠。
28 margin和padding分別適合什么場(chǎng)景使用？
何時(shí)使用margin：
需要在border外側(cè)添加空白
空白處不需要背景色
上下相連的兩個(gè)盒子之間的空白窘面，需要相互抵消時(shí)翠语。
何時(shí)使用padding：
需要在border內(nèi)側(cè)添加空白
空白處需要背景顏色
上下相連的兩個(gè)盒子的空白，希望為兩者之和财边。
兼容性的問(wèn)題：在IE5 IE6中肌括，為float的盒子指定margin時(shí)，左側(cè)的margin可能會(huì)變成兩倍的寬度酣难。通過(guò)改變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%签夭，剩下的可以通過(guò)transform進(jìn)行y軸定位，也可以通過(guò)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è)特定的版本浅悉。
基本原理是通過(guò)媒體查詢檢測(cè)不同的設(shè)備屏幕尺寸做處理趟据。
頁(yè)面頭部必須有meta聲明的viewport。
<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>
32 視差滾動(dòng)效果术健？
視差滾動(dòng)（Parallax Scrolling）通過(guò)在網(wǎng)頁(yè)向下滾動(dòng)的時(shí)候汹碱，控制背景的移動(dòng)速度比前景的移動(dòng)速度慢來(lái)創(chuàng)建出令人驚嘆的3D效果。
CSS3實(shí)現(xiàn)
優(yōu)點(diǎn)：開(kāi)發(fā)時(shí)間短荞估、性能和開(kāi)發(fā)效率比較好咳促，缺點(diǎn)是不能兼容到低版本的瀏覽器
jQuery實(shí)現(xiàn)
通過(guò)控制不同層滾動(dòng)速度，計(jì)算每一層的時(shí)間勘伺，控制滾動(dòng)效果跪腹。
優(yōu)點(diǎn)：能兼容到各個(gè)版本的，效果可控性好
缺點(diǎn)：開(kāi)發(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霉涨，沒(méi)有定義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是縮放比例
36 讓頁(yè)面里的字體變清晰框产，變細(xì)用CSS怎么做？
-webkit-font-smoothing在window系統(tǒng)下沒(méi)有起作用错洁，但是在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"/>
38 如果需要手動(dòng)寫動(dòng)畫描睦，你認(rèn)為最小時(shí)間間隔是多久，為什么窿锉？
多數(shù)顯示器默認(rèn)頻率是60Hz酌摇，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms嗡载。
39 li與li之間有看不見(jiàn)的空白間隔是什么原因引起的窑多？有什么解決辦法？
行框的排列會(huì)受到中間空白（回車空格）等的影響洼滚，因?yàn)榭崭褚矊儆谧址?這些空白也會(huì)被應(yīng)用樣式埂息，占據(jù)空間，所以會(huì)有間隔，把字符大小設(shè)為0千康，就沒(méi)有空格了享幽。
解決方法：
可以將<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í)候用澜建。有沒(méi)有了解過(guò)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è)面閃爍問(wèn)題）
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é)何什。
