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)、類(lèi)選擇器(.myclassname)、標(biāo)簽選擇器(div, h1, p)、相鄰選擇器(h1 + p)、子選擇器（ul > li）、后代選擇器（li a）、通配符選擇器（*）、屬性選擇器（a[rel=”external”]）、偽類(lèi)選擇器（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

1. !important聲明的樣式優(yōu)先級(jí)最高，如果沖突再進(jìn)行計(jì)算。

2. 如果優(yōu)先級(jí)相同，則選擇最后出現(xiàn)的樣式。

3. 繼承得到的樣式的優(yōu)先級(jí)最低。

5、CSS3新增偽類(lèi)有那些?

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

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有哪些新特性？

1. RGBA和透明度

2. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat

3. word-wrap（對(duì)長(zhǎng)的不可分割單詞換行）word-wrap：break-word

4. 文字陰影：text-shadow： 5px 5px 5px #FF0000;（水平陰影，垂直陰影，模糊距離，陰影顏色）

5. font-face屬性：定義自己的字體

6. 圓角（邊框半徑）：border-radius 屬性用于創(chuàng)建圓角

7. 邊框圖片：border-image: url(border.png) 30 30 round

8. 盒陰影：box-shadow: 10px 10px 5px #888888

9. 媒體查詢：定義兩套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ì)?

第一種真正的品字：

1. 三塊高寬是確定的；

2. 上面那塊用margin: 0 auto;居中；

3. 下面兩塊用float或者inline-block不換行；

4. 用margin調(diào)整位置使他們居中。

第二種全屏的品字布局:
上面的div設(shè)置成100%，下面的div分別寬50%，然后使用float或者inline使其不換行。

13、常見(jiàn)的兼容性問(wèn)題？

　　1.不同瀏覽器的標(biāo)簽?zāi)J(rèn)的margin和padding不一樣。*{margin:0;padding:0;}

　　2.IE6雙邊距bug：塊屬性標(biāo)簽float后，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大。hack：display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。

　　3.漸進(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:#00deff9; /*IE6、7、8識(shí)別*/
+background-color:#a200ff;/*IE6、7識(shí)別*/
_background-color:#1e0bd1;/*IE6識(shí)別*/
}

　　4.設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6，IE7中高度超出自己設(shè)置高度。hack：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度。

　　5.IE下，可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性；Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法:統(tǒng)一通過(guò)getAttribute()獲取自定義屬性。

　　6.Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示,可通過(guò)加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

　　7.超鏈接訪問(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 的元素，然后再判斷：

1. 若此元素為 inline 元素，則 containing block 為能夠包含這個(gè)元素生成的第一個(gè)和最后一個(gè) inline box 的 padding box (除 margin, border 外的區(qū)域) 的最小矩形；

2. 否則,則由這個(gè)祖先元素的 padding box 構(gòu)成。

如果都找不到，則為 initial containing block。

補(bǔ)充：

1. static(默認(rèn)的)/relative：簡(jiǎn)單說(shuō)就是它的父元素的內(nèi)容框（即去掉padding的部分）

2. absolute: 向上找最近的定位為absolute/relative的元素

3. fixed: 它的containing block一律為根元素(html/body)

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

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

1. chrome中，使用collapse值和使用hidden沒(méi)有區(qū)別。

2. 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)該生成的框的類(lèi)型；position屬性規(guī)定元素的定位類(lèi)型；float屬性是一種布局方式，定義元素在哪個(gè)方向浮動(dòng)。
類(lèi)似于優(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如何布局。
定位方案：

1. 內(nèi)部的Box會(huì)在垂直方向上一個(gè)接一個(gè)放置。

2. Box垂直方向的距離由margin決定，屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊。

3. 每個(gè)元素的margin box 的左邊，與包含塊border box的左邊相接觸。

4. BFC的區(qū)域不會(huì)與float box重疊。

5. BFC是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。

6. 計(jì)算BFC的高度時(shí)，浮動(dòng)元素也會(huì)參與計(jì)算。

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

1. 根元素，即html

2. float的值不為none（默認(rèn)）

3. overflow的值不為visible（默認(rèn)）

4. display的值為inline-block、table-cell、table-caption

5. 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)題：

1. 父元素的高度無(wú)法被撐開(kāi)，影響與父元素同級(jí)的元素

2. 與浮動(dòng)元素同級(jí)的非浮動(dòng)元素（內(nèi)聯(lián)元素）會(huì)跟隨其后

