CSS 面試知識點總結

目錄

CSS 面試知識點總結

問題一：介紹一下標準的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

問題二：?css選擇器以及優先級？

問題三：::before 和:after 中雙冒號和單冒號有什么區別？解釋一下這 2 個偽元素的作用。

?問題四：偽類與偽元素的區別？

問題五：?CSS 中哪些屬性可以繼承？

Color

?問題六：如何居中 div？

問題七：display 有哪些值？說明他們的作用。

問題八：css幾種定位講解？

問題九：Flex布局

?問題十：用純 CSS 創建一個三角形的原理是什么？

問題十一：一個滿屏品字布局如何設計??

問題十二：CSS 多列等高如何實現？??

問題十三：經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用 hack 的技 巧？

問題十四：CSS 里的 visibility 屬性有個 collapse 屬性值是干嘛用的？在不同瀏覽器下以 后什么區別？

問題十五：width:auto 和 width:100%的區別

問題十六：絕對定位元素與非絕對定位元素的百分比計算的區別??

問題十七：簡單介紹使用圖片 base64 編碼的優點和缺點。?

?問題十八：margin 重疊問題的理解。

問題十九：對 BFC 規范（塊級格式化上下文：blockformattingcontext）的理解？

問題二十：請解釋一下為什么需要清除浮動？清除浮動的方式?

問題二十一：使用 clear 屬性清除浮動的原理？?

問題二十一：zoom:1 的清除浮動原理???

問題二十二：CSS 優化、提高性能的方法有哪些？?

問題二十三：瀏覽器是怎樣解析 CSS 選擇器的？?

?問題二十四：在網頁中應該使用奇數還是偶數的字體？為什么呢

問題二十五：margin 和 padding 分別適合什么場景使用？

問題二十六：抽離樣式模塊怎么寫，說出思路，有無實踐經驗？

問題二十七：為什么不建議使用統配符初始化 css 樣式？

問題二十八：對于 hasLayout 的理解？?

問題二十九：全屏滾動的原理是什么？用到了 CSS 的哪些屬性？（待深入實踐）?

問題 三十：什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的 IE？ （待深入了解）

問題三十一：怎么讓 Chrome 支持小于 12px 的文字？ （！！！！！！！！！！！！！）

問題三十二：讓頁面里的字體變清晰，變細用 CSS 怎么做？?

問題三十三：設備像素、css 像素、設備獨立像素、dpr、ppi 之間的區別？?

問題三十四：layoutviewport、visualviewport 和 idealviewport 的區別？

問題三十五：position:?xed;在 android 下無效怎么處理？?

問題三十六：如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？

問題三十七：如何讓去除 inline-block 元素間間距？??

問題三十八：?over?ow:scroll 時不能平滑滾動的問題怎么處理？

問題三十九：有一個高度自適應的 div，里面有兩個 div，一個高度 100px，希望另一個填滿 剩下的高度。?

問題四十：png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。有沒有了解過 webp？

問題四十一：瀏覽器如何判斷是否支持 webp 格式圖片

問題四十二：什么是 Cookie 隔離？（或者說：請求資源的時候不要讓它帶 cookie 怎么做）

問題四十二：style 標簽寫在 body 后與 body 前有什么區別？

問題四十三：闡述一下 CSSSprites

問題四十四：使用 rem 布局的優缺點？?

問題四十五：幾種常見css布局?

問題四十六：為什么 height:100%會無效？??

問題四十七：margin:auto 的填充規則？?

問題四十八：margin 無效的情形??

問題四十九：什么是基線和 x-height？?

問題五十：什么是層疊上下文？

問題五十一：什么是層疊水平？

問題五十二：元素的層疊順序？

問題五十二：層疊準則？

?問題五十三：隱藏元素的 background-image 到底加不加載？

問題五十四：.如何實現單行／多行文本溢出的省略（...）？

問題五十五：常見的元素隱藏方式？

問題五十六：css 實現上下固定中間自適應布局？

問題五十七：css 兩欄布局的實現？?

問題五十八：css 三欄布局的實現？

?問題五十九：實現一個寬高自適應的正方形

問題六十：實現一個三角形

問題六十一：一個自適應矩形，水平垂直居中，且寬高比為 2:1

---

問題一：介紹一下標準的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

相關知識點：

（1）有兩種盒子模型：IE盒模型（border-box）、W3C標準盒模型（content-box）
（2）盒模型：分為內容（content）、填充（padding）、邊界（margin）、邊框（border）四個部分
IE盒模型和W3C標準盒模型的區別：
（1）W3C標準盒模型：屬性width，height只包含內容content，不包含border和padding
（2）IE盒模型：屬性width，height包含content、border和padding，指的是content
+padding+border。
在ie8+瀏覽器中使用哪個盒模型可以由box-sizing（CSS新增的屬性）控制，默認值為content-box，即
標準盒模型；
如果將box-sizing設為border-box則用的是IE盒模型。如果在ie6，7，8中DOCTYPE缺失會將盒子模型
解釋為IE
盒子模型。若在頁面中聲明了DOCTYPE類型，所有的瀏覽器都會把盒模型解釋為W3C盒模型。

回答：

1、盒模型都是由四個部分組成的，分別是margin、border、padding和content。
2、標準盒模型和IE盒模型的區別在于設置width和height時，所對應的范圍不同。標準盒模型的width和height屬性的
3、范圍只包含了content，而IE盒模型的width和height屬性的范圍包含了border、padding和content。
4、一般來說，我們可以通過修改元素的box-sizing屬性來改變元素的盒模型。

問題二：?css選擇器以及優先級？

不同級別
在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。
作為style屬性寫在元素內的樣式
id選擇器
類選擇器
元素選擇器
通配符選擇器
瀏覽器自定義或繼承
總結排序：!important > 行內樣式 > ID選擇器 > 類選擇器 > 元素 > 通配符 > 繼承 > 瀏覽器默認屬性。

同一級別

(1) 同一級別中后寫的會覆蓋先寫的樣式

(2) 同一級別css引入方式不同，優先級不同
總結排序：內聯(行內)樣式 > 內部樣式表 > 外部樣式表 > 導入樣式(@import)。

對于選擇器優先級，還可以通過計算權重值來比較。（請參見：狠狠戳我）

選擇器：

1、普通選擇器

2、屬性選擇器?

3、偽類

?注：link、visited、active、hover的順序，為LoVe HAte

4、偽元素

?

問題三：::before 和:after 中雙冒號和單冒號有什么區別？解釋一下這 2 個偽元素的作用。

知識點：

單冒號（:）用于CSS3偽類，雙冒號（::）用于CSS3偽元素。（偽元素由雙冒號和偽元素名稱組成）
雙冒號是在當前規范中引入的，用于區分偽類和偽元素。不過瀏覽器需要同時支持舊的已經存在的偽元素寫法，比如:first-line、:first-letter、:before、:after等。
而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號的寫法。
想讓插入的內容出現在其它內容前，使用::before，否則，使用::after；
在代碼順序上，::after生成的內容也比::before生成的內容靠后。
如果按堆棧視角，::after生成的內容會在::before生成的內容之上。

回答：

在css3中使用單冒號來表示偽類，用雙冒號來表示偽元素。但是為了兼容已有的偽元素的寫法，在一些瀏覽器
中也可以使用單冒號
來表示偽元素。
偽類一般匹配的是元素的一些特殊狀態，如hover、link等，而偽元素一般匹配的特殊的位置，比如after、
before等。

?問題四：偽類與偽元素的區別？

