50道CSS基礎(chǔ)面試題（附答案）

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上也完美支持沮榜。

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 常見的兼容性問題？

不同瀏覽器的標(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)瀏覽器之間的頁面顯示差異盏袄。

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是頁面上的一個(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ì)影響頁面顯示的結(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>

<!--下面是css代碼-->

.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ī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è)需要展示的全屏頁面譬正，那么高度是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è)備屏幕尺寸做處理崇堵。

頁面頭部必須有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)頁向下滾動(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之中踏揣，只存在在頁面之中。

: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 讓頁面里的字體變清晰，變細(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ū)別？

頁面加載自上而下 當(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)致的頁面閃爍問題）

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è)頁面涉及到的所有圖片都包含到一張大圖中去吱殉，然后利用CSS的 background-image桥胞，background- repeat，background-position 的組合進(jìn)行背景定位考婴。利用CSS Sprites能很好地減少網(wǎng)頁的http請(qǐng)求，從而大大的提高頁面的性能催烘；CSS Sprites能減少圖片的字節(jié)沥阱。