前端工程師面試題彙總（個人解析，可能不必定對）（css部分）

一、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不一樣的？

 

*使用box-sizing:border-box||content-box(默認) ||inherit;來切換盒子模型，border-box在移動端開發中很實用。
*box-sizing 屬性容許您以特定的方式定義匹配某個區域的特定元素。
div{//兼容性寫法;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    width:50%;
    float:left;
}

二、css屬性繼承？（大體都能說出來幾個）

*不可繼承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

*全部元素可繼承：visibility和cursor。

*內聯元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

*終端塊狀元素可繼承：text-indent和text-align。

*列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image。

*表格元素可繼承：border-collapse。
 
*font屬性書寫格式(僅css1)
font : font-style font-variant font-weight font-size line-height font-family;

*font屬性默認值
font: normal normal normal medium normal "Times New Roman" ;

三、CSS優先級算法如何計算？

css優先級計算完整版

原則一： 繼承不如指定
原則二： #id > .class > 標籤選擇符
原則三：越具體越強大，計算的值越大，越強大。

CSS優先級權重計算法：

CSS優先級包含四個級別（標籤內選擇符，ID選擇符，Class選擇符，元素選擇符）以及各級別出現的次數!

根據這四個級別出現的次數計算獲得CSS的優先級。

CSS優先級的計算規則以下：
* 元素標籤中定義的樣式（Style屬性，內嵌樣式1000）,加1,0,0,0
* 每一個ID選擇符(如 #id，100),加0,1,0,0
* 每一個Class選擇符(如 .class，10)、每一個屬性選擇符(如 [attribute=])、每一個僞類(如 :hover)加0,0,1,0
* 每一個元素選擇符（如p，1）或僞元素選擇符(如 :firstchild)等，加0,0,0,1,屬性選擇符
而後，將這四個數字分別累加，就獲得每一個CSS定義的優先級的值，
而後從左到右逐位比較大小，數字大的CSS樣式的優先級就高。

注意：
一、!important聲明的樣式優先級最高，若是衝突再進行計算。
二、若是優先級相同，則選擇最後出現的樣式。
三、繼承獲得的樣式的優先級最低。

!important>內嵌樣式(style)>id選擇器>class=屬性選擇符=僞類選擇符>tag

四、display有哪些值？說明他們的做用。 position的值relative和absolute定位原點是？

display 的經常使用值的做用： 
1.none;用於隱藏元素，不佔位置。區別於visibility:hidden;不可見可是佔位置。
2.block; 象塊類型元素同樣顯示。用於顯示元素，或設置爲塊元素。與visibility:visible(默認值);元素是可見的。
3.inline;缺省值。象行內元素類型同樣顯示。
4.inline-block;象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。多用於相同div作切換選項卡的時候，子元素上設置爲inline -block;
5.list-item; 象塊類型元素同樣顯示，並添加樣式列表標記。
6.table;此元素會做爲塊級表格來顯示（相似 <table>），表格先後帶有換行符。
7.inline-table;此元素會做爲內聯表格來顯示（相似 <table>），表格先後沒有換行符。
8.inherit;規定應該從父元素繼承 display 屬性的值。

備註：visibility:visible||hidden||inherit||collapse;最後一個取值用於在表格元素中刪除一行或者一列，可是不會影響佈局。呈現爲 hidden ;

position 的值的定位區別：
1.absolute 生成絕對定位的元素，相對於 static (不定位，標準文檔流)定位之外的第一個祖先元素進行定位。 
備註：
一、若是父元素都不定位就會根據瀏覽器窗口來進行定位。
二、固然前一種不是咱們想要的，因此要在該定位元素的父元素上添加相對定位position:relative;，若是原本不須要定位。
2.fixed 生成絕對定位的元素，相對於瀏覽器窗口進行定位（老IE不支持）。
3.relative 生成相對定位的元素，相對於其在普通流中的位置進行定位（或者說他原來的位置，或者前一個元素的位置）。 
4.static 默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right z-index 聲明）。
5.inherit 規定從父元素繼承 position 屬性的值。

五、請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？

六、常見兼容性問題？能說出幾種狀況。

常見css瀏覽器兼容性問題

一、不一樣瀏覽器的標籤默認的外補丁和內補丁不一樣
問題症狀：隨便寫幾個標籤，不加樣式控制的狀況下，各自的margin 和padding差別較大。
碰到頻率:100%
解決方案：CSS裏    *{margin:0;padding:0;}
備註：這個是最多見的也是最易解決的一個瀏覽器兼容性問題，幾乎全部的CSS文件開頭都會用通配符*來設置各個標籤的內外補丁是0。

二、塊屬性標籤float後，又有橫行的margin狀況下，在IE6顯示margin比設置的大
問題症狀:常見症狀是IE6中後面的一塊被頂到下一行
碰到頻率：90%（稍微複雜點的頁面都會碰到，float佈局最多見的瀏覽器兼容問題）
解決方案：在float的標籤樣式控制中加入 display:inline;將其轉化爲行內屬性
備註：咱們最經常使用的就是div+CSS佈局了，而div就是一個典型的塊屬性標籤，橫向佈局的時候咱們一般都是用div float實現的，橫向的間距設置若是用margin實現，這就是一個必然會碰到的兼容性問題。

三、設置較小高度標籤（通常小於10px），在IE6，IE7，遨遊中高度超出本身設置高度
問題症狀：IE六、7和遨遊裏這個標籤的高度不受控制，超出本身設置的高度
碰到頻率：60%
解決方案：給超出高度的標籤設置overflow:hidden;或者設置行高line-height 小於你設置的高度。
備註：這種狀況通常出如今咱們設置小圓角背景的標籤裏。出現這個問題的緣由是IE8以前的瀏覽器都會給標籤一個最小默認的行高的高度。即便你的標籤是空的，這個標籤的高度仍是會達到默認的行高。

四、行內屬性標籤，設置display:block後採用float佈局，又有橫行的margin的狀況，IE6間距bug
問題症狀：IE6裏的間距比超過設置的間距
碰到概率：20%
解決方案：在display:block;後面加入display:inline;display:table;
備註：行內屬性標籤，爲了設置寬高，咱們須要設置display:block;(除了input標籤比較特殊)。在用float佈局並有橫向的margin後，在IE6下，他就具備了塊屬性float後的橫向margin的bug。不過由於它自己就是行內屬性標籤，因此咱們再加上display:inline的話，它的高寬就不可設了。這時候咱們還須要在display:inline後面加入display:talbe。

五、圖片默認有間距
問題症狀：幾個img標籤放在一塊兒的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起做用。
碰到概率：20%
解決方案：使用float屬性爲img佈局
備註：由於img標籤是行內屬性標籤，因此只要不超出容器寬度，img標籤都會排在一行裏，可是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正道。（個人一個學生使用負margin，雖然能解決，但負margin自己就是容易引發瀏覽器兼容問題的用法，因此我禁止他們使用）

六、標籤最低高度設置min-height不兼容
問題症狀：由於min-height自己就是一個不兼容的CSS屬性，因此設置min-height時不能很好的被各個瀏覽器兼容
碰到概率：5%
解決方案：若是咱們要設置一個標籤的最小高度200px，須要進行的設置爲：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
備註：在B/S系統前端開時，有不少狀況下咱們又這種需求。當內容小於一個值（如300px）時。容器的高度爲300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候咱們就會面臨這個兼容性問題。

七、透明度的兼容CSS設置
/* CSS hack*/ 我不多使用hacker的，多是我的習慣吧，我不喜歡寫的代碼IE不兼容，而後用hack來解決。不過hacker仍是很是好用的。使用hacker我能夠把瀏覽器分爲3類：IE6 ；IE7和遨遊；其餘（IE8 chrome ff safari opera等）
◆IE6認識的hacker 是下劃線_ 和星號 *
◆IE7 遨遊認識的hacker是星號 *
好比這樣一個CSS設置：
height:300px;*height:200px;_height:100px; IE6瀏覽器在讀到height:300px的時候會認爲高時300px；繼續往下讀，他也認識*heihgt， 因此當IE6讀到*height:200px的時候會覆蓋掉前一條的相沖突設置，認爲高度是200px。繼續往下讀，IE6還認識_height,因此他又會覆蓋掉200px高的設置，把高度設置爲100px；
IE7和遨遊也是同樣的從高度300px的設置往下讀。當它們讀到*height200px的時候就停下了，由於它們不認識_height。因此它們會把高度解析爲200px，剩下的瀏覽器只認識第一個height:300px;因此他們會把高度解析爲300px。由於優先級相同且想衝突的屬性設置後一個會覆蓋掉前一個，因此書寫的次序是很重要的。

七、li與li之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？

緣由是因爲，這中間是有一個空格元素的，應該不少的地方都存在這個空格。

解決方法：在ul標籤中設置font-size=0,在li中設置標籤文字的大小；由於空格也屬於字符，把字符大小設爲0，就沒有空格了。（空格繼承了字體大小，因此li元素須要設置字體大小）nice。

八、經常使用hack的技巧？

九、對BFC規範(塊級格式化上下文：block formatting context)的理解？

 

主要內容

Box: CSS佈局的基本單位

Box 是 CSS 佈局的對象和基本單位， 直觀點來講，就是一個頁面是由不少個 Box 組成的。元素的類型和 display 屬性，決定了這個 Box 的類型。 不一樣類型的 Box， 會參與不一樣的 Formatting Context（一個決定如何渲染文檔的容器），所以Box內的元素會以不一樣的方式渲染。讓咱們看看有哪些盒子：

block-level box:display 屬性爲 block, list-item, table 的元素，會生成 block-level box。而且參與 block fomatting context；
inline-level box:display 屬性爲 inline, inline-block, inline-table 的元素，會生成 inline-level box。而且參與 inline formatting context；
run-in box: css3 中才有， 這兒先不講了。

Formatting context

Formatting context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。最多見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。

CSS2.1 中只有 BFC 和 IFC, CSS3 中還增長了 GFC 和 FFC。

BFC 定義

BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。

BFC佈局規則：

內部的Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
BFC的區域不會與float box重疊。
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算

哪些元素會生成BFC

根元素
float屬性不爲none
position爲absolute或fixed
display爲inline-block, table-cell, table-caption, flex, inline-flex
overflow不爲visible

十、浮動與清除浮動？比較好的處理方式？

十一、CSS優化、提升性能的方法有哪些？

十二、瀏覽器是怎樣解析CSS選擇器的？

一、首先，對瀏覽器來講，ID 選擇器 #xx 是最快的，其次是 class 選擇器、html 元素選擇器等。
二、CSS 的後代選擇器自己就是一種在標準裏面不那麼推薦的方式。
三、從右向左的規則要比從左向右的高效，瀏覽器採用從右往左的方式進行匹配。right -to-left 這樣作是爲了使規則可以快、準、狠地與render樹上的節點匹配，通俗地將就是 就近原則。

1三、元素豎向的百分比設定是相對於容器的高度嗎？我是不會這麼傻逼的用這種屬性還用百分比來表示。

這是一個很讓人困惑的CSS特徵，我以前也談到過它。咱們你們都知道，當按百分比設定一個元素的寬度時，它是相對於父容器的寬度計算的，
可是，對於一些表示豎向距離的屬性，例如padding-top,padding-bottom,margin-top,margin-bottom等，當按百分比設定它們時，依據的也是父容器的寬度，而不是高度。

1四、::before 和 :after中雙冒號和單冒號。

:after;用於表示僞類，選擇器用。
::after;用於表示僞元素，在元素先後插入內容。
例如：
.parent:after{}/*表示選中元素選擇器以後的同級元素*/
.parent::after{content:"";display:block;height:0;visibility:hidden;clear:both;font-size:0;}    .parent{zoom:1;}   用於清除浮動。

僞元素由雙冒號和僞元素名稱組成。雙冒號是在當前規範中引入的，用於區分僞類和僞元素。可是僞類兼容現存樣式，瀏覽器須要同時支持舊的僞類，好比:first-line、:first-letter、:before、:after等。

首先，閱讀 w3c 對二者的定義：

CSS 僞類用於向某些選擇器添加特殊的效果。
CSS 僞元素用於將特殊的效果添加到某些選擇器。

能夠明確兩點，第一二者都與選擇器相關，第二就是添加一些「特殊」的效果。這裏特殊指的是二者描述了其餘 css 沒法描述的東西。

常見的僞類：（借用別人的圖片）

僞元素種類：

僞類偏向於元素的動做行爲，僞元素偏向於元素的屬性。實際上 css3 爲了區分二者，已經明確規定了僞類用一個冒號來表示，而僞元素則用兩個冒號來表示。

對於CSS2以前已有的僞元素，好比:before，單冒號和雙冒號的寫法::before做用是同樣的。 

若是你的網站只須要兼容webkit、firefox、opera等瀏覽器，建議對於僞元素採用雙冒號的寫法，若是不得不兼容IE瀏覽器，

仍是用CSS2的單冒號寫法比較安全（單冒號表示）。若是本身不肯定的話能夠針對某些須要兼容的屬性有兩種屬性。

1五、有一個高度自適應的div，裏面有兩個div，一個高度100px，但願另外一個填滿剩下的高度。

使用position定位來適應高度，設置position:absolute;注意父元素要設置position:relative;

<style type="text/css"> 
    .wrap{
        background-color: green; position: relative;
        width: 98%;
    }
    @media screen and (max-width:1000px){
        .wrap{
            height: 300px;
        }
    }
    @media screen and (min-width:1000px){
        .wrap{
            height: 500px;
        }
    }
    @media screen and (min-width:1100px){
        .wrap{
            height: 600px;
        }
    }
    @media screen and (min-width:1200px){
        .wrap{
            height: 700px;
        }
    }
    .top{
        background-color: red;
        width: 80%;
        height: 200px;
    }
    .bottom{ width: 90%; position: absolute; top: 220px; bottom: 0; background-color: blue;
    }
</style> 

<div class="wrap">
    <div class="top">上</div>
    <div class="bottom">下</div>
</div>

 1六、cookie隔離技術。

cookie：一個域名之下，每次請求資源都要帶上cookie發到後臺。

cookie隔離技術和傳統的多域名拆分請求，提升瀏覽器併發請求數有點相似，均是採用多域名來處理請求。

傳統作法是將css，js，圖片等靜態文件放在多個域名下面請求，這樣就能夠跨過瀏覽器對統一主機名併發鏈接數的限制，提升總體併發請求量。
 
cookie隔離技術則是經過使用多個非主要域名來請求靜態文件，若是靜態文件都放在主域名下，那靜態文件請求的時候帶有的cookie的數據提交給server是很是浪費的，還不如隔離開。
 
由於cookie有域的限制，所以不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie數據，這樣能夠下降請求頭的大小，下降請求時間，從而達到下降總體請求延時的目的。同時這種方式不會將cookie傳入webserver，也減小了webserver對cookie的處理分析環節，提升了webserver的http請求的解析速度。
kevintang給出的測試結果是：
在作騰訊網加速的時候，啓用了兩個非qq.com的新域名，mat1.gtimg.com和img1.gtimg.com，隔離前10個cookie，185字節，約4KB，存在請求延時現象，隔離後無cookie，圖片服務器速度由原來0.63秒提高到0.43秒，速度提高32%。