? ? 1、css引入偽類和偽元素概念是為了格式化文檔樹以外的信息。也就是說，偽類和偽元素是用來修飾不在文檔樹中的部分，比如，一句話中的第一個字母，或者是列表中的第一個元素。
? ? 2、偽類用于當已有的元素處于某個狀態時，為其添加對應的樣式，這個狀態是根據用戶行為而動態變化的。比如說，當用戶懸停在指定的元素時，我們可以通過:hover來描述這個元素的狀態。
? ? ?3、偽元素用于創建一些不在文檔樹中的元素，并為其添加樣式。它們允許我們為元素的某些部分設置樣式。比如說，我們可以通過::before來在一個元素前增加一些文本，并為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實際上不在文檔樹中。

問題五：?CSS 中哪些屬性可以繼承？

? ? 1、每一個屬性在定義中都給出了這個屬性是否具有繼承性，一個具有繼承性的屬性會在沒有指定值的時候，會使用父元素的同屬性的值來作為自己的值。
? ? 2、一般具有繼承性的屬性有，字體相關的屬性，font-size和font-weight等。文本相關的屬性，color和text-align等。
? ? 3、表格的一些布局屬性、列表屬性如list-style等。還有光標屬性cursor、元素可見性visibility。

? ? 當一個屬性不是繼承屬性的時候，我們也可以通過將它的值設置為inherit來使它從父元素那獲取同名的屬性值來繼承。

1、inherit?關鍵字允許顯式的聲明繼承性，它對繼承和非繼承屬性都生效。

可以使用?all?簡寫屬性一次控制所有屬性的繼承，該屬性將其值應用于所有屬性，例如:

font {all: revert;font-size: 200%;font-weight: bold; }

這會將?font?屬性的樣式恢復為用戶代理（瀏覽器）的默認值，除非存在用戶樣式表，在這種情況下使用該樣式表。然后它將字體大小加倍并應用?font-weight?屬性 為"bold"。

2、initial?CSS關鍵字將屬性的初始（或默認）值應用于元素。不應將初始值與瀏覽器樣式表指定的值混淆。它可以應用于任何CSS屬性。這包括CSS簡寫all，initial?可用于將所有CSS屬性恢復到其初始狀態。

示例

HTML

<p><span>This text is red.</span><em>This text is in the initial color (typically black).</em><span>This is red again.</span> </p>

CSS

p {color: red; }em {color: initial; }

3、如果CSS關鍵字?unset?從其父級繼承，則將該屬性重新設置為繼承的值，如果沒有繼承父級樣式，則將該屬性重新設置為初始值。換句話說，在第一種情況下（繼承屬性）它的行為類似于inherit?，在第二種情況下（非繼承屬性）類似于initial。它可以應用于任何CSS屬性，包括CSS簡寫屬性?all?。

示例

Color

HTML

<p>This text is red.</p> <div class="foo"><p>This text is also red.</p> </div> <div class="bar"><p>This text is green (default inherited value).</p> </div>

CSS

.foo {color: blue; } .bar {color: green; }p {color: red; } .bar p {color: unset; }

結果：

?問題六：如何居中 div？

1、水平居中：給 div 設置一個寬度，然后添加 margin:0auto 屬性

div { width: 200px; margin: 0auto; }

2、水平居中，利用 text-align:center 實現

.container { background: rgba(0, 0, 0, 0.5); text-align: center; font-size: 0; } .box { display: inline-block; width: 500px; height: 400px; background-color: pink; }

3、讓絕對定位的 div 居中

div { position: absolute; width: 300px; height: 300px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; background-color: pink; /*方便看效果*/ }

4、水平垂直居中

//水平垂直居中一 /*確定容器的寬高寬500高300的層設置層的外邊距div{*/position:absolute;/*絕對定位*/width:500px;height:300px;top:50%;left:50%;margin:-150px00-250px;/*外邊距為自身寬高的一半*/background-color:pink;/*方便看效果*/ }//水平垂直居中二 /*未知容器的寬高，利用`transform`屬性*/div {position: absolute; /*相對定位或絕對定位均可*/width: 500px;height: 300px;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: pink; /*方便看效果*/ }//水平垂直居中三 /*利用flex布局實際使用時應考慮兼容性*/.container {display: flex;align-items: center; /*垂直居中*/justify-content: center; /*水平居中*/ } .containerdiv {width: 100px;height: 100px;background-color: pink; /*方便看效果*/ }//水平垂直居中四 /*利用text-align:center和vertical-align:middle屬性*/.container {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0, 0, 0, 0.5);text-align: center;font-size: 0;white-space: nowrap;overflow: auto; } .container::after {content: "";display: inline-block;height: 100%;vertical-align: middle; } .box {display: inline-block;width: 500px;height: 400px;background-color: pink;white-space: normal;vertical-align: middle; }

總結：一般常見的幾種居中的方法有：
對于寬高固定的元素
（1）我們可以利用margin:0auto來實現元素的水平居中。
（2）利用絕對定位，設置四個方向的值都為0，并將margin設置為auto，由于寬高固定，因此對應方向實現平分，可以實現水平和垂直方向上的居中。

（3）利用絕對定位，先將元素的左上角通過top:50%和left:50%定位到頁面的中心，然后再通過margin負值來調整元素的中心點到頁面的中心。
（4）利用絕對定位，先將元素的左上角通過top:50%和left:50%定位到頁面的中心，然后再通過translate來調整元素的中心點到頁面的中心。
（5）使用flex布局，通過align-items:center和justify-content:center設置容器的垂直和水平方向上為居中對齊，然后它的子元素也可以實現垂直和水平的居中。
對于寬高不定的元素，上面的后面兩種方法，可以實現元素的垂直和水平的居中。

問題七：display 有哪些值？說明他們的作用。

block? ?塊類型。默認寬度為父元素寬度，可設置寬高，換行顯示。
none? ?元素不顯示，并從文檔流中移除。
inline? ?行內元素類型。默認寬度為內容寬度，不可設置寬高，同行顯示。
inline-block? 默認寬度為內容寬度，可以設置寬高，同行顯示。
list-item? 像塊類型元素一樣顯示，并添加樣式列表標記。
table? 此元素會作為塊級表格來顯示。
inherit? 規定應該從父元素繼承display屬性的值。

問題八：css幾種定位講解？

CSS中的定位使用來布局的熟練應用對頁面美化有很好的幫助，下面就進行詳細介紹：定位分為靜態定位，相對定位，絕對定位，固定定位這四種，定位有不同的參數，例如：left、right、top、bottom、z-index等。

1、靜態定位（static）

一般的標簽元素不加任何定位屬性都屬于靜態定位，在頁面的最底層屬于標準流。

2、絕對定位（absolute）

絕對定位的元素從文檔流中拖出，使用left、right、top、bottom等屬性相對于其最接近的一個最有定位設置的父級元素進行絕對定位，如果元素的父級沒有設置定位屬性，則依據 body 元素左上角作為參考進行定位。絕對定位元素可層疊，層疊順序可通過 z-index 屬性控制，z-index值為無單位的整數，大的在上面，可以有負值。

絕對定位的定位方法：如果它的父元素設置了除static之外的定位，比如position:relative或position:absolute及position:fixed，那么它就會相對于它的父元素來定位，位置通過left , top ,right ,bottom屬性來規定，如果它的父元素沒有設置定位，那么就得看它父元素的父元素是否有設置定位，如果還是沒有就繼續向更高層的祖先元素類推，總之它的定位就是相對于設置了除static定位之外的定位的第一個祖先元素，如果所有的祖先元素都沒有以上三種定位中的其中一種定位，那么它就會相對于文檔body來定位（并非相對于瀏覽器窗口，相對于窗口定位的是fixed）。

