CSS面試題（二）

21.CSS 裡的 visibility 屬性有個 collapse 屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？
（1）對於一般的元素，它的表現跟visibility：hidden;是一樣的。元素是不可見的，但此時仍佔用頁面空間。

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

在不同瀏覽器下的區別：

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

在火狐瀏覽器、Opera和IE11裡，使用collapse值的效果就如它的字面意思：table的行會消失，它的下面一行會補充它的位
置。
22.width:auto 和 width:100%的區別
一般而言

width:100%會使元素box的寬度等於父元素的contentbox的寬度。

width:auto會使元素撐滿整個父元素，margin、border、padding、content區域會自動分配水平空間。
23.絕對定位元素與非絕對定位元素的百分比計算的區別
絕對定位元素的寬高百分比是相對於臨近的position不為static的祖先元素的paddingbox來計算的。

非絕對定位元素的寬高百分比則是相對於父元素的contentbox來計算的。
24.簡單介紹使用圖片 base64 編碼的優點和缺點。
base64編碼是一種圖片處理格式，通過特定的演算法將圖片編碼成一長串字串，在頁面上顯示的時候，可以用該字串來代替圖片的
url屬性。

使用base64的優點是：

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

使用base64的缺點是：

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

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

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

一般一些網站的小圖示可以使用base64圖片來引入。
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’特性值同設定值。
26.margin 重疊問題的理解。
margin重疊指的是在垂直方向上，兩個相鄰元素的margin發生重疊的情況。

一般來說可以分為四種情形：

第一種是相鄰兄弟元素的marin-bottom和margin-top的值發生重疊。這種情況下我們可以通過設定其中一個元素為BFC
來解決。

第二種是父元素的margin-top和子元素的margin-top發生重疊。它們發生重疊是因為它們是相鄰的，所以我們可以通過這
一點來解決這個問題。我們可以為父元素設定border-top、padding-top值來分隔它們，當然我們也可以將父元素設定為BFC
來解決。

第三種是高度為auto的父元素的margin-bottom和子元素的margin-bottom發生重疊。它們發生重疊一個是因為它們相
鄰，一個是因為父元素的高度不固定。因此我們可以為父元素設定border-bottom、padding-bottom來分隔它們，也可以為
父元素設定一個高度，max-height和min-height也能解決這個問題。當然將父元素設定為BFC是最簡單的方法。

第四種情況，是沒有內容的元素，自身的margin-top和margin-bottom發生的重疊。我們可以通過為其設定border、pa
dding或者高度來解決這個問題。
27.對 BFC 規範（塊級格式化上下文：blockformattingcontext）的理解？
BFC指的是塊級格式化上下文，一個元素形成了BFC之後，那麼它內部元素產生的佈局不會影響到外部元素，外部元素的佈局也
不會影響到BFC中的內部元素。一個BFC就像是一個隔離區域，和其他區域互不影響。

一般來說根元素是一個BFC區域，浮動和絕對定位的元素也會形成BFC，display屬性的值為inline-block、flex這些
屬性時也會建立BFC。還有就是元素的overflow的值不為visible時都會建立BFC
28.IFC 是什麼？
IFC指的是行級格式化上下文，它有這樣的一些佈局規則：

（1）行級上下文內部的盒子會在水平方向，一個接一個地放置。
（2）當一行不夠的時候會自動切換到下一行。
（3）行級上下文的高度由內部最高的內聯盒子的高度決定。
29.請解釋一下為什麼需要清除浮動？清除浮動的方式
浮動元素可以左右移動，直到遇到另一個浮動元素或者遇到它外邊緣的包含框。浮動框不屬於文件流中的普通流，當元素浮動之後，
不會影響塊級元素的佈局，只會影響內聯元素佈局。此時文件流中的普通流就會表現得該浮動框不存在一樣的佈局模式。當包含框
的高度小於浮動框的時候，此時就會出現“高度塌陷”。

清除浮動是為了清除使用浮動元素產生的影響。浮動的元素，高度會塌陷，而高度的塌陷使我們頁面後面的佈局不能正常顯示。

清除浮動的方式

（1）使用clear屬性清除浮動。參考28。

（2）使用BFC塊級格式化上下文來清除浮動。參考26。

因為BFC元素不會影響外部元素的特點，所以BFC元素也可以用來清除浮動的影響，因為如果不清除，子元素浮動則父元
素高度塌陷，必然會影響後面元素佈局和定位，這顯然有違BFC元素的子元素不會影響外部元素的設定。
30.使用 clear 屬性清除浮動的原理？
使用clear屬性清除浮動，其語法如下：

clear:none|left|right|both

如果單看字面意思，clear:left應該是“清除左浮動”，clear:right應該是“清除右浮動”的意思，實際上，這種解釋是有問
題的，因為浮動一直還在，並沒有清除。

官方對clear屬性的解釋是：“元素盒子的邊不能和前面的浮動元素相鄰。”，我們對元素設定clear屬性是為了避免浮動元素
對該元素的影響，而不是清除掉浮動。

還需要注意的一點是clear屬性指的是元素盒子的邊不能和前面的浮動元素相鄰，注意這裡“前面的”3個字，也就是clear屬
性對“後面的”浮動元素是不聞不問的。考慮到float屬性要麼是left，要麼是right，不可能同時存在，同時由於clear
屬性對“後面的”浮動元素不聞不問，因此，當clear:left有效的時候，clear:right必定無效，也就是此時clear:left
等同於設定clear:both；同樣地，clear:right如果有效也是等同於設定clear:both。由此可見，clear:left和cle
ar:right這兩個宣告就沒有任何使用的價值，至少在CSS世界中是如此，直接使用clear:both吧。

一般使用偽元素的方式清除浮動

.clear::after{
content:’’;
display:table;//也可以是’block’，或者是’list-item’
clear:both;
}

clear屬性只有塊級元素才有效的，而::after等偽元素預設都是內聯水平，這就是藉助偽元素清除浮動影響時需要設定disp
lay屬性值的原因。