目錄

1.CSS 中類 (class) 和ID 的區別

class是類選擇器，可以作為通用樣式，在文件中多次使用。ID是id選擇器，理論上應該具有唯一性(即一個ID在文件中只能出現一次)，如果出現多個也能同時應用樣式，但如果涉及到JS操作時會存在問題，JS只會選擇文件從上到下的第一個具有該ID的dom物件。

在CSS樣式權重中，類選擇器是10，而ID選擇器的權重是100。

正常實際開發時，class用於定義css樣式，而id選擇器用於JS操作

2.請問 "resetting" 和 "normalizing" CSS 之間的區別？你會如何選擇，為什麼？

這兩個都是用於CSS樣式初始化的外掛（算是吧），為了相容各瀏覽器在佈局和渲染是的不同，設定統一的標準。

resetting:直接重置所有格式，沒有任何前提性質的。無前提重置所有樣式，無視任何 user agent 預置樣式

normalizing：重置部分格式的。只做適當重置，認為存在即有道理

所以建議在設定的時候使用 normalizing進行重置，避免造成所有資料丟失。resetting 這個需要謹慎使用

3.請解釋浮動 (Floats) 及其工作原理

浮動元素脫離文件流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

脫離文件流，浮動元素會生成塊級框(即變成display:block)；float:left | right | none | inherit，初始值none不浮動。存在一個父元素高度坍塌問題。浮動元素碰到包含它的元素的邊框或者其他浮動元素的邊框會停留下來。

浮動的9個規則（算是原理吧）(css權威指南上有寫)：

1）浮動元素的左(或右)外邊界不能超出其包含塊的左（或右）內邊界。（父元素content的邊界）

2）浮動元素的左(或右)外邊界必須是源文件中之前出現的左浮動(或右浮動)元素的右(左)外邊界。除非後出現浮動元素的頂端在先出現浮動元素的底端下面。（避免浮動覆蓋）

3）左浮動元素的右外邊界不會在其右邊右浮動元素的左外邊界的右邊。右浮動元素的左外邊界也不會在其左邊任何左浮動元素的右外邊界的左邊。（元素一定不會重疊）

4）左(或右)浮動元素左邊(右邊)有另一個浮動元素，前者右外邊界不能在其包含塊右(左)邊界的右邊(左邊)

5）一個浮動元素的頂端不能比其父元素的內頂端更高。如果一個浮動元素在兩個合併外邊距之間，放置這個浮動元素時就好像在兩個元素之間有一個塊級父元素

6）浮動元素的頂端不能比之前所有浮動元素或塊級元素的頂端更高。（限制上浮）

7）如果源文件中一個浮動元素之前出現另一個元素，浮動元素的頂端不能比包含該元素所生成框的任何行框的頂端要高

8）浮動元素必須儘可能高地放置

9）左浮動元素必須向左儘可能遠，右浮動元素則必須向右儘可能遠。位置越高，就會向右或向左浮動得越遠

4.清除浮動

clear:both <br clear="all"> overflow:auto和dispaly:inline-block（形成BFC，後面有講）。

使用偽類:after， 比如在父元素上使用.clear，下面五個屬性都必須有，同時子元素設定：zoom：1，為了觸發IE 6/7的hasLayout。

.clear:after {

    content: '';

    height:0;

    display:block;

    clear:both;

    visibility:hidden;

}

5.描述z-index和疊加上下文是如何形成的？

z-index是z軸上的距離調整，數值越大，距離讀者越近。其值可以為負值，但是存在背景覆蓋的問題，所以一般不使用負值，預設值為auto（一般情況下可認為是0）。

但是也有別的屬性會影響z-index的情況：

z-index值不為auto的flex項(父元素display:flex|inline-flex).

元素的opacity值不是1.

元素的transform值不是none.

元素mix-blend-mode值不是normal.

元素的filter值不是none.

元素的isolation值是isolate.

will-change指定的屬性值為上面任意一個.

元素的-webkit-overflow-scrolling設為touch.

同時記住一點z-index和疊加上下文的區別，z-index只是影響疊加上下文，而元素本身就存在疊加上下文的情況。

6.請描述 BFC(Block Formatting Context, 塊格式化上下文) 及其如何工作？

BFC，塊級格式化上下文，一個建立了新的BFC的盒子是獨立佈局的，盒子裡面的子元素的樣式不會影響到外面的元素。在同一個 BFC 中的兩個毗鄰的塊級盒在垂直方向（和佈局方向有關係）的 margin 會發生摺疊。

BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。

6.1 BFC佈局規則：

1) 內部的Box會在垂直方向，一個接一個地放置。

2) Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊（數值符號相同取絕對值較大的，數值一正一負相加）

3) 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(border和padding夾著的地方。對於從左往右的格式化，否則相反)。即使存在浮動也是如此。

4) BFC的區域不會與float box重疊。

5) BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。

6) 計算BFC的高度時，浮動元素也參與計算

6.2 會形成BFC的元素：

1) 根元素

2) float屬性不為none

3) position為absolute或者fixed

4) display為inline-block，table-cell，table-caption，flex，inline-flex

5) overflow不為visible

之所以利用父元素的overflow屬性清除浮動產生的高度坍塌，就是將父元素變成一個BFC，這樣計算高度時，浮動元素也參與計算(即BFC規則第七條)

7.CSS的屬性繼承問題

7.1 無繼承性的屬性

1、display：規定元素應該生成的框的型別

2、文字屬性：

        vertical-align：垂直文字對齊

        text-decoration：規定新增到文字的裝飾

        text-shadow：文字陰影效果

        white-space：空白符的處理

        unicode-bidi：設定文字的方向

3、盒子模型的屬性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4、背景屬性：background、background-color、background-image、background-repeat、background-position、background-attachment

5、定位屬性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6、生成內容屬性：content、counter-reset、counter-increment

7、輪廓樣式屬性：outline-style、outline-width、outline-color、outline

8、頁面樣式屬性：size、page-break-before、page-break-after

9、聲音樣式屬性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

7.2 有繼承性的屬性

1、字體系列屬性

        font：組合字型

        font-family：規定元素的字體系列

        font-weight：設定字型的粗細

        font-size：設定字型的尺寸

        font-style：定義字型的風格

        font-variant：設定小型大寫字母的字型顯示文字，這意味著所有的小寫字母均會被轉換為大寫，但是所有使用小型大寫字型的字母與其餘文字相比，其字型尺寸更小。

        font-stretch：對當前的 font-family 進行伸縮變形。所有主流瀏覽器都不支援。

        font-size-adjust：為某個元素規定一個 aspect 值，這樣就可以保持首選字型的 x-height。

2、文本系列屬性

        text-indent：文字縮排

        text-align：文字水平對齊

        line-height：行高

        word-spacing：增加或減少單詞間的空白（即字間隔）

        letter-spacing：增加或減少字元間的空白（字元間距）

        text-transform：控制文字大小寫

        direction：規定文字的書寫方向

        color：文字顏色

3、元素可見性：visibility

4、表格佈局屬性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表佈局屬性：list-style-type、list-style-image、list-style-position、list-style

6、生成內容屬性：quotes

7、游標屬性：cursor

8、頁面樣式屬性：page、page-break-inside、windows、orphans

9、聲音樣式屬性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

7.3 所有元素可以繼承的屬性

1、元素可見性：visibility

2、游標屬性：cursor

7.4 內聯元素可以繼承的屬性

1、字體系列屬性

2、除text-indent、text-align之外的文本系列屬性

7.5 塊級元素可以繼承的屬性

1、text-indent、text-align

8.CSS sprites（雪碧圖）

CSS sprites（雪碧圖，也叫CSS精靈），是利用PS等工具將許多小圖片整合成一張大的PNG圖片，然後利用background-position:[左（x軸） 上（y軸）]屬性移動背景圖，顯示整幅圖中的不同小圖示。

8.1優點：

1、利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的效能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；

2、CSS Sprites能減少圖片的位元組，曾經比較過多次3張圖片合併成1張圖片的位元組總是小於這3張圖片的位元組總和。

3、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的製作效率。

4、更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。

8.2 缺點：

1、在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好足夠的空間，防止板塊內出現不必要的背景；這些還好，最痛苦的是在寬屏，高解析度的螢幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；

2、至於可維護性，這是一般雙刃劍。可能有人喜歡，有人不喜歡，因為每次的圖片改動都得往這個圖片刪除或新增內容，顯得稍微繁瑣。而且算圖片的位置（尤其是這種上千px的圖）也是一件頗為不爽的事情。當然，在效能的口號下，這些都是可以克服的。

3、由於圖片的位置需要固定為某個絕對數值，這就失去了諸如center之類的靈活性。