3、相對定位（relative）

相對定位元素不可層疊，依據left、right、top、bottom等屬性在正常文檔流中偏移自身位置。同樣可以用z-index分層設計。

4、固定定位（fixed）

固定定位與絕對定位類似，不占位置完全脫標，但它是相對于瀏覽器窗口定位，并且不會隨著滾動條進行滾動。

固定定位的最常見的一種用途是在頁面中創建一個固定頭部、固定腳部或者固定側邊欄，不需使用margin、border、padding。

5、絕對定位vs相對定位

絕對定位好像把不同元素安排到了一棟樓的不同樓層(除首層，文本流放在首層)，它們之間互不影響；

相對定位元素在首層，與文本流一起存放，它們之間互相影響。

被設置了絕對定位的元素，在文檔流中是不占據空間的，如果某元素設置了絕對定位，那么它在文檔流中的位置會被刪除，它浮了起來，其實設置了相對定位也會讓元素浮起來，但它們的不同點在于，相對定位不會刪除它本身在文檔流中占據的空間，其他元素不可以占據該空間，而絕對定位則會刪除掉該元素在文檔流中的位置，使其完全從文檔流中抽了出來，其他元素可以占據其空間，可以通過z-index來設置它們的堆疊順序 。

問題九：Flex布局

flex布局是CSS3新增的一種布局方式，我們可以通過將一個元素的display屬性值設置為flex從而使它成為
一個flex容器，它的所有子元素都會成為它的項目。
一個容器默認有兩條軸，一個是水平的主軸，一個是與主軸垂直的交叉軸。我們可以使用flex-direction來指定主軸的方向。
我們可以使用justify-content來指定元素在主軸上的排列方式，使用align-items來指定元素在交叉軸上的排列方式。還可以使用flex-wrap來規定當一行排列不下時的換行方式。
對于容器中的項目，我們可以使用order屬性來指定項目的排列順序，還可以使用flex-grow來指定當排列空間有剩余的時候，項目的放大比例。還可以使用flex-shrink來指定當排列空間不足時，項目的縮小比例。

詳情請看：flex布局講解。flex布局：語法篇。flex布局：實例篇

?問題十：用純 CSS 創建一個三角形的原理是什么？

采用的是相鄰邊框連接處的均分原理。?
將元素的寬高設為0，只設置?border?，把任意三條邊隱藏掉（顏色設為?transparent），剩下的就是一個三角形。?
#demo {?
? ? width: 0;?
? ? height: 0;?
? ? border-width: 20px;?
? ?border-style: solid;?
? ?border-color: transparenttransparentredtransparent;

}

問題十一：一個滿屏品字布局如何設計??

簡單的方式：?
上面的div寬100%，?
下面的兩個div分別寬50%，?
然后用float或者inline使其不換行即可?

問題十二：CSS 多列等高如何實現？??

（1）利用padding-bottom|margin-bottom正負值相抵，不會影響頁面布局的特點。設置父容器設置超 出隱藏（overflow:?
hidden），這樣父容器的高度就還是它里面的列沒有設定padding-bottom時的高度，當它里面的任一列高 度增加了，則?
父容器的高度被撐到里面最高那列的高度，其他比這列矮的列會用它們的padding-bottom補償這部分高度 差。?
（2）利用table-cell所有單元格高度都相等的特性，來實現多列等高。?
（3）利用flex布局中項目align-items屬性默認為stretch，如果項目未設置高度或設為auto，將占滿整 個容器的高度?的特性，來實現多列等高。?

問題十三：經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用 hack 的技 巧？

?（1）png24位的圖片在iE6瀏覽器上出現背景?
解決方案：做成PNG8，也可以引用一段腳本處理。?
（2）瀏覽器默認的margin和padding不同?
解決方案：加一個全局的*{margin:0;padding:0;}來統一。?
（3）IE6雙邊距bug：在IE6下，如果對元素設置了浮動，同時又設置了margin-left或?
margin-right，margin值會加倍。?
#box{float:left;width:10px;margin:00010px;}?
這種情況之下IE會產生20px的距離?
解決方案：在float的標簽樣式控制中加入_display:inline;將其轉化為行內屬性。(_這個符號只有ie6 會識別)?
（4）漸進識別的方式，從總體中逐漸排除局部。?
首先，巧妙的使用"\9"這一標記，將IE游覽器從所有情況中分離出來。?
接著，再次使用"+"將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。?
.bb{?
background-color:#f1ee18;/*所有識別*/?
.background-color:#00deff\9;/*IE6、7、8識別*/?
+background-color:#a200ff;/*IE6、7識別*/?
_background-color:#1e0bd1;/*IE6識別*/?
}?
（5）IE下，可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義 屬性；Firefox下，只能使用getAttribute()獲取自定義屬性?解決方法：統一通過getAttribute()獲取自定義屬性。?
（6）IE下，event對象有x、y屬性，但是沒有pageX、pageY屬性;Firefox下，event對象有?
pageX、pageY屬性，但是沒有x、y屬性。?
解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。?
（7）Chrome中文界面下默認會將小于12px的文本強制按照12px顯示?
解決方法：?
1.可通過加入CSS屬性-webkit-text-size-adjust:none;解決。但是，在chrome?
更新到27版本之后就不可以用了。?
2.還可以使用-webkit-transform:scale(0.5);注意-webkit-transform:scale(0.75);?
收縮的是整個span的大小，這時候，必須要將span轉換成塊元素，可以使用display：block/inline- block/...；?
（8）超鏈接訪問過后hover樣式就不出現了，被點擊訪問過的超鏈接樣式不再具有hover和active了 解決方法：改變CSS屬性的排列順序L-V-H-A?
（9）怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發怪異模 式。為避免怪異模式給我們帶來不必要的麻煩，最好養成書寫DTD聲明的好習慣。?

問題十四：CSS 里的 visibility 屬性有個 collapse 屬性值是干嘛用的？在不同瀏覽器下以 后什么區別？

（1）對于一般的元素，它的表現跟visibility：hidden;是一樣的。元素是不可見的，但此時仍占用頁面 空間。?
（2）但例外的是，如果這個元素是table相關的元素，例如table行，tablegroup，table列， tablecolumngroup，它的?表現卻跟display:none一樣，也就是說，它們占用的空間也會釋放。?
在不同瀏覽器下的區別：?
? ? 在谷歌瀏覽器里，使用collapse值和使用hidden值沒有什么區別。?
? ?在火狐瀏覽器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行會消失，它的下面 一行會補充它的位?置。??

問題十五：width:auto 和 width:100%的區別

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

width:auto會使元素撐滿整個父元素，margin、border、padding、content區域會自動分配水平空 間。?

問題十六：絕對定位元素與非絕對定位元素的百分比計算的區別??

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

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

問題十七：簡單介紹使用圖片 base64 編碼的優點和缺點。?

base64編碼是一種圖片處理格式，通過特定的算法將圖片編碼成一長串字符串，在頁面上顯示的時候，可以 用該字符串來代替圖片的?url屬性。?
使用base64的優點是：?
（1）減少一個圖片的HTTP請求?
使用base64的缺點是：?
（1）根據base64的編碼原理，編碼后的大小會比原文件大小大1/3，如果把大圖片編碼到html/css中，不 僅會造成文件體?
積的增加，影響文件的加載速度，還會增加瀏覽器對html或css文件解析渲染的時間。?
（2）使用base64無法直接緩存，要緩存只能緩存包含base64的文件，比如HTML或者CSS，這相比域直接緩 存圖片的效果要?
差很多。?
（3）兼容性的問題，ie8以前的瀏覽器不支持。??

