面試題整理

出處：http://www.cnblogs.com/0603ljx/p/4326674.html+其餘

 1解釋下浮動和它的工做原理。

浮動的框能夠左右移動，直到它的外邊緣遇到包含框或者另外一個浮動框的邊緣，因此才說浮動定位不屬於正常的頁面流。css的定位機制：普通流，浮動，絕對定位（position：fixed是position：absolute的一個子類）。文檔中的普通流就會表現得和浮動框不存在同樣，當浮動框高度超出包含框的時候，就會出現包含框不會自動伸縮高度。

2 請解釋一下 relative、fixed、absolute 和 static 元素的區別

下面對應用的較多的relative和absolute與fixed進行分析：
relative定位的層老是相對於其最近的父元素，不管其父元素是何種定位方式。
absolute定位的層老是相對於其最近的定義爲absolute或relative的父層，而這個父層並不必定是其直接父層。若是其父層中都未定義absolute或relative，則其將相對body進行定位，
fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。

各個屬性值的定義：

一、static：默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

二、relative：生成相對定位的元素，經過top,bottom,left,right的設置相對於其正常位置進行定位。可經過z-index進行層次分級。

三、absolute：生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可經過z-index進行層次分級。

四、fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可經過z-index進行層次分級。

3請列舉兼容性問題

1）IE盒模型bug,height==height+pading上下+border

聲明<!DOCTYPE>
2）行內屬性標籤，設置display:block後採用float佈局，又有橫行的margin的狀況，ie6間距bug（相似第二種）

    問題症狀：ie6裏的間距比超過設置的間距
    解決方案：在display:block;後面加入display:inline;display:table;

    不過由於它自己就是行內屬性標籤，因此咱們再加上display:inline的話，它的高寬就不可設了。這時候咱們還須要在display:inline後面加入display:talbe。
3）定義1px高度容器問題： 

設置較小高度標籤（通常小於10px），在ie6，ie7，遨遊中高度超出本身設置高度

這是由於在IE6中，系統默認的並不是是Div有一個默認的高度，而是你沒有解決一個隱藏的參數，font-size，所以必須單獨定義這個Div的font-size，這樣才能解決這個問題。

解決方法：

a 加overflow: hidden;zoom: 0.08;

b font-size: 0px;

4）爲何個人被點擊訪問過的超連接樣式只有hover有效？

解決方法是改變CSS屬性的排列順序：Link,Visited,Hover,A！這很是重要！
5）左邊對象浮動，右邊採用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距。

當浮動元素與非浮動元素相鄰時，會出現3px像素空隙給非浮動的元素添加浮動屬性，

或者設置vertical-align 屬性爲vertical-align:top bottom middle text-bottom均可以解決.

這個IE的3PX BUG也是常常出現的,解決的辦法是給.right也一樣浮動 float:left 或者相對IE6定義.left margin-right:-3px;

5）Ie z-index問題 給父級添加position:relative

6）父div高度自適應失效問題： 

div嵌套時，當子div設置浮動屬性後，其父div的高度自適應失效了。

解決方法：

1）向父div的末尾再插入一個額外的標籤，<div style="clear:both;"></div>並令其清除浮動（clear）以撐大父容器。這種方法是W3C推薦的方法。

2） 在父div中使用overflow屬性，並設置爲hidden或者auto，能夠在標準兼容瀏覽器中閉合（清除）浮動元素，爲了兼容IE6能夠寫成以下形式：

overflow:hidden;zoom:1;

7）圖片默認有間距
    問題症狀：（圖片排列會有默認間距，用float）
    解決方案：使用float屬性爲img佈局

8）標籤最低高度設置min-height不兼容

    問題症狀：由於min-height自己就是一個不兼容的css屬性，因此設置min-height時不能很好的被各個瀏覽器兼容
    解決方案：若是咱們要設置一個標籤的最小高度200px，須要進行的設置爲：

{min-height:200px;

 height:auto !important; 

height:200px;

overflow:visible;}
    備註：在B/S系統前端開時，有不少狀況下咱們又這種需求。當內容小於一個值（如300px）時。容器的高度爲300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候咱們就會面臨這個兼容性問題。

4討論CSS hacks，條件引用或者其餘。

 　 使用hacker 我能夠吧瀏覽器分爲3類：ie6 ；ie7和遨遊；其餘（ie8 chrome ff safari opera等）

　　ie6認識的hacker 是下劃線_ 和星號 *
　　ie7 遨遊認識的hacker是星號 * （包括上面問題6中的 !important也算是hack的一種。不過實用性較小。）
　　好比這樣一個css設置 height:300px;*height:200px;_height:100px;
　　ie6瀏覽器在讀到 height:300px的時候會認爲高時300px；繼續往下讀，他也認識*heihgt， 因此當ie6讀到*height:200px的時候會覆蓋掉前一條的相沖突設置，認爲高度是200px。　繼續往下讀，ie6還認識_height,因此他又會覆蓋掉200px高的設置，把高度設置爲100px；
　　ie7和遨遊也是同樣的從高度300px的設置往下讀。當它們讀到*height200px的時候就停下了，由於它們不認識_height。因此它們會把高度解析爲200px；
　　剩下的瀏覽器只認識第一個height:300px;因此他們會把高度解析爲300px。
　　由於優先級相同且想衝突的屬性設置後一個會覆蓋掉前一個，因此書寫的次序是很重要的。

　　ie6下頁面min-width/height與max-width/height問題

   　min-height: 1400px;/* for ie7 firefox opera*/

　　 max-height:none;/* for ie7 firefox opera*/
　　_height: 1400px;/* only for ie6*/

 條件引用

<!--[if IE 6]> 僅IE6可識別 <![endif]-->

5你如何對網站的文件和資源進行優化？

　　1）文件合併，若是有多個CSS文件，能夠合併成一個，減小http請求次數（）

　　2）減小調用其餘文件的數量即CSS sprites。如每一個 background的圖像都會產生1次HTTP請求，要改善這個情況，能夠採用background-position屬性來加載背景圖，將須要頻繁加載的多個圖片合成爲1個單獨的圖片

　　3）使用 CDN（內容分發網絡） 託管

　　4）可對圖片進行壓縮，png的推薦https://tinypng.com/，不會失真，其餘也能夠壓縮

　　5）可再結合H5新特性裏的預加載

6描述下 「reset」 CSS 文件的做用和使用它的好處。

reset.css可以重置瀏覽器的默認屬性。不一樣的瀏覽器具備不一樣的樣式，重置可以使其統一。好比說ie瀏覽器和FF瀏覽器下button顯示不一樣，經過reset可以統同樣式，顯示相同的想過。可是不少reset是不必的，多寫了會增長瀏覽器在渲染頁面的負擔。

 7data-屬性的做用是什麼？

 　　data-是HTML5爲前端開發者提供自定義的屬性，這些屬性集能夠經過對象的dataset屬性獲取，不支持該屬性的瀏覽器能夠經過 getAttribute方法獲取