1褐捻、介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的欺旧？

??????標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content） + 邊框?qū)挾龋╞order ）+ 內(nèi)邊距（padding ）+ 外邊距（margin）；
??????低版本IE盒子模型：寬度=內(nèi)容寬度（content+border+padding）+ 外邊距（margin），與標(biāo)準(zhǔn)盒子模型不同的地方在于內(nèi)容部分包含了border和padding霉颠；

2、box-sizing屬性荆虱？

??????它是用來控制元素的盒子模型的解析模式蒿偎，其默認(rèn)為值為：content-box，該屬性不可被繼承怀读。它還可以設(shè)置值為“border-box”和“inherit”诉位，其主要作用是統(tǒng)一CSS盒子模型規(guī)范，屬性值含義如下：

① context-box：使用W3C的標(biāo)準(zhǔn)盒子模型菜枷，設(shè)置元素的 height/width 屬性指的是content部分的高/寬苍糠；
② border-box：使用IE傳統(tǒng)盒子模型。設(shè)置元素的height/width屬性指的是border + padding + content部分的高/寬啤誊；
③ inherit：從父元素繼承box-sizeing的值岳瞭。

3、CSS選擇器有哪些蚊锹？哪些屬性可以繼承瞳筏？

① CSS選擇器按照類型區(qū)分有：ID選擇器(#id)、Class選擇器(.class)牡昆、Tag選擇器(div)姚炕、相鄰選擇器(div + p)、子選擇器（ul > li）丢烘、后代選擇器（li a）柱宦、通配符選擇器（*）、屬性選擇器（a[rel=”external”]）铅协、偽類選擇器（a:hover, p:nth-child）捷沸、偽元素選擇器（div::after，div::before）;
②可繼承的屬性：font-size, font-family, color狐史；
③不可繼承的樣式：border, padding, margin, width, height痒给；
④優(yōu)先級（詳情參考MDN描述）：選擇器優(yōu)先級權(quán)重：!important > inline > id > 偽類選擇器 > 屬性選擇器 > class > 偽元素選擇器 > tag > * > 瀏覽器繼承屬性。

4骏全、CSS選擇器及其優(yōu)先級計算苍柏？

① CSS中的選擇器有：

• ID 選擇器， 如 #id{}
• 類選擇器姜贡， 如 .class{}
• 屬性選擇器试吁， 如 a[href="segmentfault.com"]{}
• 偽類選擇器， 如 :hover{}
• 偽元素選擇器， 如 ::before{}
• 標(biāo)簽選擇器熄捍， 如 span{}
• 通配選擇器烛恤， 如 *{}

② 選擇器的優(yōu)先級：

內(nèi)聯(lián)樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標(biāo)簽選擇器 = 偽元素選擇器

5、CSS3新增偽類有那些?

6功炮、如何居中div？如何居中一個浮動元素术唬？如何讓絕對定位的div居中薪伏？

① 水平居中：

border: 1px solid red;
margin: 0 auto;
height: 50px;
width: 80px;

② 浮動元素的上下左右居中：

border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;

③ 絕對定位的左右居中：

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;

④ Flex水平居中div

display: flex;
justify-content: center;

⑤ Flex元素垂直居中

display: flex;
align-items: center;

7、display有哪些值粗仓？說明他們的作用?

8肖油、position的值兼吓？

9、CSS3有哪些新特性疲恢？

10畅形、請解釋一下CSS3的flexbox（彈性盒布局模型）,以及適用場景？

???????該布局模型的目的是提供一種更加高效的方式來對容器中的條目進行布局诉探、對齊和分配空間日熬。在傳統(tǒng)的布局方式中，block 布局是把塊在垂直方向從上到下依次排列的肾胯；而 inline 布局則是在水平方向來排列竖席。彈性盒布局并沒有這樣內(nèi)在的方向限制，可以由開發(fā)人員自由操作阳液。

???????試用場景：彈性布局適合于移動前端開發(fā)怕敬，在Android和ios上也完美支持。

11帘皿、用純CSS創(chuàng)建一個三角形的原理是什么东跪？

需要把元素的寬度、高度設(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丁恭、一個滿屏品字布局如何設(shè)計?

① 情況一（第一種真正的品字）：

三塊高寬是確定的；
上面那塊用margin: 0 auto;居中斋日；
下面兩塊用float或者inline-block不換行牲览；
用margin調(diào)整位置使他們居中。

② 情況2（第二種全屏的品字布局）：

上面的div設(shè)置成100%恶守，下面的div分別寬50%第献，然后使用float或者inline使其不換行。

13兔港、常見的兼容性問題庸毫？

① 常見的兼容性問題：

② IE瀏覽器的兼容性：

???????通常情況下，IE版本的兼容性問題比較嚴(yán)重刁俭，尤其是IE9以下版本，我們可以使用Hacker去處理相關(guān)問題韧涨。在CSS屬性名稱前面添加Hacker符號即可使用Hacker功能牍戚，.英文點號可以讓IE6-IE8識別，+可以被IE6-IE7單獨識別虑粥，_號可以被IE6單獨識別如孝。

???????通過漸進考慮設(shè)置，可以分別識別出IE6娩贷、IE7第晰、IE8，以下是示例代碼：

{
    background-color:#f1ee18;/*所有識別*/
    .background-color:#00deff\9; /*IE6、7茁瘦、8識別*/
    +background-color:#a200ff;/*IE6品抽、7識別*/
    _background-color:#1e0bd1;/*IE6識別*/
}

14、為什么要初始化CSS樣式

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

15腔稀、absolute的containing block計算方式跟正常流有什么不同盆昙？

???????無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素焊虏，然后再判斷：
若此元素為 inline 元素淡喜，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區(qū)域) 的最小矩形；否則,則由這個祖先元素的 padding box 構(gòu)成炕淮。如果都找不到拆火，則為 initial containing block。

補充：

static(默認(rèn)的)/relative：簡單說就是它的父元素的內(nèi)容框（即去掉padding的部分）
absolute: 向上找最近的定位為absolute/relative的元素
fixed: 它的containing block一律為根元素(html/body)

16涂圆、CSS里的visibility屬性有個collapse屬性值们镜？在不同瀏覽器下以后什么區(qū)別？

???????當(dāng)一個元素的visibility屬性被設(shè)置成collapse值后润歉，對于一般的元素模狭，它的表現(xiàn)跟hidden是一樣的。chrome中踩衩，使用collapse值和使用hidden沒有區(qū)別嚼鹉。firefox，opera和IE驱富，使用collapse值和使用display：none沒有什么區(qū)別锚赤。

17、display:none與visibility：hidden的區(qū)別褐鸥？

• display：none 不顯示對應(yīng)的元素线脚，在文檔布局中不再分配空間（回流+重繪）
• visibility：hidden 隱藏對應(yīng)元素，在文檔布局中仍保留原來的空間（重繪）

18叫榕、position跟display浑侥、overflow、float這些特性相互疊加后會怎么樣晰绎？

• display屬性規(guī)定元素應(yīng)該生成的框的類型寓落；
• position屬性規(guī)定元素的定位類型；
• float屬性是一種布局方式荞下，定義元素在哪個方向浮動伶选。

① 當(dāng)display: none時史飞，所有的position、float考蕾、overflow屬性將因為元素已經(jīng)重繪該節(jié)點而無法生效祸憋。
② 當(dāng)元素使用了position: absolute/fixed的時候，元素便會脫離文檔流肖卧，并強制渲染成具有寬高的元素蚯窥，而float只能夠操作文檔流內(nèi)的block元素，因此只要有absolute/fixed在塞帐，float將無法起到任何作用拦赠，而display的值無論設(shè)置成什么樣都將是瀏覽器實際渲染使用的值。
③ 當(dāng)元素使用了position: static/releative葵姥，這時候元素并未脫離文檔流荷鼠，所以元素主要將會受到float的影響，display也將會產(chǎn)生預(yù)想到的影響榔幸，而overflow將會隨著display的值的變化產(chǎn)生可預(yù)料的影響允乐。
④ 如果元素使用了position: absolute/fixed或者float的時候，無論display設(shè)置成什么值削咆，瀏覽器會都將元素強制轉(zhuǎn)換為具有寬高的元素去渲染牍疏，因此display的值實際上只能是瀏覽器實際渲染使用的值， 而只要元素具有寬高拨齐，overflow便能夠施加影響鳞陨。

**上述具有寬高的元素是block元素。

19瞻惋、對BFC規(guī)范（塊級格式化上下文：block formatting context）的理解厦滤？

???????BFC規(guī)定了內(nèi)部的Block Box如何布局。

① 定位方案：

• 內(nèi)部的Box會在垂直方向上一個接一個放置歼狼。
• Box垂直方向的距離由margin決定掏导，屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊。
• 每個元素的margin box 的左邊羽峰，與包含塊border box的左邊相接觸碘菜。
• BFC的區(qū)域不會與float box重疊。
• BFC是頁面上的一個隔離的獨立容器限寞，容器里面的子元素不會影響到外面的元素。
• 計算BFC的高度時仰坦，浮動元素也會參與計算履植。

② 滿足下列條件之一就可觸發(fā)BFC

• 根元素，即html
• float的值不為none（默認(rèn)）
• overflow的值不為visible（默認(rèn)）
• display的值為inline-block悄晃、table-cell玫霎、table-caption
• position的值為absolute或fixed

20凿滤、為什么會出現(xiàn)浮動和什么時候需要清除浮動？清除浮動的方式庶近？

???????浮動元素碰到包含它的邊框或者浮動元素的邊框停留翁脆。由于浮動元素不在文檔流中，所以文檔流的塊框表現(xiàn)得就像浮動框不存在一樣鼻种。浮動元素會漂浮在文檔流的塊框上反番。

① 浮動帶來的問題：

• 父元素的高度無法被撐開，影響與父元素同級的元素
• 與浮動元素同級的非浮動元素（內(nèi)聯(lián)元素）會跟隨其后
• 若非第一個元素浮動叉钥，則該元素之前的元素也需要浮動罢缸，否則會影響頁面顯示的結(jié)構(gòu)。

② 清除浮動的方式：

• ①父級div定義height
• ②最后一個浮動元素后加空div標(biāo)簽并添加樣式clear:both投队。
• ③包含浮動元素的父標(biāo)簽添加樣式overflow為hidden或auto枫疆。
• ④父級div定義zoom
• ⑤ 使用偽類創(chuàng)建一個等同于div空標(biāo)簽的子元素，并添加clear:both以清除浮動敷鸦。

21息楔、上下margin重合的問題

???????在重合元素外包裹一層容器，并觸發(fā)該容器生成一個BFC扒披。

例子：

<div class="aside"></div>
<div class="text">
    <div class="main"></div>
</div>
<style type="text/css">
    .aside {
        margin-bottom: 100px;
        width: 100px;
        height: 150px;
        background: #f66;
    }
    
    .main {
        margin-top: 100px;
        height: 200px;
        background: #fcc;
    }
    
    .text {
        /*盒子main的外面包一個div值依，通過改變此div的屬性使兩個盒子分屬于兩個不同的BFC，以此來阻止margin重疊*/
        overflow: hidden; //此時已經(jīng)觸發(fā)了BFC屬性谎碍。
    }
</style>

22鳞滨、設(shè)置元素浮動后，該元素的display值是多少蟆淀？

答：自動變成display:block

23拯啦、移動端的布局用過媒體查詢嗎？

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

<head>
...
<link rel=”stylesheet” href=”xxx.css” media=”only screen and (max-device-width:480px)”>
...
</head>

...
@media only screen and (max-device-width:480px) {
         ...
}
...

24、使用CSS預(yù)處理器嗎疑苔？

????????CSS預(yù)處理器是一門 CSS 預(yù)處理語言甫匹，它擴充了 CSS 語言，增加了諸如變量惦费、混合（mixin）兵迅、函數(shù)等功能，讓 CSS 更易維護薪贫、方便制作主題恍箭、擴充。

????????目前常用的預(yù)處理語言有Less瞧省、Sass扯夭、Stylus鳍贾，他們都使用標(biāo)準(zhǔn)的CSS語法。

25交洗、CSS優(yōu)化骑科、提高性能的方法有哪些？

① 代碼壓縮构拳，減小文件體積咆爽；
② 避免過度約束

// 差
ul#someid {..}

// 優(yōu)
#someid {..}

③ 避免后代選擇符。不僅性能底下隐圾，而且HTML與CSS過于耦合伍掀，改HTML就必須更改CSS，這是一個非常不好的習(xí)慣暇藏。

④ 避免鏈?zhǔn)竭x擇符