一般一些網站的小圖標可以使用base64圖片來引入。?

?問題十八：margin 重疊問題的理解。

塊級元素的上外邊距（margin-top）與下外邊距（margin-bottom）有時會合并為單個外邊距，這樣的現 象稱為“margin合?
并”。?
產生折疊的必備條件：margin必須是鄰接的!?
而根據w3c規范，兩個margin是鄰接的必須滿足以下條件：?
?必須是處于常規文檔流（非float和絕對定位）的塊級盒子，并且處于同一個BFC當中。?
?沒有線盒，沒有空隙，沒有padding和border將他們分隔開?
?都屬于垂直方向上相鄰的外邊距，可以是下面任意一種情況?
? ? ? ?1、?元素的margin-top與其第一個常規文檔流的子元素的margin-top?
? ? ? ?2、?元素的margin-bottom與其下一個常規文檔流的兄弟元素的margin-top?
? ? ? ?3、?height為auto的元素的margin-bottom與其最后一個常規文檔流的子元素的margin-bottom

? ? ? ?4、?高度為0并且最小高度也為0，不包含常規文檔流的子元素，并且自身沒有建立新的BFC的元素的margin- top?
? ? ? ?和margin-bottom

margin合并的3種場景：?
（1）相鄰兄弟元素margin合并。?
? ? ? ? ?解決辦法：?
? ? ? ? ??設置塊狀格式化上下文元素（BFC）?
（2）父級和第一個/最后一個子元素的margin合并。?
? ? ? ? ?解決辦法：?
? ? ? ? ?對于margin-top合并，可以進行如下操作（滿足一個條件即可）：

? ? ? ? ? ? ??父元素設置為塊狀格式化上下文元素；?
? ? ? ? ? ? ??父元素設置border-top值；?
? ? ? ?? ? ? ?父元素設置padding-top值；?
? ? ? ? ? ????父元素和第一個子元素之間添加內聯元素進行分隔。?
? ? ? ?對于margin-bottom合并，可以進行如下操作（滿足一個條件即可）： ?父元素設置為塊狀格式化上下文元素；?
? ? ? ? ? ? ?父元素設置border-bottom值；?
? ? ? ? ? ? ?父元素設置padding-bottom值；?
? ? ? ? ? ? ?父元素和最后一個子元素之間添加內聯元素進行分隔；?
? ? ? ? ? ? ?父元素設置height、min-height或max-height。?
（3）空塊級元素的margin合并。?
? ? ? ?解決辦法：?
? ? ? ??設置垂直方向的border；?
? ? ? ??設置垂直方向的padding；?
? ? ? ??里面添加內聯元素（直接Space鍵空格是沒用的）；?
? ? ? ??設置height或者min-height。?

回答總結：

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或者高度來解決這個問題。 ?
?

問題十九：對 BFC 規范（塊級格式化上下文：blockformattingcontext）的理解？

塊格式化上下文（BlockFormattingContext，BFC）是Web頁面的可視化CSS渲染的一部分，是布局過程 中生成塊級盒?
子的區域，也是浮動元素與其他元素的交互限定區域。?
通俗來講 ：
? ? ? ? ? ??BFC是一個獨立的布局環境，可以理解為一個容器，在這個容器中按照一定規則進行物品擺放，并且不會影響 其它環境中的物品。?
? ? ? ? ? ? ?如果一個元素符合觸發BFC的條件，則BFC中的元素布局不受外部影響。?
創建BFC?
（1）根元素或包含根元素的元素?
（2）浮動元素float＝left|right或inherit（≠none）?
（3）絕對定位元素position＝absolute或fixed?
（4）display＝inline-block|flex|inline-flex|table-cell或table-caption?
（5）overflow＝hidden|auto或scroll(≠visible)?

回答：

BFC指的是塊級格式化上下文，一個元素形成了BFC之后，那么它內部元素產生的布局不會影響到外部元素， 外部元素的布局也 不會影響到BFC中的內部元素。一個BFC就像是一個隔離區域，和其他區域互不影響。?
一般來說根元素是一個BFC區域，浮動和絕對定位的元素也會形成BFC，display屬性的值為inline- block、flex這些?
屬性時也會創建BFC。還有就是元素的overflow的值不為visible時都會創建BFC。?

問題二十：請解釋一下為什么需要清除浮動？清除浮動的方式?

? ? 浮動元素可以左右移動，直到遇到另一個浮動元素或者遇到它外邊緣的包含框。浮動框不屬于文檔流中的普通 流，當元素浮動之后，?不會影響塊級元素的布局，只會影響內聯元素布局。此時文檔流中的普通流就會表現得該浮動框不存在一樣的 布局模式。當包含框?的高度小于浮動框的時候，此時就會出現“高度塌陷”。?
清除浮動是為了清除使用浮動元素產生的影響。浮動的元素，高度會塌陷，而高度的塌陷使我們頁面后面的布 局不能正常顯示。?
? ? 清除浮動的方式：

? ??清除浮動四種方式

因為BFC元素不會影響外部元素的特點，所以BFC元素也可以用來清除浮動的影響，因為如果不清除，子元素 浮動則父元?
素高度塌陷，必然會影響后面元素布局和定位，這顯然有違BFC元素的子元素不會影響外部元素的設定。

問題二十一：使用 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和clear:right這兩個聲明就沒有任何使用的價值，至少在CSS世界中是此，直接使用clear:both吧。?
一般使用偽元素的方式清除浮動?
.clear::after{?
?? ?content:'';?
?? ?display:table;//也可以是'block'，或者是'list-item'?
?? ?clear:both;?
}?
clear屬性只有塊級元素才有效的，而::after等偽元素默認都是內聯水平，這就是借助偽元素清除浮動影響 時需要設置display屬性值的原因。

問題二十一：zoom:1 的清除浮動原理???

清除浮動，觸發hasLayout；?
zoom屬性是IE瀏覽器的專有屬性，它可以設置或檢索對象的縮放比例。解決ie下比較奇葩的bug。譬如外邊 距（margin）?
的重疊，浮動清除，觸發ie的haslayout屬性等。?
來龍去脈大概如下：?
? ? 當設置了zoom的值之后，所設置的元素就會就會擴大或者縮小，高度寬度就會重新計算了，這里一旦改變 zoom值時其實也會發?生重新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨著自動擴大的問題。?
? ? zoom屬性是IE瀏覽器的專有屬性，火狐和老版本的webkit核心的瀏覽器都不支持這個屬性。然而，zoom現 在已經被逐步標?準化，出現在CSS3.0規范草案中。?
? ? 目前非ie由于不支持這個屬性，它們又是通過什么屬性來實現元素的縮放呢？可以通過css3里面的動畫屬性 scale進行縮放。?

問題二十二：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）慎重使用高性能屬性：浮動、定位。?
（2）盡量減少頁面重排、重繪。?
（3）去除空規則：｛｝。空規則的產生原因一般來說是為了預留樣式。去除這些空規則無疑能減少css文檔體積。?
（4）屬性值為0時，不加單位。?
（5）屬性值為浮動小數0.**，可以省略小數點之前的0。?
（6）標準化各種瀏覽器前綴：帶瀏覽器前綴的在前。標準屬性在后。?
（7）不使用@import前綴，它會影響css的加載速度。?
（8）選擇器優化嵌套，盡量避免層級過深。?
（9）css雪碧圖，同一頁面相近部分的小圖標，方便使用，減少頁面的請求次數，但是同時圖片本身會變大， 使用時，優劣考慮清?楚，再使用。?
（10）正確使用display的屬性，由于display的作用，某些樣式組合會無效，徒增樣式體積的同時也影響 解析性能。?
（11）不濫用web字體。對于中文網站來說WebFonts可能很陌生，國外卻很流行。webfonts通常體積龐 大，而且一些瀏?
覽器在下載webfonts時會阻塞頁面渲染損傷性能。?
可維護性、健壯性：?
（1）將具有相同屬性的樣式抽離出來，整合并通過class在頁面中進行使用，提高css的可維護性。?
（2）樣式與內容分離：將css代碼定義到外部css中。?
?

