前端面試題總結（二）CSS篇

 

前端面試題總結（二）CSS篇

1、link和@import的區別？

1. link屬於HTML標籤，能夠引入出css之外的事務，如RSS，而@import是css提供的，只能加載css文件。
2. link會在頁面加載同時加載，@import會等到頁面加載完成再加載。
3. import只在IE5以上才能識別，link五兼容性問題。
4. link防止的樣式權重，高於@import的權重。
5. link可使用JavaScript控制dom改變樣式，@import不能夠。

2、常見兼容性？

1. png24位的圖片在IE6瀏覽器上會出現背景（作成png8）。
2. 瀏覽器默認的margin和padding不一樣（加一個全局的樣式padding：0;margin：0;）。
3. IE6雙邊距（塊元素浮動後，又有橫向margin狀況下，在IE6顯示的margin比設置的大）。
4. 設置子元素與父元素之間的外間距時會產生塌陷（給父元素設置浮動或overflow，儘可能使用padding）。
5. 浮動IE產生的雙倍距離（#box{ float:left; width:10px; margin:0 0 0 100px;}）。
6. 上下margin重合問題
7. 　　ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，可是margin-top和margin-bottom卻會發生重合。
8. 　　解決方法，養成良好的代碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。
9. 超連接hover 點擊後失效 使用正確的書寫順序 link visited hover active。
10. 3像素問題 使用float引發的 使用dislpay:inline -3px。 
11. Ie z-index問題 給父級添加position:relative。
12. Min-height 最小高度 ！Important 解決’。
13. select 在ie6下遮蓋 使用iframe嵌套。
14. 爲何沒有辦法定義1px左右的寬度容器（IE6默認的行高形成的，使用over:hidden,zoom:0.08 line-height:1px）。
15. IE5-8不支持opacity，解決辦法：

1 2 3 4 5 6

.opacity { 　　opacity:  0.4 　　filter: alpha(opacity= 60 );  /* for IE5-7 */ 　　-ms-filter:  "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)" ;          /* for IE 8*/ }

　　

3、css3有哪些新特性？

1. 圓角。(border-radius)
2. 陰影。(box-shadow/text-shadow)
3. 漸變。(gradient)
4. 旋轉、定位、縮放、傾斜。(transform:rotate/translate/scale/skew)
5. 增長了更多選擇器。
6. 多背景。
7. rgba。
8. 動畫。
9. 媒體查詢。
10. 多欄佈局與盒佈局。
11. 新的盒模型計算方式（box-sizing）。

4、css3的新增僞類舉例？

　　first-of-type、first-child、last-child、last-of-type、only-child、nth-child、enabled、checked、only-of-type、roo。。。。
　　惟一的僞元素：::selection。

5、什麼是css層疊？

　　css層疊式針對同一元素配置同一屬性，權重高。

6、display:none和visibility:hidden的區別？

　　display:none隱藏元素，在文檔佈局中不在給它分配空間，它個邊的元素會合攏，就當他歷來不存在。
　　visibility:hidden隱藏元素，可是在文檔佈局中仍保留原來的空間。

7、position的absolute和fixed共同點與不一樣點？
　　共同點：

1. 1. 改變行內元素的呈現方式，display被設置爲block。
   2. 讓元素脫離正常文檔流，不佔據空間。
   3. 默認會覆蓋到非定位元素上。

　　不一樣點：
　　　　　　absolute的根元素是能夠設置的，非fixed的根元素固定爲瀏覽器窗口。當滾動頁面時，fixed元素與瀏覽器窗口直接的距離是不變的。

8、爲何要初始化樣式？「reset.css」的做用和使用它的好處。

1. 由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。可是會對SEO有必定的影響，但魚與熊掌不可兼得，但力求影響最小的狀況下初識話。
2. 初始化CSS樣式主要是提升編碼質量，若是不初始化整個頁面作完很糟糕，重複的CSS樣式不少。去掉標籤的默認樣式如：margin,padding，其餘瀏覽器默認解析字體大小，字體設置。
3. 瀏覽器品種不少，每一個瀏覽器默認樣式也不一樣，因此定義一個reset.css可使瀏覽器默認樣式統一。

9、CSS Sprites是什麼？如何使用？

　　其實就是把網頁中一些背景圖整合一張圖片文件中，再利用css的background進行背景定位。能夠減小圖片請求的開銷。可是請求雖然能夠併發，通常瀏覽器都只有6個。可是對於將來而言，就不須要這樣了，由於有了http2。

10、解釋下浮動、以及其工做原理？清除浮動的技巧。

1. 浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或浮動元素的邊框停留。
2. 浮動會致使父元素高度塌陷，與浮動元素同級的非浮動元素會跟隨其後，若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構。
3. 清除浮動：浮動元素後面使用空標籤設置clear:both，父元素使用overflow，父元素浮動，父元素設置固定高，使用after僞對象清除。

11、position:absoiute和float的異同？

• 共同點：對內聯元素設置absoiute和float屬性，可讓元素脫離文檔流，而且能夠設置其寬高。
• 不一樣點：float仍會佔用位置，absolute會覆蓋文檔流中的其餘元素。

12、zoom:1清除浮動的原理？

1. 觸發hasLayout。
2. zoom屬性是IE瀏覽器的專有屬性，能夠設置或檢索對象的縮放比例。解決IE下比較奇葩的bug。當設置zoom的值後，所設置的元素就會擴大或縮小，高度寬度就會從新計算了，這裏一旦改變zoom值時其實也會發生從新渲染，運用這個原理，也就解決了IE下子元素浮動時父元素不隨着自動擴大的問題。

