目前盒子模型分為IE盒子模型和W3C標準盒子模型。他們包括margin、border、padding和content，但他們的區別主要體現在width和height上面。IE瀏覽器認為盒子寬度指的是兩側border寬度加上兩側padding的寬度以及內容寬度，而W3C認為盒子寬度僅代表內容寬度。因為存在這樣的卻別，W3C在css3中引入了box-sizing屬性，其中content-box表示使用W3C盒子模型渲染，border-box使用IE盒子模型。

學習連結：https://blog.csdn.net/sinat_36521655/article/details/80045791

2.請羅列出你所知道的 display 屬性的全部值

none：隱藏元素

block：變成塊級元素

inline：變成內聯元素

inline-block：變成內聯塊級元素

inherit：從父元素繼承display屬性的值

list-item 此元素會作為列表顯示。

run-in此元素會根據上下文作為塊級元素或內聯元素顯示。

table 此元素會作為塊級表格來顯示（類似table），表格前後帶有換行符。

inline-table 此元素會作為內聯表格來顯示（類似table），表格前後沒有換行符。

table-row-group 此元素會作為一個或多個行的分組來顯示（類似tbody）

table-header-group 此元素會作為一個或多個行的分組來顯示（類似thead）

table-footer-group：此元素會作為一個或多個行的分組來顯示（類似tfoot）

table-row 此元素會作為一個表格行顯示（類似 tr ）。

table-column-group 此元素會作為一個或多個列的分組來顯示（類似 colgroup ）。

table-column 此元素會作為一個單元格列顯示（類似 col ）

table-cell 此元素會作為一個表格單元格顯示（類似 td 和 th）

table-caption 此元素會作為一個表格標題顯示（類似 caption）

CSS3新增屬性flex(塊級元素)和inline-flex(內聯元素)，設為flex佈局以後，子元素的float、clear和vertical-align屬性將失效。

具體情況參考http://www.runoob.com/css3/css3-flexbox.html

3.請解釋inline 和inline-block 的區別

block元素通常被現實為獨立的一塊，會單獨換一行；inline元素則前後不會產生換行，一系列inline元素都在一行內顯示，直到該行排滿。

3.1 display:block

block元素會獨佔一行，多個block元素會各自新起一行。預設情況下，block元素寬度自動填滿其父元素寬度。

block元素可以設定width,height屬性。塊級元素即使設定了寬度,仍然是獨佔一行。

block元素可以設定margin和padding屬性。

3.2 display:inline

inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裡，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。

inline元素設定width,height屬性無效。

inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

3.3 display:inline-block

簡單來說就是將物件呈現為inline物件，但是物件的內容作為block物件呈現。之後的內聯物件會被排列在同一行內。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。也就是兼具block擁有width和height的特性，同時又能排列在一行中，常用用於<li><a>標籤

4.請解釋relative、fixed、absolute 和 static 元素的區別

4.1 absolute:絕對定位（脫離文件流）

相對第一個非static定位的父元素進行定位

4.2 fixed：固定定位（脫離文件流，老IE6不支援）

相對瀏覽器視窗進行定位

4.3 relative：相對定位（不脫離文件流）

相對其正常（預設佈局）位置進行定位，原位置留白

4.4 static

預設值，沒有定位，元素出現在正常的流中(忽略top、bottom、left、right、z-index宣告)

4.5 補充：

1、absolute定位會脫離文件流，浮動起來，多個層疊加可以使用z-index屬性改變層疊順序，值越大，所處層越高，可以為負值，但是不推薦使用負值。

2、absolute定位(設定了top等值)忽略padding，相對位置為相對容器的左上角內邊框(padding和border交界的地方)，定位元素的margin開始算。

3、若absolute定位未設定top、left、right、bottom等的值，則會收到父元素的padding和自身margin的擠壓。

5.請問你有嘗試過 CSS Flexbox 或者 Grid 標準規格嗎

flex很重要，每個屬性都要知道。建議去讀阮一峰的flex文章

grid是flex佈局的升級版，目前兩個的普及性都不高，但是flex更好，主流的現代瀏覽器基本上都支援。