問題二十三：瀏覽器是怎樣解析 CSS 選擇器的？?

? ? 樣式系統從關鍵選擇器開始匹配，然后左移查找規則選擇器的祖先元素。只要選擇器的子樹一直在工作，樣式 系統就會持續左移，直?到和規則匹配，或者是因為不匹配而放棄該規則。?
? ? 試想一下，如果采用從左至右的方式讀取CSS規則，那么大多數規則讀到最后（最右）才會發現是不匹配的， 這樣做會費時耗能，最后有很多都是無用的；而如果采取從右向左的方式，那么只要發現最右邊選擇器不匹配，就可以直接舍棄了，避免了許多無效匹配。?

?問題二十四：在網頁中應該使用奇數還是偶數的字體？為什么呢

（1）偶數字號相對更容易和web設計的其他部分構成比例關系。比如：當我用了14px的正文字號，我可能會 在一些地方用14?×0.5=7px的margin，在另一些地方用14×1.5=21px的標題字號。?
（2）瀏覽器緣故，低版本的瀏覽器ie6會把奇數字體強制轉化為偶數，即13px渲染為14px。?
（3）系統差別，早期的Windows里，中易宋體點陣只有12和14、15、16px，唯獨缺少13px。?

問題二十五：margin 和 padding 分別適合什么場景使用？

margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。?
margin用于布局分開元素使元素與元素互不相干。?
padding用于元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段距離。?
何時應當使用margin：?
?需要在border外側添加空白時。?
?空白處不需要背景（色）時。?
?上下相連的兩個盒子之間的空白，需要相互抵消時。如15px+20px的margin，將得到20px的空白。?
何時應當時用padding：?
?需要在border內測添加空白時。?
?空白處需要背景（色）時。?
?上下相連的兩個盒子之間的空白，希望等于兩者之和時。如15px+20px的padding，將得到35px的空白。??

問題二十六：抽離樣式模塊怎么寫，說出思路，有無實踐經驗？

把常用的css樣式單獨做成css文件……通用的和業務相關的分離出來，通用的做成樣式模塊兒共 享，業務相關的，放?
進業務相關的庫里面做成對應功能的模塊兒。??

問題二十七：為什么不建議使用統配符初始化 css 樣式？

? ? ? 采用*{pading:0;margin:0;}這樣的寫法好處是寫起來很簡單，但是通配符，需要把所有的標簽都遍歷 一遍，當網站較大時，?樣式比較多，這樣寫就大大的加強了網站運行的負載，會使網站加載的時候需要很長一段時間，因此一般大型 的網站都有分層次的一?套初始化樣式。?
? ? ? ?出于性能的考慮，并不是所有標簽都會有padding和margin，因此對常見的具有默認padding和margin的 元素初始化即可，并不需使用通配符*來初始化。?

問題二十八：對于 hasLayout 的理解？?

? ? hasLayout是IE特有的一個屬性。很多的IE下的cssbug都與其息息相關。在IE中，一個元素要么自己對自 身的內容進?
行計算大小和組織，要么依賴于父元素來計算尺寸和組織內容。當一個元素的hasLayout屬性值為true時， 它負責對自己和可?能的子孫元素進行尺寸計算和定位。雖然這意味著這個元素需要花更多的代價來維護自身和里面的內容，而不 是依賴于祖先元素來完?成這些工作。?

問題二十九：全屏滾動的原理是什么？用到了 CSS 的哪些屬性？（待深入實踐）?

?原理：有點類似于輪播，整體的元素一直排列下去，假設有5個需要展示的全屏頁面，那么高度是500%，只是 展100%，容器及容?器內的頁面取當前可視區高度，同時容器的父級元素overflow屬性值設為hidden，通過更改容器可視區的位 置來實現全屏滾動效果。主要是響應鼠標事件，頁面通過CSS的動畫效果，進行移動。?
overflow：hidden；transition：all? 1000? ms? ?ease；?

問題 三十：什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的 IE？ （待深入了解）

響應式網站設計是一個網站能夠兼容多個終端，而不是為每一個終端做一個特定的版本?；驹硎峭ㄟ^媒體 查詢檢測不同的設備屏?幕尺寸做處理。頁面頭部必須有meta聲明的viewport。??

如何兼容IE？

問題三十一：怎么讓 Chrome 支持小于 12px 的文字？ （！！！！！！！！！！！！！）

在谷歌下css設置字體大小為12px及以下時，顯示都是一樣大小，都是默認12px。?
（1）可以使用Webkit的內核的-webkit-text-size-adjust的私有CSS屬性來解決，只要加了-webkit- text-size?-adjust:none;字體大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome 谷歌瀏覽器?已經不再支持-webkit-text-size-adjust樣式，所以要使用時候慎用。?
（2）還可以使用css3的transform縮放屬性-webkit-transform:scale(0.5);
注意-webkit- transform:scale(0.?75);收縮的是整個元素的大小，這時候，如果是內聯元素，必須要將內聯元素轉換成塊元素，可以使用 display：block/?inline-block/...；?
（3）使用圖片：如果是內容固定不變情況下，使用將小于12px文字內容切出做圖片，這樣不影響兼容也不影響美觀。

問題三十二：讓頁面里的字體變清晰，變細用 CSS 怎么做？?

webkit內核的私有屬性：-webkit-font-smoothing，用于字體抗鋸齒，使用后字體看起來會更清晰舒 服。?
在MacOS測試環境下面設置-webkit-font-smoothing:antialiased;但是這個屬性僅僅是面向MacOS， 其他操作系統設?置后無效。?

問題三十三：設備像素、css 像素、設備獨立像素、dpr、ppi 之間的區別？?

?設備像素指的是物理像素，一般手機的分辨率指的就是設備像素，一個設備的設備像素是不可變的。?
css像素和設備獨立像素是等價的，不管在何種分辨率的設備上，css像素的大小應該是一致的，css像素是一 個相對單位，它是相 對于設備像素的，一個css像素的大小取決于頁面縮放程度和dpr的大小。?
dpr指的是設備像素和設備獨立像素的比值，一般的pc屏幕，dpr=1。在iphone4時，蘋果推出了retina屏 幕，它的dpr為2。屏幕的縮放會改變dpr的值。?
ppi指的是每英寸的物理像素的密度，ppi越大，屏幕的分辨率越大。?

問題三十四：layoutviewport、visualviewport 和 idealviewport 的區別？

