31.zoom:1 的清除浮動原理?
清除浮動，觸發haslayout；
zoom屬性是ie瀏覽器的專有屬性，它可以設定或檢索物件的縮放比例。解決ie下比較奇葩的bug。譬如外邊距（margin）的重疊，浮動清除，觸發ie的haslayout屬性等。
來龍去脈大概如下：
當設定了zoom的值之後，所設定的元素就會就會擴大或者縮小，高度寬度就會重新計算了，這裡一旦改變zoom值時其實也會發生重新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨著自動擴大的問題。
zoom屬性是ie瀏覽器的專有屬性，火狐和老版本的webkit核心的瀏覽器都不支援這個屬性。然而，zoom現在已經被逐步標
準化，出現在css3.0規範草案中。
目前非ie由於不支援這個屬性，它們又是通過什麼屬性來實現元素的縮放呢？可以通過css3裡面的動畫屬性scale進行縮放。
32.移動端的布局用過**查詢嗎？包含了乙個**型別和至少乙個使用寬度、高度和顏色等**屬性來限制樣式表範圍的表示式。css3加入的**查詢使得無需修改內容便可以使樣式應用於某些特定的裝置圍。
33.使用 css 預處理器嗎？喜歡哪個？
sass（sass、less沒有本質區別，只因為團隊前端都是用的sass）
34.css 優化、提高效能的方法有哪些？
載入效能：
（1）css壓縮：將寫好的css進行打包壓縮，可以減少很多的體積。
（2）css單一樣式：當需要下邊距和左邊距的時候，很多時候選擇:margin:top0bottom0;但margin-bottom:bot
tom;margin-left:left;執行的效率更高。
（3）減少使用@import,而建議使用link，因為後者在頁面載入時一起載入，前者是等待頁面載入完成之後再進行載入。
選擇器效能：
（1）關鍵選擇器（keyselector）。選擇器的最後面的部分為關鍵選擇器（即用來匹配目標元素的部分）。css選擇符是從右到左進行匹配的。當使用後代選擇器的時候，瀏覽器會遍歷所有子元素來確定是否是指定的元素等等；
（2）如果規則擁有id選擇器作為其關鍵選擇器，則不要為規則增加標籤。過濾掉無關的規則（這樣樣式系統就不會浪費時間去匹配它們了）。
（3）避免使用通配規則，如*{}計算次數驚人！只對需要用到的元素進行選擇。
（4）盡量少的去對標籤進行選擇，而是用class。
（5）盡量少的去使用後代選擇器，降低選擇器的權重值。後代選擇器的開銷是最高的，盡量將選擇器的深度降到最低，最高不要超過三層，更多的使用類來關聯每乙個標籤元素。
（6）了解哪些屬性是可以通過繼承而來的，然後避免對這些屬性重複指定規則。
渲染效能：可維護性、健壯性：
（1）將具有相同屬性的樣式抽離出來，整合並通過class在頁面中進行使用，提高css的可維護性。
（2）樣式與內容分離：將css**定義到外部css中。
35.瀏覽器是怎樣解析 css 選擇器的？
樣式系統從關鍵選擇器開始匹配，然後左移查詢規則選擇器的祖先元素。只要選擇器的子樹一直在工作，樣式系統就會持續左移，直到和規則匹配，或者是因為不匹配而放棄該規則。
試想一下，如果採用從左至右的方式讀取css規則，那麼大多數規則讀到最後（最右）才會發現是不匹配的，這樣做會費時耗能，最後有很多都是無用的；而如果採取從右向左的方式，那麼只要發現最右邊選擇器不匹配，就可以直接捨棄了，避免了許多無效匹配。
36.在網頁中應該使用奇數還是偶數的字型？為什麼呢？
（1）偶數字型大小相對更容易和web設計的其他部分構成比例關係。比如：當我用了14px的正文本號，我可能會在一些地方用14×0.5=7px的margin，在另一些地方用14×1.5=21px的標題字型大小。
（2）瀏覽器緣故，低版本的瀏覽器ie6會把奇數字型強制轉化為偶數，即13px渲染為14px。
（3）系統差別，早期的windows裡，中易宋體點陣只有12和14、15、16px，唯獨缺少13px。
37.margin 和 padding 分別適合什麼場景使用？
margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。
margin用於布局分開元素使元素與元素互不相干。
padding用於元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段距離。
何時應當使用margin：
•需要在border外側新增空白時。
•空白處不需要背景（色）時。
•上下相連的兩個盒子之間的空白，需要相互抵消時。如15px+20px的margin，將得到20px的空白。
何時應當時用padding：
•需要在border內測新增空白時。
•空白處需要背景（色）時。
•上下相連的兩個盒子之間的空白，希望等於兩者之和時。如15px+20px的padding，將得到35px的空白。
38.抽離樣式模組怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
把常用的css樣式單獨做成css檔案……通用的和業務相關的分離出來，通用的做成樣式模組兒共享，業務相關的，放進業務相關的庫裡面做成對應功能的模組兒。
39.簡單說一下 css3 的 all 屬性。
all屬性實際上是所有css屬性的縮寫，表示，所有的css屬性都怎樣怎樣，但是，不包括unicode-bidi和direction這兩個css屬性。支援三個css通用屬性值，initial,inherit,unset。
initial是初始值的意思，也就是該元素元素都除了unicode-bidi和direction以外的css屬性都使用屬性的預設初始值。
inherit是繼承的意思，也就是該元素除了unicode-bidi和direction以外的css屬性都繼承父元素的屬性值。
unset是取消設定的意思，也就是當前元素瀏覽器或使用者設定的css忽略，然後如果是具有繼承特性的css，如color，則使用繼承值；如果是沒有繼承特性的css屬性，如background-color，則使用初始值。
40.為什麼不建議使用統配符初始化 css 樣式。
採用*這樣的寫法好處是寫起來很簡單，但是是萬用字元，需要把所有的標籤都遍歷一遍，當**較大時，
樣式比較多，這樣寫就大大的加強了**執行的負載，會使**載入的時候需要很長一段時間，因此一般大型的**都有分層次的一套初始化樣式。
出於效能的考慮，並不是所有標籤都會有padding和margin，因此對常見的具有預設padding和margin的元素初始化即可，並不需使用萬用字元*來初始化。
前端面試題 css相關面試題
css 選擇器中，元素選擇器和類選擇器的區別是什麼？元素選擇器是最常見的 css 選擇器，即，文件的元素就是最基本的選擇器。選擇器通常是某個 html 元素，比如 等，甚至可以是 元素本身。類選擇器用於將樣式規則與附帶 class 屬性的元素匹配，其中該 class 屬性的值為類選擇器中指定的值。使...
CSS經典面試題
1 標準盒模型和低版本ie盒模型 怪異模式 有什麼區別？標準盒模型 內容的寬度 content border padding margin ie低版本盒模型 內容的寬度 content border padding margin 最主要的區別在於盒模型的寬度 box sizing屬性是用來控制元素的...
常見css面試題
一 盒子居住 1 未知盒子寬高 transform居中，可以不知道寬高 padding 20px background orange color fff position absolute top 50 left 50 border radius 5px webkit transform trans...