CSS面試題21-25

21.CSS 裡的 visibility 屬性有個 collapse 屬性值是幹嘛用的？在不同浏覽器下以後什麼差別？

（1）對于一般的元素，它的表現跟visibility：hidden;是一樣的。元素是不可見的，但此時仍占用頁面空間。

（2）但例外的是，如果這個元素是table相關的元素，例如table行，table group，table列，table column group，它的
表現卻跟display:none一樣，也就是說，它們占用的空間也會釋放。

在不同浏覽器下的差別：

在谷歌浏覽器裡，使用collapse值和使用hidden值沒有什麼差別。

在火狐浏覽器、Opera和IE11裡，使用collapse值的效果就如它的字面意思：table的行會消失，它的下面一行會補充它的位
置。
           

詳細資料可以參考：《CSS 裡的 visibility 屬性有個鮮為人知的屬性值：collapse》

22.width:auto 和 width:100%的差別

一般而言

width:100%會使元素box的寬度等于父元素的content box的寬度。

width:auto會使元素撐滿整個父元素，margin、border、padding、content區域會自動配置設定水準空間。
           

23.絕對定位元素與非絕對定位元素的百分比計算的差別

絕對定位元素的寬高百分比是相對于臨近的position不為static的祖先元素的padding box來計算的。

非絕對定位元素的寬高百分比則是相對于父元素的content box來計算的。
           

24.簡單介紹使用圖檔 base64 編碼的優點和缺點。

base64編碼是一種圖檔處理格式，通過特定的算法将圖檔編碼成一長串字元串，在頁面上顯示的時候，可以用該字元串來代替圖檔的
url屬性。

使用base64的優點是：

（1）減少一個圖檔的HTTP請求

使用base64的缺點是：

（1）根據base64的編碼原理，編碼後的大小會比原檔案大小大1/3，如果把大圖檔編碼到html/css中，不僅會造成檔案體
積的增加，影響檔案的加載速度，還會增加浏覽器對html或css檔案解析渲染的時間。

（2）使用base64無法直接緩存，要緩存隻能緩存包含base64的檔案，比如HTML或者CSS，這相比域直接緩存圖檔的效果要
差很多。

（3）相容性的問題，ie8以前的浏覽器不支援。

一般一些網站的小圖示可以使用base64圖檔來引入。
           

詳細資料可以參考：《玩轉圖檔 base64 編碼》  《前端開發中，使用 base64 圖檔的弊端是什麼？》  《小 tip:base64:URL 背景圖檔與 web 頁面性能優化》

25.'display'、'position'和'float'的互相關系？

（1）首先我們判斷display屬性是否為none，如果為none，則position和float屬性的值不影響元素最後的表現。

（2）然後判斷position的值是否為absolute或者fixed，如果是，則float屬性失效，并且display的值應該被
設定為table或者block，具體轉換需要看初始轉換值。

（3）如果position的值不為absolute或者fixed，則判斷float屬性的值是否為none，如果不是，則display
的值則按上面的規則轉換。注意，如果position的值為relative并且float屬性的值存在，則relative相對
于浮動後的最終位置定位。

（4）如果float的值為none，則判斷元素是否為根元素，如果是根元素則display屬性按照上面的規則轉換，如果不是，
則保持指定的display屬性值不變。

總的來說，可以把它看作是一個類似優先級的機制，"position:absolute"和"position:fixed"優先級最高，有它存在
的時候，浮動不起作用，'display'的值也需要調整；其次，元素的'float'特性的值不是"none"的時候或者它是根元素
的時候，調整'display'的值；最後，非根元素，并且非浮動元素，并且非絕對定位的元素，'display'特性值同設定值。
           

詳細資料可以參考：《position 跟 display、margincollapse、overflow、float 這些特性互相疊加後會怎麼樣？》