?? ? 第一個視口是布局視口，在移動端顯示網頁時，由于移動端的屏幕尺寸比較小，如果網頁使用移動端的屏幕尺寸進行布局的話，那么整 個頁面的布局都會顯示錯亂。所以移動端瀏覽器提供了一個layoutviewport布局視口的概念，使用這個視口 來對頁面進行布局展 示，一般layoutviewport的大小為980px，因此頁面布局不會有太大的變化，我們可以通過拖動和縮放來查 看到這個頁面。?
? ? 第二個視口指的是視覺視口，visualviewport指的是移動設備上我們可見的區域的視口大小，一般為屏幕的 分辨率的大小。visualviewport和layoutviewport的關系，就像是我們通過窗戶看外面的風景，視覺視口就是窗戶，而外面的 風景就是布局視口中的網頁內容。?
? ? 第三個視口是理想視口，由于layoutviewport一般比visualviewport要大，所以想要看到整個頁面必須 通過拖動和縮放才 能實現。所以又提出了idealviewport的概念，idealviewport下用戶不用縮放和滾動條就能夠查看到整 個頁面，并且頁面在不同分辨率下顯示的內容大小相同。idealviewport其實就是通過修改layoutviewport的大小，讓它等于設備的寬度，這個寬度可以理解為是設備獨立像素，因此根據idealviewport設計的頁面，在不同分辨率的屏幕下，顯示應該相同。?

問題三十五：position:?xed;在 android 下無效怎么處理？?

因為移動端瀏覽器默認的viewport叫做layoutviewport。在移動端顯示時，因為layoutviewport的寬 度大于移動端屏幕?的寬度，所以頁面會出現滾動條左右移動，fixed的元素是相對layoutviewport來固定位置的，而不是移動端屏幕來固定位置的?
，所以會出現感覺fixed無效的情況。?如果想實現fixed相對于屏幕的固定效果，我們需要改變的是viewport的大小為idealviewport，可以如 下設置：?
<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum- scale=1.0,minimum-sca?
le=1.0,user-scalable=no"/>?

問題三十六：如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？

多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60*1000ms＝16.7ms??

問題三十七：如何讓去除 inline-block 元素間間距？??

移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing?

去除inline-block元素間間距的N中方法

問題三十八：?over?ow:scroll 時不能平滑滾動的問題怎么處理？

以下代碼可解決這種卡頓的問題：-webkit-overflow-scrolling:touch;是因為這行代碼啟用了硬件加 速特性，所以滑動很流?
暢。?

問題三十九：有一個高度自適應的 div，里面有兩個 div，一個高度 100px，希望另一個填滿 剩下的高度。?

?（1）外層div使用position：relative；高度要求自適應的div使用 position:absolute;top:100px;bottom:0;?
left:0;right:0;?
（2）使用flex布局，設置主軸為豎軸，第二個div的flex-grow為1。

其他：三種方法?

問題四十：png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。有沒有了解過 webp？

（1）第一種是BMP格式，它是無損壓縮的，支持索引色和直接色的點陣圖。由于它基本上沒有進行壓縮，因此 它的文件體積一般比較大。?
（2）第二種是GIF格式，它是無損壓縮的使用索引色的點陣圖。由于使用了LZW壓縮方法，因此文件的體積很小。并且GIF還 支持動畫和透明度。但因為它使用的是索引色，所以它適用于一些對顏色要求不高且需要文件體積小的場景。?
（3）第三種是JPEG格式，它是有損壓縮的使用直接色的點陣圖。由于使用了直接色，色彩較為豐富，一般適用于來存儲照片。但 由于使用的是直接色，可能文件的體積相對于GIF格式來說更大。?
（4）第四種是PNG-8格式，它是無損壓縮的使用索引色的點陣圖。它是GIF的一種很好的替代格式，它也支持 透明度的調整，并 且文件的體積相對于GIF格式更小。一般來說如果不是需要動畫的情況，我們都可以使用PNG-8格式代替GIF 格式。?
（5）第五種是PNG-24格式，它是無損壓縮的使用直接色的點陣圖。PNG-24的優點是它使用了壓縮算法，所 以它的體積比BMP 格式的文件要小得多，但是相對于其他的幾種格式，還是要大一些。?
（6）第六種格式是svg格式，它是矢量圖，它記錄的圖片的繪制方式，因此對矢量圖進行放大和縮小不會產生 鋸齒和失真。它一般 適合于用來制作一些網站logo或者圖標之類的圖片。?
（7）第七種格式是webp格式，它是支持有損和無損兩種壓縮方式的使用直接色的點陣圖。使用webp格式的最 大的優點是，在相同質量的文件下，它擁有更小的文件體積。因此它非常適合于網絡圖片的傳輸，因為圖片體積的減少，意味著 請求時間的減小， 這樣會提高用戶的體驗。這是谷歌開發的一種新的圖片格式，目前在兼容性上還不是太好。?
?

問題四十一：瀏覽器如何判斷是否支持 webp 格式圖片

（1）寬高判斷法。通過創建image對象，將其src屬性設置為webp格式的圖片，然后在onload事件中獲取圖 片的寬高，如?
果能夠獲取，則說明瀏覽器支持webp格式圖片。如果不能獲取或者觸發了onerror函數，那么就說明瀏覽器 不支持webp格?
式的圖片。?
（2）canvas判斷方法。我們可以動態的創建一個canvas對象，通過canvas的toDataURL將設置為webp格 式，然后判斷?
返回值中是否含有image/webp字段，如果包含則說明支持WebP，反之則不支持。?
?

問題四十二：什么是 Cookie 隔離？（或者說：請求資源的時候不要讓它帶 cookie 怎么做）

網站向服務器請求的時候，會自動帶上cookie這樣增加表頭信息量，使請求變慢。?

? ? 如果靜態文件都放在主域名下，那靜態文件請求的時候都帶有的cookie的數據提交給server的，非常浪費流量，所以不如隔離開?，靜態資源放CDN。?
? ? 因為cookie有域的限制，因此不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie數 據，這樣可以降低請?求頭的大小，降低請求時間，從而達到降低整體請求延時的目的。?
? ? 同時這種方式不會將cookie傳入WebServer，也減少了WebServer對cookie的處理分析環節，提高了 webserver的?
http請求的解析速度。??

問題四十二：style 標簽寫在 body 后與 body 前有什么區別？

?頁面加載自上而下當然是先加載樣式。寫在body標簽后由于瀏覽器以逐行方式對HTML文檔進行解析，當解析 到寫在尾部的樣式?表（外聯或寫在style標簽）會導致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染，在 windows的IE下可?能會出現FOUC現象（即樣式失效導致的頁面閃爍問題）?

問題四十三：闡述一下 CSSSprites

將一個頁面涉及到的所有圖片都包含到一張大圖中去，然后利用CSS的background-image，background- repeat，background?-position的組合進行背景定位。利用CSSSprites能很好地減少網頁的http請求，從而很好的提高頁面的 性能；CSSSprites?能減少圖片的字節。?
優點：?
? ? 減少HTTP請求數，極大地提高頁面加載速度?
? ? 增加圖片信息重復度，提高壓縮比，減少圖片大小?
? ? 更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現?
缺點：?
? ? 圖片合并麻煩?
? ? 維護麻煩，修改一個圖片可能需要重新布局整個圖片??

問題四十四：使用 rem 布局的優缺點？?

?優點：?
? ? 在屏幕分辨率千差萬別的時代，只要將rem與屏幕分辨率關聯起來就可以實現頁面的整體縮放，使得在設備上 的展現都統一起來了。?
? ? 而且現在瀏覽器基本都已經支持rem了，兼容性也非常的好。?
缺點：?
（1）在奇葩的dpr設備上表現效果不太好，比如一些華為的高端機型用rem布局會出現錯亂。?
（2）使用iframe引用也會出現問題。?
（3）rem在多屏幕尺寸適配上與當前兩大平臺的設計哲學不一致。即大屏的出現到底是為了看得又大又清楚， 還是為了看的更多的問?
題。?

問題四十五：幾種常見css布局?

幾種常見css布局?

問題四十六：為什么 height:100%會無效？??