3. 若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁(yè)面顯示的結(jié)構(gòu)。

清除浮動(dòng)的方式：

1. 父級(jí)div定義height

2. 最后一個(gè)浮動(dòng)元素后加空div標(biāo)簽 并添加樣式clear:both。

3. 包含浮動(dòng)元素的父標(biāo)簽添加樣式overflow為hidden或auto。

4. 父級(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è)備的顯示。

1. 里邊

2. CSS : @media only screen and (max-device-width:480px) {/css樣式/}

24、使用 CSS 預(yù)處理器嗎？
Less sass

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

1. 避免過(guò)度約束

2. 避免后代選擇符

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

4. 使用緊湊的語(yǔ)法

5. 避免不必要的命名空間

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

7. 最好使用表示語(yǔ)義的名字。一個(gè)好的類(lèi)名應(yīng)該是描述他是什么而不是像什么

8. 避免！important，可以選擇其他選擇器

9. 盡可能的精簡(jiǎn)規(guī)則，你可以合并不同類(lèi)里的重復(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：

1. 需要在border外側(cè)添加空白

2. 空白處不需要背景色

3. 上下相連的兩個(gè)盒子之間的空白，需要相互抵消時(shí)。

何時(shí)使用padding：

1. 需要在border內(nèi)側(cè)添加空白

2. 空白處需要背景顏色

3. 上下相連的兩個(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的哪些屬性？

1. 原理：有點(diǎn)類(lèi)似于輪播，整體的元素一直排列下去，假設(shè)有5個(gè)需要展示的全屏頁(yè)面，那么高度是500%，只是展示100%，剩下的可以通過(guò)transform進(jìn)行y軸定位，也可以通過(guò)margin-top實(shí)現(xiàn)

2. 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效果。

1. CSS3實(shí)現(xiàn)
   優(yōu)點(diǎn)：開(kāi)發(fā)時(shí)間短、性能和開(kāi)發(fā)效率比較好，缺點(diǎn)是不能兼容到低版本的瀏覽器

2. jQuery實(shí)現(xiàn)
   通過(guò)控制不同層滾動(dòng)速度，計(jì)算每一層的時(shí)間，控制滾動(dòng)效果。
   優(yōu)點(diǎn)：能兼容到各個(gè)版本的，效果可控性好
   缺點(diǎn)：開(kāi)發(fā)起來(lái)對(duì)制作者要求高

3. 插件實(shí)現(xiàn)方式
   例如：parallax-scrolling，兼容性十分好

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

1. 單冒號(hào)(:)用于CSS3偽類(lèi)，雙冒號(hào)(::)用于CSS3偽元素。

2. ::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)寫(xiě)動(dòng)畫(huà)，你認(rèn)為最小時(shí)間間隔是多久，為什么？
多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms。

39、li與li之間有看不見(jiàn)的空白間隔是什么原因引起的？有什么解決辦法？

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

1. 可以將

2. 代碼全部寫(xiě)在一排

3. 浮動(dòng)li中float：left

4. 在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

40、display:inline-block 什么時(shí)候會(huì)顯示間隙？

1. 有空格時(shí)候會(huì)有間隙 解決：移除空格

2. margin正值的時(shí)候 解決：margin使用負(fù)值

3. 使用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？

1. png是便攜式網(wǎng)絡(luò)圖片（Portable Network Graphics）是一種無(wú)損數(shù)據(jù)壓縮位圖文件格式.優(yōu)點(diǎn)是：壓縮比高，色彩好。 大多數(shù)地方都可以用。

2. jpg是一種針對(duì)相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調(diào)及顏色平滑變化做的不錯(cuò)。在www上，被用來(lái)儲(chǔ)存和傳輸照片的格式。

3. gif是一種位圖文件格式，以8位色重現(xiàn)真色彩的圖像?？梢詫?shí)現(xiàn)動(dòng)畫(huà)效果.

4. webp格式是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%。缺點(diǎn)是壓縮的時(shí)間更久了，兼容性不好，目前谷歌和opera支持。

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

頁(yè)面加載自上而下 當(dāng)然是先加載樣式。
寫(xiě)在body標(biāo)簽后由于瀏覽器以逐行方式對(duì)HTML文檔進(jìn)行解析，當(dāng)解析到寫(xiě)在尾部的樣式表（外聯(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é)。

?