4、前面我們也提到了，必須限制盒子的大小才能使用CSS Sprites，否則可能會出現出現干擾圖片的情況。這就是說，在一些需要非單向的平鋪背景和需要網頁縮放的情況下，CSS Sprites並不合適。YUI的解決方式是，加大圖片之間的距離，這樣可以保持有限度的縮放。

9.圖片替換文字方案

圖片替換文體就是在樣式中使用背景圖片來替換掉HTML模板中的文字內容，從而達到一種樣式無法實現的頁面渲染效果。

方案一：FIR(Fahrner Image Replacement)，引入外標籤，將圖片設為外標籤的背景圖，內標籤的文字設定為display:none隱藏。缺點是不利於閱讀器瀏覽網頁

方案二：Phark方法，目前常用方法。其關鍵之處使用“text-indent屬性，並且給其設定一個較大的負值，達到隱藏文字的效果“。

10.你會如何解決特定瀏覽器的樣式問題？

瀏覽器的樣式相容問題多是因為初始值不同導致的，所以可以引用normalize.css或者reset.css。

還有部分老版本和舊版本不相容的問題，可以採用<!-[if IE 7]> <![endif]->註釋的方式。

1. CSS中幾種瀏覽器對不同關鍵字的支援，可進行瀏覽器相容性重複定義 !important 可被FireFox和IE7識別 * 可被IE6、IE7識別 _ 可被IE6識別 *+ 可被IE7識別

區別IE6與FF： background:orange;*background:blue;

區別IE6與IE7： background:green !important;background:blue;

區別IE7與FF： background:orange; *background:green;

區別FF，IE7，IE6： background:orange;*background:green !important;*background:blue;

IE7,IE8相容: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

最新相容方案如下：

.e{

color:#FFF;/* FF,OP */

[;color:#0F0;]/* Sa,CH */

color:#FFF\9;/*IE6、7、8*/

*color:#FF0;/* IE7、6 */

_color:#F00;/* IE6 */

}

2. 應用條件註釋,因為IE各版本的瀏覽器對我們製作的WEB標準的頁面解釋不一樣，具體就是對CSS的解釋不同，我們為了相容這些，可運用條件註釋來各自定義，最終達到相容的目的。

比如：

<!– 預設先呼叫css.css樣式表 –>

<link rel="stylesheet" type="text/css" href="css.css" />

<!–[if IE 7]>

<!– 如果IE瀏覽器版是7,呼叫ie7.css樣式表 –>

<link rel="stylesheet" type="text/css" href="ie7.css" />

<![endif]–>

<!–[if lte IE 6]>

<!– 如果IE瀏覽器版本小於等於6,呼叫ie.css樣式表 –>

<link rel="stylesheet" type="text/css" href="ie.css" />

<![endif]–>

這其中就區分了IE7和IE6向下的瀏覽器對CSS的執行，達到相容的目的。同時，首行預設的css.css還能與其他非IE瀏覽器實現相容。

注意：預設的CSS樣式應該位於HTML文件的首行，進行條件註釋判斷的所有內容必須位於該預設樣式之後。

3. 幾個瀏覽器對實際畫素的解釋 IE/Opera：物件的實際寬度 = (margin-left) + width + (margin-right) Firefox/Mozilla：物件的實際寬度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)

4. 滑鼠手勢問題：FireFox的cursor屬性不支援hand，但是支援pointer，IE兩個都支援；所以為了相容都用pointer

5. FireFox中設定HTML標籤的Style屬性時，所有位置、寬高和尺寸值必須後跟px，IE也支援此寫法，因此統一加px單位。如 Obj.Style.Height = imgObj.Style.Height + ‘px';

6. FireFox無法解析簡寫的padding屬性設定，如padding 5px 4px 3px 1px；必須改為 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px0；

7. 消除ul、ol等列表的縮排時，樣式應寫成:list-style:none;margin:0px;padding:0px;其中margin屬性對IE有效，padding屬性對FireFox有效

8. CSS控制透明：IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60); FireFox：opacity:0.6;

9. CSS控制圓角：IE：不支援圓角； FireFox: -moz-border-radius:4px;或 -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -moz-border-radius-bottomleft:4px; -moz-border-radius- bottomright:4px;

10. CSS雙線凹凸邊框：IE：border:2px outset; FireFox： -moz-border-top-colors: #d4d0c8 white; -moz-border-left-colors: #d4d0c8 white; -moz-border-right-colors:#404040 #808080; -moz-border-bottom-colors:#404040 #808080;