? ? ? ?對于普通文檔流中的元素，百分比高度值要想起作用，其父級必須有一個可以生效的高度值。 原因是如果包含塊的高度沒有顯式指定（即高度由內容決定），并且該元素不是絕對定位，則計算值為auto， 因為解釋成了auto，?所以無法參與計算。?
使用絕對定位的元素會有計算值，即使祖先元素的height計算為auto也是如此。?
?

問題四十七：margin:auto 的填充規則？?

?margin的'auto'可不是擺設，是具有強烈的計算意味的關鍵字，用來計算元素對應方向應該獲得的剩余間距 大小。但是觸發mar?gin:auto計算有一個前提條件，就是width或height為auto時，元素是具有對應方向的自動填充特性的。

（1）如果一側定值，一側auto，則auto為剩余空間大小。?
（2）如果兩側均是auto，則平分剩余空間。?

問題四十八：margin 無效的情形??

（1）display計算值inline的非替換元素的垂直margin是無效的。對于內聯替換元素，垂直margin有 效，并且沒有ma?
rgin合并的問題。?
（2）表格中的<tr>和<td>元素或者設置display計算值是table-cell或table-row的元素的margin都 是無效的。?
（3）絕對定位元素非定位方位的margin值“無效”。?
（4）定高容器的子元素的margin-bottom或者寬度定死的子元素的margin-right的定位“失效”。?
?

問題四十九：什么是基線和 x-height？?

字母x的下邊緣（線）就是我們的基線。
x-height指的就是小寫字母x的高度，術語描述就是基線和等分線（meanline）（也稱作中線，midline） 之間的距離。
在CSS世界中，middle指的是基線往上1/2x-height高度。我們可以近似理解為字母x交叉點那個位置。?
ex是CSS中的一個相對單位，指的是小寫字母x的高度，沒錯，就是指x-height。ex的價值就在其副業上不 受字體和字號影?
響的內聯元素的垂直居中對齊效果。內聯元素默認是基線對齊的，而基線就是x的底部，而1ex就是一個x的高 度。?
?

問題五十：什么是層疊上下文？

層疊上下文，英文稱作stackingcontext，是HTML中的一個三維的概念。如果一個元素含有層疊上下文，我 們可以理解為這個元?素在z軸上就“高人一等”。?
層疊上下文元素有如下特性：?
（1）層疊上下文的層疊水平要比普通元素高（原因后面會說明）。?
（2）層疊上下文可以阻斷元素的混合模式。?
（3）層疊上下文可以嵌套，內部層疊上下文及其所有子元素均受制于外部的“層疊上下文”。?
（4）每個層疊上下文和兄弟元素獨立，也就是說，當進行層疊變化或渲染的時候，只需要考慮后代元素。?
（5）每個層疊上下文是自成體系的，當元素發生層疊的時候，整個元素被認為是在父層疊上下文的層疊順序 中。
層疊上下文的創建：?
（1）頁面根元素天生具有層疊上下文，稱為根層疊上下文。根層疊上下文指的是頁面根元素，可以看成是 <html>元素。因此，頁面中所有的元素一定處于至少一個“層疊結界”中。?
（2）對于position值為relative/absolute以及Firefox/IE瀏覽器（不包括Chrome瀏覽器）下含有 position:fixed聲明的定位元素，當其z-index值不是auto的時候，會創建層疊上下文。Chrome等 WebKit內核瀏覽器下，position:fixed元素天然層疊上下文元素，無須z-index為數值。根據我的測試， 目前IE和Firefox仍是老套路。
（3）其他一些CSS3屬性，比如元素的opacity值不是1。 ??
??

問題五十一：什么是層疊水平？

?層疊水平，英文稱作stackinglevel，決定了同一個層疊上下文中元素在z軸上的顯示順序。?
顯而易見，所有的元素都有層疊水平，包括層疊上下文元素，也包括普通元素。然而，對普通元素的層疊水平 探討只局限在當前層疊上下文元素中。?

問題五十二：元素的層疊順序？

?層疊順序，英文稱作 stackingorder，表示元素發生層疊時有著特定的垂直顯示順序。

??

問題五十二：層疊準則？

（1）誰大誰上：當具有明顯的層疊水平標識的時候，如生效的z-index屬性值，在同一個層疊上下文領域， 層疊水平值大的那一個覆蓋小的那一個。?
（2）后來居上：當元素的層疊水平一致、層疊順序相同的時候，在DOM流中處于后面的元素會覆蓋前面的元素。?

?問題五十三：隱藏元素的 background-image 到底加不加載？

回答：?
-（1）元素的背景圖片?
-元素本身設置 display:none，會請求圖片 -父級元素設置 display:none，不會請求圖片 -樣式沒有元素 使用，不會請求?
-:hover 樣式下，觸發時請求?
-（2）img 標簽圖片任何情況下都會請求圖片?
詳細資料可以參考：?
CSS控制前端圖片HTTP請求的各種情況

問題五十四：.如何實現單行／多行文本溢出的省略（...）？

?