// 差
.menu.left.icon {..}

// 優(yōu)
.menu-left-icon {..}

⑤ 避免蜜笤！important
使用!important將造成后期代碼難以維護。即便非要使用盐碱，應(yīng)該堅持不在全局作用的CSS屬性上使用把兔。

⑥ 堅持Kiss原則

設(shè)想我們有如下HTML結(jié)構(gòu)：

<ul id="navigator">
    <li><a href="#" class="twitter">Twitter</a></li>
    <li><a href="#" class="facebook">Facebook</a></li>
    <li><a href="#" class="dribble">Dribbble</a></li>
</ul>

下面是對應(yīng)的規(guī)則：

// 差
#navigator li a {..}

// 優(yōu)
#navigator {..}
.twitter {...}
.facebook {...}

⑦ 使用緊湊的語法。

???????盡量使用符合語法瓮顽。例如：

padding: 20px 10px 20px 10px;

⑧ 避免不必要的命名空間

// 差
.someclass table tr.otherclass td.somerule {..}

//優(yōu)
.someclass .otherclass td.somerule {..}

⑨ 避免不必要的重復(fù)

// 差
.someclass {
    color: red;
    background: blue;
    font-size: 15px;
}
.otherclass {
    color: red;
    background: blue;
    font-size: 15px;
}