11. IE支援CSS方法cursor:url()自定義游標樣式檔案和滾動條顏色風格；FireFox對以上兩者均不支援

12. IE有Select控制元件永遠處於最上層的bug,且所有CSS對Select控制元件都不起作用

13. IE支援Form中的Label標籤，包括圖片和文字內容；FireFox不支援包含圖片的Label，點選圖片不能讓標記 label for 的Radio或CheckBox產生效果

14. FireFox中的TextArea不支援onScroll事件

15. FireFox不支援display的inline和block

16. FireFox對Div設定margin-left, margin-right為auto時已經居中, IE中不行

17. FireFox對Body設定text-align時, Div需要設定margin: auto(主要是margin-left margin-right) 方可居中

18. 對超連結的CSS樣式設定最好遵從這樣的順序：L-V-H-A。即 <style type="text/css"> <!-- a:link {} a:visited {} a:hover {} a:active {} --> </style> 這樣可以避免一些訪問過後的超連結就不具備hover和active樣式了

19. IE中設定長段落自動換行在CSS中設定word-wrap:break-word；FireFox中使用JS插入 的方法來實現，具體程式碼如下：

<script type="text/javascript">

/* <![CDATA[ */ function toBreakWord(el, intLen){ var obj=document.getElementById(el); var strContent=obj.innerHTML; var strTemp=""; while(strContent.length>intLen){ strTemp+=strContent.substr(0,intLen)+" "; strContent=strContent.substr(intLen,strContent.length); } strTemp+=" "+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord("div_id", 37); /* ]]> */

</script>

20. 在子容器加了浮動屬性後,該容器將不能自動撐開解決方法：在標籤結束後下一個標籤中加上一個清除浮動的CSS clear:both;

21. 浮動後IE6解釋外邊距為實際邊距的雙倍 解決辦法：加上display:inline

22. IE6下圖片下方會有空隙 解決辦法：為img加上display:block或設定vertical-align 屬性為vertical-align:top | bottom |middle |text-bottom

23. IE6下兩個層中間有空隙 解決辦法：設定右側div也同樣浮動float:left或者相對IE6定義 margin-right:-3px;

24. LI中內容超過長度後以省略號的顯示方法 <style type="text/css"> <!-- li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } --> </style> （只適用與IE）

25. 將元素的高度和行高設為相同值，即可垂直居中文字 <style type="text/css"> <!-- div { height:30px; line-height:30px; } --> </style>

26. 對齊文字與文字輸入框，須在CSS中增加vertical-align:middle;屬性設定 <style type="text/css"> <!-- … … vertical-align:middle; } --> </style>

27. 支援WEB標準的瀏覽器設定了固定高度值就不會像IE6那樣被撐開，但是又想設定固定高度又想能夠被撐開呢?解決辦法是去掉height屬性而設定min-height，為了相容不支援min-height的IE6可以這樣定義： { height:auto!important; height:200px; min-height:200px; }

28. web標準中IE無法設定滾動條顏色 解決辦法：在CSS中對body的設定改為對html的 <style type="text/css"> <!-- html { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; } --> </style>

29. IE6由於預設行高問題無法定義1px左右高度的容器，解決辦法：在CSS中對容器設定如：overflow:hidden | zoom:0.08 | line-height:1px

30. 給Flash設定透明屬性可使層顯示在Flash之上 <param name="wmode" value="transparent" /> <!-- 解決IE上的問題 //> <embed wmode="transparent" …… > <!-- 解決FireFox上的問題 //>

31. FireFox設定Padding屬性後會相應的增加Width和Height屬性值，IE不會解決辦法：用!important方法多定義一套Height和Width

32. FireFox對div與div之間的空格是忽略的，但IE是處理的；因此儘量在兩個相連的div之間不要有空格和回車，否則可能會造成不同瀏覽器之間格式不正確，比如著名的3px偏差；而且原因很難查明

33. 形如如下格式 <div id="parent"> <div id="content"> </div> </div> 當Content內容多時，即使parent設定了高度100%或auto,在不同瀏覽器下還是不能完好的自動伸展；解決辦法在層的最下方產生一個高度為1的空格,程式碼如下 <div id="parent"> <div id="content"> </div> <div style="font: 0px/0px sans-serif;clear: both;display: block"> </div> </div>

34. IE和FireFox對字型small的尺寸解釋不同，FireFox為13px,IE中為16px

35. IE和FireFox對空格的尺寸解釋不同，FireFox為4px,IE中為8px