/*單行文本溢出*/ p{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /*多行文本溢出*/ p{ position: relative; line-height: 1.5em; /*高度為需要顯示的行數*行高，比如這里我們顯示兩行，則為3*/ height: 3em; overflow: hidden; } p:after { content: "..."; position: absolute; bottom: 0; right: 0; background-color: #fff; }

?

問題五十五：常見的元素隱藏方式？

-（1）使用 display:none;隱藏元素，渲染樹不會包含該渲染對象，因此該元素不會在頁面中占據位 置，也不會響應綁定的監聽事件。?
-（2）使用 visibility:hidden;隱藏元素。元素在頁面中仍占據空間，但是不會響應綁定的監聽事件。?
-（3）使用 opacity:0;將元素的透明度設置為 0，以此來實現元素的隱藏。元素在頁面中仍然占據空 間，并且能夠響應元素綁定的監聽事件。?
-（4）通過使用絕對定位將元素移除可視區域內，以此來實現元素的隱藏。?
-（5）通過 z-index 負值，來使其他元素遮蓋住該元素，以此來實現隱藏。?
-（6）通過 clip/clip-path 元素裁剪的方法來實現元素的隱藏，這種方法下，元素仍在頁面中占據位 置，但是不會響應綁定的監聽事件。?
-（7）通過 transform:scale(0,0)來將元素縮放為 0，以此來實現元素的隱藏。這種方法下，元素仍在頁 面中占據位置，但是不會響應綁定的監聽事件。

css隱藏元素的8中方法?

問題五十六：css 實現上下固定中間自適應布局？

利用絕對定位實現 body { padding: 0; margin: 0; } .header { position: absolute; top: 0; width: 100%; height: 100px; background: red; } .container { position: absolute; top: 100px; bottom: 100px; width: 100%; background: green; } .footer { position: absolute; bottom: 0; height: 100px; width: 100%; background: red; } 利用flex布局實現html, body { height: 100%; } body { display: flex; padding: 0; margin: 0; flex-direction: column; } .header { height: 100px; background: red; } .container { flex-grow: 1; background: green; } .footer { height: 100px; background: red; }

?css實現上下固定中間自適應布局方法

問題五十七：css 兩欄布局的實現？?

/*兩欄布局一般指的是頁面中一共兩欄，左邊固定，右邊自適應的布局，一共有四種實現的方式。*/ /*以左邊寬度固定為200px為例*/ /*（1）利用浮動，將左邊元素寬度設置為200px，并且設置向左浮動。 將右邊元素的margin-left設置為 200px，寬度設置為auto（默認為auto，撐滿整個父元素）。*/ .outer { height: 100px; } .left { float: left; height: 100px; width: 200px; background: tomato; } .right { margin-left: 200px; width: auto; height: 100px; background: gold; } /*（2）第二種是利用flex布局，將左邊元素的放大和縮小比例設置為0， 基礎大小設置為200px。將右邊的 元素的放大比例設置為1，縮小比例設置為1，基礎大小設置為auto。*/ .outer { display: flex; height: 100px; } .left { flex-shrink: 0; flex-grow: 0; flex-basis: 200px; background: tomato; } .right { flex: auto; /*11auto*/ background: gold; } /*（3）第三種是利用絕對定位布局的方式，將父級元素設置相對定位。 左邊元素設置為absolute定位，并 且寬度設置為 200px。將右邊元素的margin-left的值設置為200px。*/ .outer { position: relative; height: 100px; } .left { position: absolute; width: 200px; height: 100px; background: tomato; } .right { margin-left: 200px; height: 100px; background: gold; } /*（4）第四種還是利用絕對定位的方式，將父級元素設置為相對定位。 左邊元素寬度設置為200px，右邊元 素設置為絕對定位，左邊定位為200px，其余方向定位為0。*/ .outer { position: relative; height: 100px; } .left { width: 200px;height: 100px; background: tomato; } .right { position: absolute; top: 0; right: 0; bottom: 0; left: 200px; background: gold; }

dom演示

回答：?
兩欄布局一般指的是頁面中一共兩欄，左邊固定，右邊自適應的布局，一共有四種實現的方式。 以左邊寬度固定為 200px 為例?
-（1）利用浮動，將左邊元素寬度設置為 200px，并且設置向左浮動。將右邊元素的 margin-left 設置 為 200px，寬度設置為 auto（默認為 auto，撐滿整個父元素）。?
-（2）第二種是利用 ?ex 布局，將左邊元素的放大和縮小比例設置為 0，基礎大小設置為 200px。將右 邊的元素的放大比例設置為 1，縮小比例設置為 1，基礎大小設置為 auto。?
-（3）第三種是利用絕對定位布局的方式，將父級元素設置相對定位。左邊元素設置為 absolute 定 位，并且寬度設置為 200px。將右邊元素的 margin-left 的值設置為 200px。?
-（4）第四種還是利用絕對定位的方式，將父級元素設置為相對定位。左邊元素寬度設置為 200px，右 邊元素設置為絕對定位，左邊定位為 200px，其余方向定位為 0。

問題五十八：css 三欄布局的實現？

/*三欄布局一般指的是頁面中一共有三欄，左右兩欄寬度固定，中間自適應的布局， 一共有五種實現方式。 這里以左邊寬度固定為100px，右邊寬度固定為200px為例。*/ /*（1）利用絕對定位的方式，左右兩欄設置為絕對定位，中間設置對應方向大小的margin的值。*/ .outer { position: relative; height: 100px; } .left { position: absolute; width: 100px; height: 100px; background: tomato; } .right { position: absolute;top: 0; right: 0; width: 200px; height: 100px; background: gold; } .center { margin-left: 100px; margin-right: 200px; height: 100px; background: lightgreen; } /*（2）利用flex布局的方式，左右兩欄的放大和縮小比例都設置為0， 基礎大小設置為固定的大小，中間一 欄設置為auto*/ .outer { display: flex; height: 100px; } .left { flex: 00100px; background: tomato; } .right { flex: 00200px; background: gold; } .center { flex: auto; background: lightgreen; } /*（3）利用浮動的方式，左右兩欄設置固定大小，并設置對應方向的浮動。 中間一欄設置左右兩個方向的 margin值，注意這種方式，中間一欄必須放到最后。*/ .outer { height: 100px; } .left { float: left; width: 100px; height: 100px; background: tomato; } .right { float: right; width: 200px; height: 100px; background: gold; } .center { height: 100px; margin-left: 100px; margin-right: 200px; background: lightgreen; } /*（4）雙飛翼布局，利用浮動和負邊距來實現。父級元素設置左右的pedding， 三列均設置向左浮動，中間 一列放在最前面，寬度設置為父級元素的寬度， 因此后面兩列都被擠到了下一行，通過設置margin負值將其 移動到上一行， 再利用相對定位，定位到兩邊。*/ .outer { height: 100px; padding-left: 100px; padding-right: 200px; } .left { position: relative; left: -100px; float: left; margin-left: -100%; width: 100px; height: 100px; background: tomato; } .right { position: relative; left: 200px; float: right; margin-left: -200px; width: 200px; height: 100px; background: gold; } .center { float: left; width: 100%; height: 100px; background: lightgreen; } /*（5）雙飛翼布局，雙飛翼布局相對于圣杯布局來說， 左右位置的保留是通過中間列的margin值來實現的， 而不是通過父元 素的pedding來實現的。本質上來說，也是通過浮動和外邊距負值來實現的。*/ .outer { height: 100px; } .left { float: left; margin-left: -100%; width: 100px; height: 100px; background: tomato; } .right { float: left; margin-left: -200px; width: 200px; height: 100px; background: gold; } .wrapper { float: left; width: 100%; height: 100px; background: lightgreen; } .center { margin-left: 100px; margin-right: 200px; height: 100px; }

?三欄布局dom演示

回答：

三欄布局一般指的是頁面中一共有三欄，左右兩欄寬度固定，中間自適應的布局，一共有五種實現方式。

這里以左邊寬度固定為100px，右邊寬度固定為200px為例。?
（1）利用絕對定位的方式，左右兩欄設置為絕對定位，中間設置對應方向大小的margin的值。?
（2）利用flex布局的方式，左右兩欄的放大和縮小比例都設置為0，基礎大小設置為固定的大小，中間一欄 設置為auto。?
（3）利用浮動的方式，左右兩欄設置固定大小，并設置對應方向的浮動。中間一欄設置左右兩個方向的 margin值，注意這種方式，中間一欄必須放到最后。?
（4）圣杯布局，利用浮動和負邊距來實現。父級元素設置左右的pedding，三列均設置向左浮動，中間一列 放在最前面，寬度設置為父級元素的寬度，因此后面兩列都被擠到了下一行，通過設置margin負值將其移動 到上一行，再利用相對定位，定位到兩邊。雙飛翼布局中間列的寬度不能小于兩邊任意列的寬度，而雙飛翼布 局則不存在這個問題。?
（5）雙飛翼布局，雙飛翼布局相對于圣杯布局來說，左右位置的保留是通過中間列的margin值來實現的，而 不是通過父元素的pedding來實現的。本質上來說，也是通過浮動和外邊距負值來實現的。?
?

?問題五十九：實現一個寬高自適應的正方形

/*1.第一種方式是利用vw來實現*/ .square { width: 10%; height: 10vw; background: tomato; } /*2.第二種方式是利用元素的margin/padding百分比是相對父元素width的性質來實現*/ .square { width: 20%; height: 0; padding-top: 20%; background: orange; } /*3.第三種方式是利用子元素的margin-top的值來實現的*/ .square { width: 30%; overflow: hidden; background: yellow; } .square::after { content: ""; display: block; margin-top: 100%; }

自適應正方形dom演示

問題六十：實現一個三角形

/*三角形的實現原理是利用了元素邊框連接處的等分原理。*/ .triangle { width: 0; height: 0; border-width: 100px; border-style: solid; border-color: pink transparent transparent transparent; }

?dom演示

問題六十一：一個自適應矩形，水平垂直居中，且寬高比為 2:1

/*實現原理參考自適應正方形和水平居中方式*/ .box { position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; width: 10%; height: 0; padding-top: 20%; background: tomato; }

?

總結

以上是生活随笔為你收集整理的HTML、CSS、JavaScript常见面试问题的总结（css篇）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。