// 優(yōu)
.someclass, .otherclass {
    color: red;
    background: blue;
    font-size: 15px;
}

⑩ 盡可能精簡規(guī)則县好，你可以合并不同類里的重復(fù)規(guī)則

// 差
.someclass {
    color: red;
    background: blue;
    height: 150px;
    width: 150px;
    font-size: 16px;
}
.otherclass {
    color: red;
    background: blue;
    height: 150px;
    width: 150px;
    font-size: 8px;
}

// 優(yōu)
.someclass,.otherclass {
    color: red;
    background: blue;
    height: 150px;
    width: 150px;
}
.someclass {
    font-size: 16px;
}

.otherclass {
    font-size: 8px;
}

（11）最好使用表示語義的名字。
一個好的類名應(yīng)該是描述他是什么而不是像什么

（12）良好的結(jié)構(gòu)和組織

// 差
.someclass-a,.someclass-b,.someclass-c,.someclass-d {
    ...
}

// 優(yōu)
.someclass-a,
.someclass-b,
.someclass-c,
.someclass-d {
    ...
}
.someclass {
    background-image:
        linear-gradient(#000, #ccc),
        linear-gradient(#ccc, #ddd);
    box-shadow:
        2px 2px 2px #000,
        1px 4px 1px 1px #ddd inset;
}

26暖混、瀏覽器是怎樣解析CSS選擇器的缕贡？

???????CSS選擇器的解析是從右向左解析的。若從左向右的匹配拣播，發(fā)現(xiàn)不符合規(guī)則晾咪，需要進行回溯，會損失很多性能贮配。若從右向左匹配谍倦，先找到所有的最右節(jié)點，對于每一個節(jié)點泪勒，向上尋找其父節(jié)點直到找到根元素或滿足條件的匹配規(guī)則昼蛀，則結(jié)束這個分支的遍歷。兩種匹配規(guī)則的性能差別很大圆存，是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節(jié)點（葉子節(jié)點）叼旋，而從左向右的匹配規(guī)則的性能都浪費在了失敗的查找上面。
???????而在 CSS 解析完畢后沦辙，需要將解析的結(jié)果與 DOM Tree 的內(nèi)容一起進行分析建立一棵 Render Tree夫植，最終用來進行繪圖。在建立 Render Tree 時（WebKit 中的「Attachment」過程）怕轿，瀏覽器就要為每個 DOM Tree 中的元素根據(jù) CSS 的解析結(jié)果（Style Rules）來確定生成怎樣的 Render Tree偷崩。

27、在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體撞羽？為什么呢阐斜？

???????使用偶數(shù)字體。偶數(shù)字號相對更容易和 web 設(shè)計的其他部分構(gòu)成比例關(guān)系诀紊。Windows 自帶的點陣宋體（中易宋體）從 Vista 開始只提供 12谒出、14、16 px 這三個大小的點陣邻奠，而 13笤喳、15、17 px時用的是小一號的點碌宴。（即每個字占的空間大了 1 px杀狡，但點陣沒變），于是略顯稀疏贰镣。

28呜象、margin和padding分別適合什么場景使用？

① 何時使用margin：

• 需要在border外側(cè)添加空白
• 空白處不需要背景色
• 上下相連的兩個盒子之間的空白碑隆，需要相互抵消時恭陡。

② 何時使用padding：

• 需要在border內(nèi)側(cè)添加空白
• 空白處需要背景顏色
• 上下相連的兩個盒子的空白，希望為兩者之和上煤。

???????兼容性的問題：在IE5 IE6中休玩，為float的盒子指定margin時，左側(cè)的margin可能會變成兩倍的寬度劫狠。通過改變padding或者指定盒子的display：inline解決拴疤。

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

???????當(dāng)按百分比設(shè)定一個元素的寬度時遥赚，它是相對于父容器的寬度計算的，但是阐肤，對于一些表示豎向距離的屬性凫佛，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，當(dāng)按百分比設(shè)定它們時孕惜，依據(jù)的也是父容器的寬度愧薛，而不是高度。

30衫画、全屏滾動的原理是什么毫炉？用到了CSS的哪些屬性？

???????原理：有點類似于輪播削罩，整體的元素一直排列下去瞄勾，假設(shè)有5個需要展示的全屏頁面费奸，那么高度是500%，只是展示100%进陡，剩下的可以通過transform進行y軸定位愿阐，也可以通過margin-top實現(xiàn)
overflow：hidden；transition：all 1000ms ease趾疚；

31缨历、什么是響應(yīng)式設(shè)計？響應(yīng)式設(shè)計的基本原理是什么糙麦？如何兼容低版本的IE辛孵？

???????響應(yīng)式網(wǎng)站設(shè)計(Responsive Web design)是一個網(wǎng)站能夠兼容多個終端，而不是為每一個終端做一個特定的版本赡磅∑歉浚基本原理是通過媒體查詢檢測不同的設(shè)備屏幕尺寸做處理。頁面頭部必須有meta聲明的viewport仆邓。

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

32鲜滩、視差滾動效果？

???????視差滾動（Parallax Scrolling）通過在網(wǎng)頁向下滾動的時候节值，控制背景的移動速度比前景的移動速度慢來創(chuàng)建出令人驚嘆的3D效果徙硅。

① CSS3實現(xiàn)：

優(yōu)點：開發(fā)時間短、性能和開發(fā)效率比較好搞疗，缺點是不能兼容到低版本的瀏覽器

① jQuery實現(xiàn)：

通過控制不同層滾動速度嗓蘑，計算每一層的時間，控制滾動效果匿乃。
優(yōu)點：能兼容到各個版本的桩皿，效果可控性好
缺點：開發(fā)起來對制作者要求高

33、::before和 :after中雙冒號和單冒號有什么區(qū)別幢炸？解釋一下這2個偽元素的作用?

• ① 單冒號(:)用于CSS3偽類泄隔，雙冒號(::)用于CSS3偽元素。
• ② ::before就是以一個子元素的存在宛徊，定義在元素主體內(nèi)容之前的一個偽元素佛嬉。并不存在于dom之中，只存在在頁面之中闸天。
• ③ :before和 :after 這兩個偽元素暖呕，是在CSS2.1里新出現(xiàn)的。起初苞氮，偽元素的前綴使用的是單冒號語法湾揽，但隨著Web的進化，在CSS3的規(guī)范里，偽元素的語法被修改成使用雙冒號库物，成為::before ::after

34霸旗、你對line-height是如何理解的？

???????行高是指一行文字的高度戚揭，具體說是兩行文字間基線的距離定硝。CSS中起高度作用的是height和line-height，沒有定義height屬性毫目，最終其表現(xiàn)作用一定是line-height。
???????單行文本垂直居中：把line-height值設(shè)置為height一樣大小的值可以實現(xiàn)單行文字的垂直居中诲侮，其實也可以把height刪除镀虐。
???????多行文本垂直居中：需要設(shè)置display屬性為inline-block。

35沟绪、怎么讓Chrome支持小于12px 的文字刮便？

p{
      font-size:10px;
      -webkit-transform:scale(0.8);      // 0.8是縮放比例
} 

36、讓頁面里的字體變清晰绽慈，變細(xì)用CSS怎么做恨旱？

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

38、如果需要手動寫動畫钝凶，你認(rèn)為最小時間間隔是多久仪芒，為什么？

???????多數(shù)顯示器默認(rèn)頻率是60Hz耕陷，即1秒刷新60次掂名，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms。

39哟沫、li與li之間有看不見的空白間隔是什么原因引起的饺蔑？有什么解決辦法？

???????行框的排列會受到中間空白（回車空格）等的影響嗜诀，因為空格也屬于字符,這些空白也會被應(yīng)用樣式猾警，占據(jù)空間，所以會有間隔裹虫，把字符大小設(shè)為0肿嘲，就沒有空格了。

解決方法：

• 可以將<li>代碼全部寫在一排
• 浮動li中float：left
• 在ul中用font-size：0（谷歌不支持）筑公；可以使用letter-space：-3px

40雳窟、display:inline-block 什么時候會顯示間隙？**

• ① 有空格時候會有間隙；解決：移除空格
• ② margin正值的時候 解決：margin使用負(fù)值
• ③ 使用font-size時候 解決：font-size:0封救、letter-spacing拇涤、word-spacing

41、有一個高度自適應(yīng)的div誉结，里面有兩個div鹅士，一個高度100px，希望另一個填滿剩下的高度

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

42掉盅、PNG、JPG以舒、GIF 這些圖片格式解釋一下趾痘，分別什么時候用。有沒有了解過Webp蔓钟？

• ???????PNG是便攜式網(wǎng)絡(luò)圖片（Portable Network Graphics）是一種無損數(shù)據(jù)壓縮位圖文件格式.優(yōu)點是：壓縮比高永票，色彩好。 大多數(shù)地方都可以用滥沫。
• ???????JPG是一種針對相片使用的一種失真壓縮方法侣集，是一種破壞性的壓縮，在色調(diào)及顏色平滑變化做的不錯兰绣。在www上世分，被用來儲存和傳輸照片的格式。
• ???????GIF是一種位圖文件格式缀辩，以8位色重現(xiàn)真色彩的圖像罚攀。可以實現(xiàn)動畫效果雌澄。
• ???????Webp格式是谷歌在2010年推出的圖片格式斋泄，壓縮率只有Jpg的2/3，大小比Png小了45%镐牺。缺點是壓縮的時間更久了炫掐，兼容性不好，目前谷歌和Opera支持睬涧。

43募胃、style標(biāo)簽寫在body后與body前有什么區(qū)別？

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

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

• 參數(shù)是scroll時候，必會出現(xiàn)滾動條。
• 參數(shù)是auto時候论巍，子元素內(nèi)容大于父元素時出現(xiàn)滾動條烛谊。
• 參數(shù)是visible時候，溢出的內(nèi)容出現(xiàn)在父元素之外嘉汰。
• 參數(shù)是hidden時候丹禀，溢出隱藏。

45鞋怀、闡述一下CSS Sprites

???????將一個頁面涉及到的所有圖片都包含到一張大圖中去双泪，然后利用CSS的 background-image，background- repeat密似，background-position 的組合進行背景定位攒读。利用CSS Sprites能很好地減少網(wǎng)頁的http請求，從而大大的提高頁面的性能辛友；CSS Sprites能減少圖片的字節(jié)。