來自微信公眾號(hào)：前端大全

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屬性鳖敷？

用來控制元素的盒子模型的解析模式政恍，默認(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有哪些值赂蕴？說明他們的作用?

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)景？

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

1###1 用純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 常見的兼容性問題铭乾？

不同瀏覽器的標(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瀏覽器從所有情況中分離出來爆哑。接著，再次使用“+”將IE8和IE7舆吮、IE6分離開來揭朝，這樣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ī)屬性的方法來獲取自定義屬性,也可以使用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ì)算方式跟正常流有什么不同衙解？

無論屬于哪種阳柔，都要先找到其祖先元素中最近的 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)單說就是它的父元素的內(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)元素，在文檔布局中仍保留原來的空間（重繪）

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)帶來的問題：

父元素的高度無法被撐開鳍咱，影響與父元素同級(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渠欺，以此來阻止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擇符

使用緊湊的語法

避免不必要的命名空間

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

最好使用表示語義的名字产园。一個(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，最終用來進(jìn)行繪圖拔鹰。在建立 Render Tree 時(shí)（WebKit 中的「Attachment」過程）仪缸，瀏覽器就要為每個(gè) DOM Tree 中的元素根據(jù) CSS 的解析結(jié)果（Style Rules）來確定生成怎樣的 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”"/>

32 視差滾動(dòng)效果？

視差滾動(dòng)（Parallax Scrolling）通過在網(wǎng)頁(yè)向下滾動(dòng)的時(shí)候吴汪，控制背景的移動(dòng)速度比前景的移動(dòng)速度慢來創(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ā)起來對(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)語法浙踢，但隨著Web的進(jìn)化绢慢，在CSS3的規(guī)范里，偽元素的語法被修改成使用雙冒號(hào)洛波，成為::before ::after

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

行高是指一行文字的高度，具體說是兩行文字間基線的距離蹬挤。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是縮放比例

36 讓頁(yè)面里的字體變清晰女嘲，變細(xì)用CSS怎么做畜份？

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

37 position:fixed;在android下無效怎么處理？

<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）是一種無損數(shù)據(jù)壓縮位圖文件格式.優(yōu)點(diǎn)是：壓縮比高，色彩好璧帝。 大多數(shù)地方都可以用捍岳。

jpg是一種針對(duì)相片使用的一種失真壓縮方法，是一種破壞性的壓縮睬隶，在色調(diào)及顏色平滑變化做的不錯(cuò)锣夹。在www上，被用來儲(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é)痕惋。