grid可以參考https://www.jianshu.com/p/d183265a8dad

flex可以參考http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

注意點：

1、不考慮max/min-width/height的情況下，若所有專案的flex-grow/shrink之和大於等於1，則所有專案的尺寸一定會調整到適應父元素（flex容器）的尺寸

2、如果flex-grow/shrink之和小於1，則只會按照相對“1”的比例

3、grow時的每個元素的權重即為元素的flew-grow的值；shrink時每個元素的權重則為元素flex-shrink值乘以width後的值

4、優先順序：flex-basis > width > content中的width，優先順序高的若有值，則忽略優先順序低的值

6.為什麼響應式設計 (responsive design) 和自適應設計 (adaptive design) 不同？

6.1 響應式設計

一套程式碼，在適應不同螢幕的瀏覽器，目前最火的就是bootstrap。主要利用CSS3的媒介查詢（Media Query）和Viewport來解決問題。通過媒介查詢的設定，根據螢幕寬度、螢幕方向等各個屬性來載入不同場景下不同的CSS檔案來渲染頁面的視覺風格。<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

優點：面對不同解析度裝置靈活性強；能夠快捷解決多裝置顯示適應問題

缺點：相容各種裝置工作量大，效率低下；程式碼累贅會出現隱藏無用的元素，載入時間加長；一定程度上改變了網站原有的佈局結構，會出現使用者混淆的結果

6.2 自適應設計

指能使網頁自適應顯示在不同大小終端裝置上新網頁設計及技術。同樣要設定<meta>標籤。

1、不使用絕對寬度，由於網頁會根據螢幕寬度調整佈局，不能使用width: xxx px具體的畫素值，使用百分比width:xxx %或者width:auto

2、相對大小的字型，字型也不能使用絕對大小（px），而只能使用相對大小（em）或者rem

3、流動佈局：各個區塊的位置都是浮動的，不是固定不變的。

Float的好處是，如果寬度太小放不下兩個元素，後面的元素會自動滾到前面元素的下方，不會再水平方向溢位，避免了水平滾動條的出現。注：絕對定位（position: absolute）的使用，也要非常小心。

4、圖片的自適應img { max-width: 100%; height: auto }

5、自適應網頁設計的核心，就是CSS3引入的Media Query模組，與響應式佈局設計的使用一樣。

6.3 區別：

理論上說，響應式佈局在任何情況下都比自適應佈局好一些，但在某些情況下自適應佈局更切實際。

自適應佈局可以讓你的設計更加可控，因為你只需要考慮了了幾種狀態就萬事大吉了。但在響應式佈局中你可能需要面對非常多狀態——是的，大部分狀態之間的區別很小，但它們又的確是不同的——這樣一來就很難確切搞清你的設計會是什麼樣。同時這也帶來了測試上的難題，你很難有絕對的把握預測到它會怎樣。換個角度說，這也是響應式佈局的魅力所在。通過允許表面上的不確定因素存在，你可以獲得更高層次上的確定。雖然你無法在精確到畫素級別準確預知你的設計如何在943px×684px視覺區域匯中展示，但你能確定的是它們一定能展示的很好——不管是表層特徵還是佈局結構都有條不紊。

自適應佈局有它自己的優勢，因為它們實施起來代價更低，測試更容易，這往往讓他們成為更切實際的解決方案。自適應佈局可以看做響應式佈局的“窮兄弟”，在資源有限的情況下就可以讓它出馬。特別是改進現有網站的時候尤其奏效，因為全部重寫程式碼在這時並不可行。這種案例中，採用自適應佈局是一個不錯的出發點。

7.你有相容 retina 螢幕的經歷嗎？如果有，在什麼地方使用了何種技術？

7.1 retina是什麼

就是蘋果推出的新型螢幕，由4個原畫素點去描述一個新畫素點（即壓縮了2倍），且存在0.5個畫素點這樣的描述，所以需要相容。參考http://www.ui.cn/detail/24556.html