十3、什麼是css Hack？

　　通常來講是針對不一樣瀏覽器寫不一樣的css就是css Hack。
　　IE瀏覽器Hack又分爲三種，條件、屬性級、選擇符。

十4、less與sass和scss？以及區別？

1. 他們是動態的樣式語言，是CSS預處理器,CSS上的一種抽象層。他們是一種特殊的語法/語言而編譯成CSS。
2. 變量符不同，less是@，而Sass是$;
3. Sass支持條件語句，可使用if{}else{},for{}循環等等。而Less不支持;
4. Sass是基於Ruby的，是在服務端處理的，而Less是須要引入less.js來處理Less代碼輸出Css到瀏覽器

十5、什麼是css預處理、後處理？

　　預處理如less、sass、stylus用來預編譯sass或less，加強了css代碼的複用性，還有層級、mixin、變量、循環、函數等，具備很方便的UI組件模塊化開發能力，極大的提升工做效率。
　　後處理如PostCSS，一般被視爲在完成的樣式表中根據css規範處理css，讓其更有效；目前最常作的是給css屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。

十6、書寫高效css時會有哪些問題？

1. 樣式：從右往左的解析一個選擇器。
2. ID最快，依次是ID、class、tag、universal。
3. 不要tag-qualify（tag#id），ID已是惟一了，不須要tag來標識，這樣作會讓選擇器變慢。
4. 後代選擇器最糟糕。
5. 知道爲何這麼寫。
6. css3的效率問題（css3的選擇器能很快的定位到想要的元素，又保證了代碼整潔易讀，可是會浪費不少的瀏覽器資源）。
7. 咱們知道ID速度是最快的，但不能爲了效率而犧牲可讀性和可維護性。

十7、你用過媒體查詢，或針對移動端的佈局/CSS嘛？

　　媒體查詢，就是響應式佈局。經過不一樣的媒介類型和條件定義樣式表規則。媒介查詢讓css能夠更精確做用於不一樣的媒介類型和同一媒介的不一樣條件。
　　語法結構：@media 設備名 only(選取條件) not(選取條件) and(設備選取條件),設備二{sRules};

十8、若是設計中使用了非標準字體，你該如何實現？

　　所謂的標準字體是多數機器上都會有的，或者即便沒有也能夠由默認字體代替的字體。

1. 用圖片代替。
2. web fonts在線字庫。
3. @font-facs，webfonts。

十9、解釋下瀏覽器是如何判斷元素是否匹配某個css選擇器？

　　從後往前判斷。瀏覽器先產生一個集合，這個集合每每由最後一個部分的索引產生（若是沒有索引就是全部元素的集合）。而後向上匹配，若是不符合上一個部分，就把元素從集合中刪除，知道整個選擇器都匹配完，還在集合中的元素就匹配這個選擇器了。

二10、超連接訪問事後hover樣式就不出現的問題是什麼？如何解決？

　　被點擊訪問過的超連接樣式不在具備hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（link,visited,hover,active）

二11、css中可讓文字在垂直和水平方向上重疊的兩個屬性是什麼？

• 垂直方向：line-height
• 水平方向：letter-spacing
• letter-spacing的妙用知道有哪些麼？
• 能夠用於消除inline-block元素間的換行符空格間隙問題

二12、列出display的值，說明他們的做用。position的值， relative和absolute定位原點是？

1. block 象塊類型元素同樣顯示。

• • none 缺省值。向行內元素類型同樣顯示。
  • inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。
  • list-item 象塊類型元素同樣顯示，並添加樣式列表標記。

　　 2. position的值

• • absolute：生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。
  • fixed （老IE不支持）：生成絕對定位的元素，相對於瀏覽器窗口進行定位。
  • relative：生成相對定位的元素，相對於其正常位置進行定位。
  • static 默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right z-index 聲明）。
  • inherit 規定從父元素繼承 position 屬性的值。

二十3、知道css有個content屬性嗎？有什麼做用？有什麼應用？

1. css的content屬性專門應用在 before/after 僞元素上，用來插入生成內容。最多見的應用是利用僞類清除浮動。
2. 知道css計數器（序列數字字符自動遞增）嗎？如何經過css content屬性實現css計數器？

• • css計數器是經過設置counter-reset、counter-increment兩個屬性、及 counter()/counters()一個方法配合after/before 僞類實現

二十4、有哪項方式能夠對一個DOM設置它的CSS樣式？　

1. 外部樣式表，引入一個外部css文件
內部樣式表，將css代碼放在 <head> 標籤內部內聯樣式，將css樣式直接定義在 HTML 元素內部

二十5、對BFC規範的理解？

1. BFC，塊級格式化上下文，以建立了新的BFC的盒子是獨立佈局的，盒子裏面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向（和佈局方向有關）的margin會發生摺疊。
2. w3c css2.1規範中的一個概念，它決定了元素如何對其內容進行佈局，以及與其餘元素的關係和相互做用。

二十6、什麼是FOUC（無樣式內容閃爍）？如何避免FOUC？

• FOUC(Flash Of Unstyled Content)——文檔樣式閃爍。
• 而引用css文件的@import就是形成這個問題的罪魁禍首。IE會先加載整個HTML文檔的dom，而後再去導入外部的css文件，所以，在頁面dom加載完成到css導入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短和網速、電腦速度有關。解決方法是在head之間加入一個link標籤或script標籤。或者是把@import換成link引入。