說完了重要性，適配Retina的原理又是什麼呢？我們知道，當一個影象在標準裝置下全屏顯示時，一點陣圖畫素對應的就是一裝置畫素，導致一個完全保真的顯示，因為一個位置畫素不能進一步分裂。而當在Retina螢幕下時，他要放大四倍來保持相同的物理畫素的大小，這樣就會丟失很多細節，造成失真的情形。換句話說，每一點陣圖畫素被乘以四填補相同的物理表面在視網膜螢幕下顯示。

對此，解決方法相信大家也都聽過，就是通過製作兩種不同的圖形，一張是普通螢幕的圖片，另外一種是Retina螢幕的圖形，而且Retina螢幕下的圖片是普通螢幕的兩倍畫素。

7.2 直接載入2倍大小的圖片

假如要顯示的圖片大小為200px*300px，你準備的實際圖片大小應該為400px*600px，並且使用以下程式碼控制即可：

這種方法就解決了Retina顯示不清楚的問題，但是在普通螢幕下，這種圖片要經過瀏覽器的壓縮，在IE6和IE7上有十分差得顯示效果，同時，兩倍大小的圖片勢必會導致頁面載入時間加長，使用者體驗下降，此時，我們可以通過Retina.js（http://retinajs.com/）檔案解決：

<img class="pic" src="pic.png" height="200px" width="300px"/>

<script type="text/javascript">
$(document).ready(function () {
    if (window.devicePixelRatio > 1) {
        var images = $("img.pic");
        images.each(function(i) {
            var x1 = $(this).attr('src');
            var x2 = x1.replace(/(.*)(.w+)/, "[email protected]$2");
            $(this).attr('src', x2);
        });
    }
});
</script>

7.3 Image-set控制

假如要顯示的圖片大小為200px*300px，你準備的圖片應有兩張：一張大小為200px*300px，命名為pic.png；另一張大小為400px*600px，命名為[email protected]（@2x是Retina圖示的標準命名方式），然後使用以下css程式碼控制：

#logo {
    background: url(pic.png) 0 0 no-repeat;
    background-image: -webkit-image-set(url(pic.png) 1x, url([email protected]) 2x);
    background-image: -moz-image-set(url(pic.png) 1x,url(images/[email protected]) 2x);
    background-image: -ms-image-set(url(pic.png) 1x,url(images/[email protected]) 2x);
    background-image: -o-image-set(url(url(pic.png) 1x,url(images/[email protected]) 2x);
}

或者使用HTML程式碼控制亦可：

3、使用@media控制

實際是判斷螢幕的畫素比來取捨是否顯示高解析度影象，程式碼如下：

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),

only screen and (min--moz-device-pixel-ratio: 1.5), /* 注意這裡的寫法比較特殊 */

only screen and (-o-min-device-pixel-ratio: 3/2),

only screen and (min-device-pixel-ratio: 1.5) {

#logo {

background-image: url([email protected]);

background-size: 100px auto;

}

8.請問為何要使用 translate() 而非 absolute position，或反之的理由？為什麼？

通過absolute定位屬性實現的移動，通過translate也可以實現，兩者結合使用可以實現元素的居中。

文件流上的差異：

absolute會脫離文件流，而translate不會脫離文件流

基點上的差異：

absolute是基於第一個非static父元素的左上角border與padding交界處，而translate是子元素整體平移，沒有所謂的基點而言，當然通過transform-origin改變旋轉的基準點？

檢視屬性上的差異：

可以看出使用 translate 的例子的 offsetTop 和 offsetLeft 的數值與沒有產生位移的元素沒有然後區別，無論位移多少這兩個數值都是固定不變的。

而使用相對定位的例子 offsetTop 和 offsetLeft 的數值則根據位移的長度發生了改變。

動畫表現上的差異：

使用絕對定位的動畫效果會受制於利用畫素(px)為單位進行位移，而使用 translate 函式的動畫則可以不受畫素的影響，以更小的單位進行位移。

另外，絕對定位的動畫效果完全使用 CPU 進行計算，而使用 translate 函式的動畫則是利用 GPU，因此在視覺上使用 translate 函式的動畫可以有比絕對定位動畫有更高的幀數。

9.如果實現一個高效能的CSS動畫效果？

目前css3的animation配合@keyframes可以實現動畫，transition可以實現漸變動畫，transform也可以實現動畫效果，他們都是基於GPU的。但是將點陣圖傳至GPU記憶體中的效率是比較慢的，所以關鍵是減少點陣圖轉移操作、減少重拍和重繪的計算，都使用css3屬性更好。

例如：div { height: 100px; transition: height 1s linear; } div:hover { height: 200px; }

因為每一幀的變化瀏覽器都在進行佈局、繪製、把新的點陣圖交給 GPU 記憶體(這恰好是我們上面提到的GPU的短板)

雖然只改變元素高度但是很可能要同步改變他的子元素的大小，那瀏覽器就要重新計算佈局，計算完後主執行緒再來重新生成該元素的點陣圖。

例如：div { transform: scale(0.5); transition: transform 1s linear; } div:hover { transform: scale(1.0); }

transform 屬性不會改變自己和他周圍元素的佈局，他會對元素的整體產生影響。

因此，瀏覽器只需要一次生成這個元素的點陣圖，然後動畫開始時候交給 GPU 來處理他最擅長的位移、旋轉、縮放等操作。這就解放了瀏覽器不再去做各種的佈局、繪製等操作。

參考https://www.cnblogs.com/langzi1989/p/5965818.html

http://www.fly63.com/article/detial/106

10.IFC（行級格式化上下文）

在IFC中，盒子水平放置，一個接著一個，從包含塊的頂部開始。在盒子間margins,borders,和padding的水平方向的值是有效。這些盒子也許通過不同的方式進行對齊:他們的底部和頂部也許被對齊，或者通過文字的基線進行對齊。矩形區域包含著來自一行的盒子叫做line box。

line box的寬度由浮動情況和它的包含塊決定。line box的高度由line-height的計算結果決定。

一個line box總是足夠高對於包含在它內的所有盒子。然後，它也許比包含在它內最高的盒子高。(比如，盒子對齊導致基線提高了)。當盒子B的高度比包含它的line box的高度低，在line box內的B的垂值對齊線通過'vertical align'屬性決定。當幾個行內級盒子在一個單獨的line box內不能很好的水平放置，則他們被分配成了2個或者更多的垂直重疊的line boxs.因此,一個段落是很多個line boxs的垂直疊加。Line boxs被疊加沒有垂直方向上的分離(特殊情況除外)，並且他們也不重疊。

通常，line box的左邊緣挨著它的包含塊的左邊緣，右邊緣挨著它的包含塊的右邊緣。然而，浮動盒子也許會在包含塊邊緣和line box邊緣之間。因此，儘管line boxs在同樣的行內格式上下文中通常都有相同的寬度(就是他的包含塊的寬度)，但是水平方向上的空間因為浮動被減少了，它的寬度也會變得複雜。Line boxs在同樣的行內格式上下文中通常在高度上是多樣的(比如，一行也許包含了一個最高的圖片然後其他的也可以僅僅只包含文字)

當在一行中行內級盒子的總寬度比包含他們的line box的寬度小，他們的在line box中的水平放置位置由'text align'屬性決定。如果屬性是'justify'，使用者代理可能會拉伸空間和文字在inline boxs內。

當一個行內盒子超過了line box的寬度，則它被分割成幾個盒子並且這些盒子被分配成幾個橫穿過的line boxs。如果一個行內盒子不能被分割。則行內盒子溢位line box。

當一個行內盒子被分割，分割發生則margins,borders,和padding便沒有了視覺效果。

在同樣的line box內的行內盒子也許會被分割成幾個盒子因為雙向的文字。

Line boxs在行內格式上下文中檔需要包含行內級內容時被創造。Line boxs包含沒有文字，沒有空格，沒有帶著margins,padding和borders，以及沒有其他在流中的內容(比如圖片，行內盒子和行內表格)，也不會以新起一行結尾。對於在他們內的任何盒子的位置都以他們決定並且必須將他們視作沒有高度的line boxs。

主要影響IFC內佈局的css：font-size、line-height、height、vertical-aligin

前端面試知識點大全——CSS篇（三）

1.請解釋你對盒模型的理解，以及如何在 CSS 中告訴瀏覽器使用不同的盒模型來渲染你的佈局