1標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？
CSS盒子模型：由四個(gè)屬性組成的外邊距(margin)、內(nèi)邊距(padding)、邊界(border)、內(nèi)容區(qū)(width和height);
標(biāo)準(zhǔn)的css盒子模型寬高就是內(nèi)容區(qū)寬高；
低端IE css盒子模型寬高 內(nèi)邊距﹢邊界﹢內(nèi)容區(qū)；
2.CSS選擇符有哪些？哪些屬性可以繼承？
CSS中的選擇器分為：通配選擇器(*)，標(biāo)簽選擇器，類選擇器，ID選擇器，簡單屬性選擇，具體屬性選擇(e.g.a[href][title] {color:red;})，根據(jù)部分屬性值選擇，特定屬性選擇，從結(jié)構(gòu)上來分還有后代選擇器(關(guān)后代選擇器有一個(gè)易被忽視的方面，即兩個(gè)元素之間的層次間隔可以是無限的。)，子元素選擇器(h1 > span{……})，相鄰兄弟選擇器(h1 + p {……})以及偽類。
可繼承的屬性有 font-size font-family color
不可繼承的屬性有 border padding margin background-color width height等
3.CSS優(yōu)先級算法如何計(jì)算？
在多個(gè)選擇符應(yīng)用于同一個(gè)元素上那么Specificity值高的最終獲得優(yōu)先級。
選擇符Specificity值列表：規(guī)則：
1）行內(nèi)樣式優(yōu)先級Specificity值為1,0,0,0，高于外部定義。外部定義指經(jīng)由<link>或<style>標(biāo)簽定義的規(guī)則；
2）!important聲明的Specificity值最高；
3）Specificity值一樣的情況下，按CSS代碼中出現(xiàn)的順序決定，后者CSS樣式居上；
4）由繼續(xù)而得到的樣式?jīng)]有specificity的計(jì)算，它低于一切其他規(guī)則(比如全局選擇符*定義的規(guī)則)。
算法：當(dāng)遇到多個(gè)選擇符同時(shí)出現(xiàn)時(shí)候按選擇符得到的Specificity值逐位相加，{數(shù)位之間沒有進(jìn)制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}就得到最終計(jì)算得的specificity，然后在比較取舍時(shí)按照從左到右的順序逐位比較。
4.CSS3新增偽類有那些？
p:last-of-type 選擇其父元素的最后的一個(gè)P元素
p:last-child 選擇其父元素的最后子元素(一定是P才行)
p:first-of-type 選擇其父元素的首個(gè)P元素
p:first-child 其父元素的首個(gè)p元素(一定是p才行)
p:only-child 其父元素的只有一個(gè)元素(而且這個(gè)元素只能是p元素，不能有其他元素)
p:only-of-type 選擇其父元素的只有一個(gè)p元素(不能有第二個(gè)P元素，其他元素可以有)
選第N個(gè)
p:nth-child(n) 選擇其父元素的第N個(gè) 剛好是p的元素
p:nth-last-child(n) 從最后一個(gè)子元素開始計(jì)數(shù)
p:nth-of-type(n) 選擇其父元素的n個(gè)元素
p:nth-last-of-type(n) .從最后一個(gè)子元素開始計(jì)數(shù)
注意：
last-of-type是指匹配的對象是其所在的父素的最后一個(gè)相同類型元素
last-child: 是指匹配的對象是其所在的父元素的最后一個(gè)元素
5.如何居中div？如何居中一個(gè)浮動(dòng)元素？如何讓絕對定位的div居中？
水平左右居中
text-align:center 和 margin:0 auto(上下為0，左右為自動(dòng))；
.father{text-alingn:center;}
.son{margin: 0 auto}
注意：他們起作用的首要條件是子元素必須沒有被float，以及position：absolute影響(relative不影響)
text-align+inline-block
特點(diǎn)：適應(yīng)性好，IE6、IE7不兼容inline-block。text-align:center會(huì)導(dǎo)致子元素的內(nèi)容也居中。
<style>
.parent{
text-align: center;
}
.child{
display: inline-block;/*寬度跟內(nèi)容變化*/
}
</style>
table+margin
特點(diǎn)：只需要對子元素設(shè)置，IE6、IE7不支持table，
<style type="text/css">
.child{
display: table;/*寬度跟內(nèi)容變化*/
margin: 0 auto;
}
</style>
使用position居中
.father{position:relative；}
.son{position:absolute;
left:50%;
top:50%;
margin-left:-[son.width/2]px;
margin-top:-[son.height/2]px;}
absolute_transform
特點(diǎn)：子元素不會(huì)影響其他元素，transform是CSS3內(nèi)容，不兼容IE6、IE7、IE8。
<style type="text/css">
.parent{
position: relative;
}
.child{
position: absolute;
left: 50%;
transform: translateX(-50%);/*向左移自身寬度一半*/
}
</style>
flex+justify-content
<style type="text/css">
.parent{
display: flex;
justify-content: center;/*設(shè)置了這個(gè)就不用設(shè)置子元素margin: 0 auto*/
}
.child{ margin: 0 auto;/*如果不用justify-content: center，可以用這個(gè)*/ }
</style>
垂直居中
table-cell+vertical-align
要兼容IE7及以下，要更換為table結(jié)構(gòu)
.parent{
display: table-cell;
vertical-align: middle;
}
absolute+transform
transform兼容性問題
.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
flex+align-items
flex、align-items兼容性問題
.parent{
display: flex;
align-items: center;
}
單行內(nèi)容居中：只考慮單行是最簡單的，無論是否給容器固定高度，只要給容器設(shè)置 line-height 和 height，并使兩值相等，再加上 over-flow: hidden；
.son{
height: 4em;
line-height: 4em;
overflow: hidden;}
同時(shí)支持塊級和內(nèi)聯(lián)極元素，只能顯示一行。
多行居中，容器高度可變
給出一致的 padding-bottom 和 padding-top .
.son{
padding-top: 24px;
padding-bottom: 24px;}
把容器當(dāng)做表格
.son{
display: table-cell;
height: 300px;
vertical-align: middle;}
6.display有哪些值？說明他們的作用。
其中常用的的有none、inline、block、inline-block。分別的意思是：
1)none： 元素不會(huì)顯示，而且改元素現(xiàn)實(shí)的空間也不會(huì)保留。但有另外一個(gè) visibility: hidden， 是保留元素的空間的。
2)inline： display的默認(rèn)屬性。將元素顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。我們知道內(nèi)聯(lián)元素是無法設(shè)置寬高的，所以一旦將元素的display 屬性設(shè)為 inline， 設(shè)置屬性height和width是沒有用的。此時(shí)影響它的高度一般是內(nèi)部元素的高度（font-size）和padding。
3)block： 將元素將顯示為塊級元素，元素前后會(huì)帶有換行符。設(shè)置為block后，元素可以設(shè)置width和height了。元素獨(dú)占一行。
4)inline-block：行內(nèi)塊元素。這個(gè)屬性值融合了inline 和 block 的特性，即是它既是內(nèi)聯(lián)元素，又可以設(shè)置width和height。
7.position的值relative和absolute定位原點(diǎn)是？
relative（相對定位）的定位原點(diǎn)是以自己本省原來所在位置做為原點(diǎn)的。
absolute（絕對定位）的定位原點(diǎn)是離自己這一級元素最近的一級position設(shè)置為 absolute或者relative的父元素的左上角為原點(diǎn)的，（當(dāng)然，如果自己的所有父元素都沒 有設(shè)置position，那么就以body為定位原點(diǎn)）
8.CSS3有哪些新特性？
1)CSS3的選擇器
1）E:last-child 匹配父元素的最后一個(gè)子元素E。
2）E:nth-child(n)匹配父元素的第n個(gè)子元素E。
3）E:nth-last-child(n) CSS3 匹配父元素的倒數(shù)第n個(gè)子元素E。
2.)@Font-face 特性
Font-face 可以用來加載字體樣式，而且它還能夠加載服務(wù)器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。以下是字體的引入和引用。
@font-face {
font-family: BorderWeb;
src:url(BORDERW0.eot); }
@font-face {
font-family: Runic;
src:url(RUNICMT0.eot); }
.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }
.event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }
@font-face {
font-family: BorderWeb;
src:url(BORDERW0.eot); }
@font-face {
font-family: Runic;
src:url(RUNICMT0.eot); }
.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }
.event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }
3)圓角border-radius: 15px;
4)陰影（Shadow）
.class1{
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); }
9.請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？
彈性布局（flexible box）模塊（目前是w3c候選的推薦）旨在提供一個(gè)更加有效的方式 來布置，對齊和分布在容器之間的各項(xiàng)內(nèi)容，即使它們的大小是未知或者動(dòng)態(tài)變化的。 彈性布局的主要思想是讓容器有能力來改變項(xiàng)目的寬度和高度，以填滿可用空間（主要是為了容納所有類型的顯示設(shè)備和屏幕尺寸）的能力。
Flexbox布局是最合適的一個(gè)應(yīng)用程序的組件，以及小規(guī)模的布局
10.用純CSS創(chuàng)建一個(gè)三角形的原理是什么？
利用border實(shí)現(xiàn)
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
11.常見兼容性問題
1）不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同
問題癥狀：隨便寫幾個(gè)標(biāo)簽，不加樣式控制的情況下，各自的margin 和padding差異較大。
碰到頻率:100%
解決方案：CSS里 {margin:0;padding:0;}
備注：這個(gè)是最常見的也是最易解決的一個(gè)瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會(huì)用通配符來設(shè)置各個(gè)標(biāo)簽的內(nèi)外補(bǔ)丁是。
2）塊屬性標(biāo)簽float后，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大
問題癥狀:常見癥狀是IE6中后面的一塊被頂?shù)较乱恍?br>
碰到頻率：90%（稍微復(fù)雜點(diǎn)的頁面都會(huì)碰到，float布局最常見的瀏覽器兼容問題）
解決方案：在float的標(biāo)簽樣式控制中加入 display:inline;將其轉(zhuǎn)化為行內(nèi)屬性
備注：我們最常用的就是div+CSS布局了，而div就是一個(gè)典型的塊屬性標(biāo)簽，橫向布局的時(shí)候我們通常都是用div float實(shí)現(xiàn)的，橫向的間距設(shè)置如果用margin實(shí)現(xiàn)，這就是一個(gè)必然會(huì)碰到的兼容性問題。
3）設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設(shè)置高度
問題癥狀：IE6、7和遨游里這個(gè)標(biāo)簽的高度不受控制，超出自己設(shè)置的高度
碰到頻率：60%
解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度。
備注：這種情況一般出現(xiàn)在我們設(shè)置小圓角背景的標(biāo)簽里。出現(xiàn)這個(gè)問題的原因是IE8之前的瀏覽器都會(huì)給標(biāo)簽一個(gè)最小默認(rèn)的行高的高度。即使你的標(biāo)簽是空的，這個(gè)標(biāo)簽的高度還是會(huì)達(dá)到默認(rèn)的行高
13.li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
瀏覽器的默認(rèn)行為是把inline元素間的空白字符（空格換行tab）渲染成一個(gè)空格，也就是"li"換行后會(huì)產(chǎn)生換行字符，而它會(huì)變成一個(gè)空格，當(dāng)然空格就占用一個(gè)字符的寬度。
解決方法：
1）可以將"li"代碼全部寫在一排
2）需要將"li"內(nèi)的字符間隔設(shè)為默認(rèn)。
.wrap ul{letter-spacing: -5px;}
之后記得設(shè)置li內(nèi)字符間隔
.wrap ul li{letter-spacing: normal;}
14.為什么要初始化CSS樣式。
因?yàn)闉g覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面顯示差異。
初始化CSS樣式主要是提高編碼質(zhì)量，如果不初始化整個(gè)頁面做完很糟糕，重復(fù)的CSS樣式很多。去掉標(biāo)簽的默認(rèn)樣式如：margin,padding，其他瀏覽器默認(rèn)解析字體大小，字體設(shè)置
15.absolute的containing block計(jì)算方式跟正常流有什么不同？
block-level boxes一個(gè) block-level element ('display' 屬性值為 'block', 'list-item' 或是 ‘table’) 會(huì)生成一個(gè) block-level box，這樣的盒子會(huì)參與到 block-formatting context (一種布局的方式) 中。block formatting context在這種布局方式下，盒子們自所在的 containing block 頂部起一個(gè)接一個(gè)垂直排列，水平方向上撐滿整個(gè)寬度 (除非內(nèi)部的盒子自己內(nèi)部建立了新的 BFC)。containing block一般來說，盒子本身就為其子孫建立了 containing block，用來計(jì)算內(nèi)部盒子的位置、大小，
而對內(nèi)部的盒子，具體采用哪個(gè) containing block 來計(jì)算，需要分情況來討論：根元素所在的 containing block 被稱為 initial containing block，在我們常用的瀏覽器環(huán)境下，指的是原點(diǎn)與 canvas 重合，大小和 viewport 相同的矩形；對于 position 為 static 或 relative 的元素，其 containing block 為祖先元素中最近的 block container box 的 content box (除 margin, border, padding 外的區(qū)域)；
對于 position:fixed 的元素，其 containing block 由 viewport 建立；對于 position:absolute 的元素，則是先找到其祖先元素中最近的 position 屬性非 static 的元素，然后判斷：若此元素為 inline 元素，則 containing block 為能夠包含這個(gè)元素生成的第一個(gè)和最后一個(gè) inline box 的 padding box (除 margin, border 外的區(qū)域) 的最小矩形；否則則由這個(gè)祖先元素的 padding box 構(gòu)成。如果都找不到，則為 initial containing block。
16.CSS里的visibility屬性有個(gè)collapse屬性值是干嘛用的？在不同瀏覽器下以后什么區(qū)別？
visible: 默認(rèn)值。元素是可見的。
hidden: 元素是不可見的，相當(dāng)于display：hidden；，但此時(shí)仍占用頁面空間
collapse: 當(dāng)在表格元素中使用時(shí)，此值可刪除一行或一列，但是它不會(huì)影響表格的布局。被行或列占據(jù)的空間會(huì)留給其他內(nèi)容使用。如果此值被用在其他的元素上，會(huì)呈現(xiàn)為 “hidden”。
inherit: 規(guī)定應(yīng)該從父元素繼承 visibility 屬性的值。
對于一般的元素，它的表現(xiàn)跟display:hidden是一樣的。但例外的是，如果這個(gè)元素是table相關(guān)的元素，例如table行，table group，table列，table column group，它的表現(xiàn)卻跟display: none一樣，也就是說，它們占用的空間也會(huì)釋放。
17.position跟display、margin collapse、overflow、float這些特性相互疊加后會(huì)怎么樣？
display 屬性規(guī)定元素應(yīng)該生成的框的類型。 block 象塊類型元素一樣顯示，none 缺省值。象行內(nèi)元素類型一樣顯示， inline-block 象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯示，list-item 象塊類型元素一樣顯示，并添加樣式列表標(biāo)記（display 還有很多其他值設(shè)置，讀者自行查找）。
浮動(dòng)或絕對定位的元素，只能是塊元素或表格。
總的來說，可以把它看作是一個(gè)類似優(yōu)先級的機(jī)制， "position:absolute" 和 "position:fixed" 優(yōu)先級最高，有它存在的時(shí)候，浮動(dòng)不起作用，'display' 的值也需要調(diào)整； 其次，元素的 'float' 特性的值不是 "none" 的時(shí)候或者它是根元素的時(shí)候，調(diào)整 'display' 的值； 最后，非根元素，并且非浮動(dòng)元素，并且非絕對定位的元素，'display' 特性值同設(shè)置值。
Collapsing margins，即外邊距折疊，指的是毗鄰的兩個(gè)或多個(gè)外邊距 (margin) 會(huì)合并成一個(gè)外邊距。其中所說的 margin 毗鄰，可以歸結(jié)為以下兩點(diǎn)：
1)這兩個(gè)或多個(gè)外邊距沒有被非空內(nèi)容、padding、border 或 clear 分隔開。
2)這些 margin 都處于普通流中。
18.對BFC規(guī)范(塊級格式化上下文：block formatting context)的理解？
BFC（Block Formatting Context）直譯為“塊級格式化范圍”。是 W3C CSS 2.1 規(guī)范中的一個(gè)概念，它決定了元素如何對其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用。當(dāng)涉及到可視化布局的時(shí)候，Block Formatting Context提供了一個(gè)環(huán)境，HTML元素在這個(gè)環(huán)境中按照一定規(guī)則進(jìn)行布局。
一個(gè)環(huán)境中的元素不會(huì)影響到其它環(huán)境中的布局。比如浮動(dòng)元素會(huì)形成BFC，浮動(dòng)元素內(nèi)部子元素的主要受該浮動(dòng)元素影響，兩個(gè)浮動(dòng)元素之間是互不影響的。這里有點(diǎn)類似一個(gè)BFC就是一個(gè)獨(dú)立的行政單位的意思。也可以說BFC就是一個(gè)作用范圍。可以把它理解成是一個(gè)獨(dú)立的容器，并且這個(gè)容器的里box的布局，與這個(gè)容器外的毫不相干。
19.CSS權(quán)重優(yōu)先級是如何計(jì)算的？
第一等：代表內(nèi)聯(lián)樣式，如: style=””，權(quán)值為1000。
第二等：代表ID選擇器，如：#content，權(quán)值為100。
第三等：代表類，偽類和屬性選擇器，如.content，權(quán)值為10。
第四等：代表類型選擇器和偽元素選擇器，如div p，權(quán)值為1。
最后把這些值加起來，再就是當(dāng)前元素的權(quán)重了。
權(quán)重算出來了，但是某個(gè)元素到底用哪個(gè)樣式，還有3個(gè)規(guī)則,：
1)如果樣式上加有!important標(biāo)記，例如：
p{ color: gray !important}
那么始終采用這個(gè)標(biāo)記的樣式。
2）匹配的內(nèi)容按照CSS權(quán)重排序，權(quán)重大的優(yōu)先；
可以看到，CSS權(quán)重只是決定應(yīng)用哪個(gè)樣式的其中一個(gè)步驟，不過這個(gè)步驟是最復(fù)雜的，上面已經(jīng)說過了。
3）如果權(quán)重也一樣，按照它在CSS樣式表里聲明的順序，后聲明的優(yōu)先
20.請解釋一下為什么會(huì)出現(xiàn)浮動(dòng)和什么時(shí)候需要清除浮動(dòng)？清除浮動(dòng)的方式
在非IE瀏覽器（如Firefox）下，當(dāng)容器的高度為auto，且容器的內(nèi)容中有浮動(dòng)（float為left或right）的元素，在這種情況下，容器的高度不能自動(dòng)伸長以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到容器外面而影響（甚至破壞）布局的現(xiàn)象。這個(gè)現(xiàn)象叫浮動(dòng)溢出，為了防止這個(gè)現(xiàn)象的出現(xiàn)而進(jìn)行的CSS處理，就叫CSS清除浮動(dòng)。
清除浮動(dòng)的方式：
1）父級div定義偽類:after。
.clearfix:after{
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
2）父級div定義overflow:hidden。
3）父級div定義overflow:auto。
4）父級div也浮動(dòng)，需要定義寬度
21.移動(dòng)端的布局用過媒體查詢嗎？
媒體查詢，就是根據(jù)頁面分辨率設(shè)置不同的css樣式，達(dá)到自適應(yīng)的目的
@media screen and (max-width: 760px) {
body {
background:#000;
}
}
22.使用 CSS 預(yù)處理器嗎？
ass
less
stylus
23.CSS優(yōu)化、提高性能的方法有哪些？
1）加載性能
這個(gè)方面相關(guān)的 best practice 太多了，網(wǎng)上隨便找一找就是一堆資料，比如不要用 import 啊，壓縮啊等等，主要是從減少文件體積、減少阻塞加載、提高并發(fā)方面入手的，任何 hint 都逃不出這幾個(gè)大方向。
2）選擇器性能
可以參考 GitHub 的這個(gè)分享 https://speakerdeck.com/jonrohan/githubs-css-performance，但 selector 的對整體性能的影響可以忽略不計(jì)了，selector 的考察更多是規(guī)范化和可維護(hù)性、健壯性方面，很少有人在實(shí)際工作當(dāng)中會(huì)把選擇器性能作為重點(diǎn)關(guān)注對象的，但也像 GitHub 這個(gè)分享里面說的一樣——知道總比不知道好。
3）渲染性能
渲染性能是 CSS 優(yōu)化最重要的關(guān)注對象。頁面渲染 junky 過多？看看是不是大量使用了 text-shadow？是不是開了字體抗鋸齒？CSS 動(dòng)畫怎么實(shí)現(xiàn)的？合理利用 GPU 加速了嗎？什么你用了 Flexible Box Model？有沒有測試換個(gè) layout 策略對 render performance 的影響？這個(gè)方面搜索一下 CSS render performance 或者 CSS animation performance 也會(huì)有一堆一堆的資料可供參考。
4）可維護(hù)性、健壯性
命名合理嗎？結(jié)構(gòu)層次設(shè)計(jì)是否足夠健壯？對樣式進(jìn)行抽象復(fù)用了嗎？優(yōu)雅的 CSS 不僅僅會(huì)影響后期的維護(hù)成本，也會(huì)對加載性能等方面產(chǎn)生影響。這方面可以多找一些 OOCSS（不是說就要用 OOCSS，而是說多了解一下）等等不同 CSS Strategy 的信息，取長補(bǔ)短。
24.瀏覽器是怎樣解析CSS選擇器的？
從上到下，從左到右。
25.在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢？
偶數(shù)字號相對更容易和 web 設(shè)計(jì)的其他部分構(gòu)成比例關(guān)系。比如：當(dāng)我用了 14 px 的正文字號，我可能會(huì)在一些地方用 14 × 0.5 = 7 px 的 margin，在另一些地方用 14 × 1.5 = 21 px 的標(biāo)題字號。
Windows 自帶的點(diǎn)陣宋體（中易宋體）從 Vista 開始只提供 12、14、16 px 這三個(gè)大小的點(diǎn)陣，而 13、15、17 px 時(shí)用的是小一號的點(diǎn)陣（即每個(gè)字占的空間大了 1 px，但點(diǎn)陣沒變），于是略顯稀疏。
26.margin和padding分別適合什么場景使用？
何時(shí)應(yīng)當(dāng)使用margin
需要在border外側(cè)添加空白時(shí)?？瞻滋幉恍枰尘埃ㄉr(shí)。上下相連的兩個(gè)盒子之間的空白，需要相互抵消時(shí)。如15px+20px的margin，將得到20px的空白。
何時(shí)應(yīng)當(dāng)時(shí)用padding
需要在border內(nèi)測添加空白時(shí)。空白處需要背景（色）時(shí)。上下相連的兩個(gè)盒子之間的空白，希望等于兩者之和時(shí)。如15px+20px的padding，將得到35px的空白。
27.抽離樣式模塊怎么寫，說出思路，有無實(shí)踐經(jīng)驗(yàn)？
？？？？？？？？？
28.元素豎向的百分比設(shè)定是相對于容器的高度嗎？
相對于父元素寬度的：
[max/min-]width、left、right、padding、margin 等；
相對于父元素高度的：
[max/min-]height、top、bottom 等；
當(dāng)按百分比設(shè)定一個(gè)元素的寬度時(shí)，它是相對于父容器的寬度計(jì)算的，但是，對于一些表示豎向距離的屬性，例如padding-top,padding-bottom,margin-top,margin-bottom等，當(dāng)按百分比設(shè)定它們時(shí)，依據(jù)的也是父容器的寬度，而不是高度。
29.全屏滾動(dòng)的原理是什么？用到了CSS的那些屬性？
圖片輪播原理，只不過圖片寬高100%、超出隱藏、調(diào)整比例適應(yīng)屏幕大小
30什么是響應(yīng)式設(shè)計(jì)？響應(yīng)式設(shè)計(jì)的基本原理是什么？如何兼容低版本的IE？
頁面的設(shè)計(jì)和開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺、屏幕尺寸、屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、css media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備；換句話說，頁面應(yīng)該有能力去自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境。
響應(yīng)式網(wǎng)頁設(shè)計(jì)就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這樣，我們就可以不必為不斷到來的新設(shè)備做專門的版本設(shè)計(jì)和開發(fā)了。
響應(yīng)式設(shè)計(jì)的基本原理是通過媒體查詢檢測不同的設(shè)備屏幕尺寸做處理。頁面頭部必須有meta聲明viewport：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
31.視差滾動(dòng)效果，如何給每頁做不同的動(dòng)畫？（回到頂部，向下滑動(dòng)要再次出現(xiàn)，和只出現(xiàn)一次分別怎么做？）
這個(gè)太高端上鏈接：https://www.zhihu.com/question/20990029/answer/21436067
32.::before 和 :after中雙冒號和單冒號 有什么區(qū)別？解釋一下這2個(gè)偽元素的作用。
單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素。
偽元素由雙冒號和偽元素名稱組成。雙冒號是在css3規(guī)范中引入的，用于區(qū)分偽類和偽元素。但是偽類兼容現(xiàn)存樣式，瀏覽器需要同時(shí)支持舊的偽類，比如:first-line、:first-letter、:before、:after等。
這兩個(gè)偽類下特有的屬性 content ，用于在 CSS 渲染中向元素邏輯上的頭部或尾部添加內(nèi)容。注意這些添加不會(huì)改變文檔內(nèi)容，不會(huì)出現(xiàn)在 DOM 中，不可復(fù)制，僅僅是在 CSS 渲染層加入。
33.如何修改chrome記住密碼后自動(dòng)填充表單的黃色背景 ？
情景一：input文本框是純色背景的
可以對input:-webkit-autofill使用足夠大的純色內(nèi)陰影來覆蓋input輸入框的黃色背景；如：
input : -webkit-autofill {
-webkit-box-shadow : 0 0 0px 1000px white inset ;
border : 1px solid #CCC !important ;
}
如果你有使用圓角等屬性，或者發(fā)現(xiàn)輸入框的長度高度不太對，可以對其進(jìn)行調(diào)整，除了chrome默認(rèn)定義的background-color，background-image，color不能用!important提升其優(yōu)先級以外，其他的屬性均可使用!important提升其優(yōu)先級，如：
input : -webkit-autofill {
-webkit-box-shadow : 0 0 0px 1000px white inset ;
border : 1px solid #CCC !important ;
height : 27px !important ;
line-height : 27px !important ;
border-radius : 0 4px 4px 0 ;
}
34.你對line-height是如何理解的？
鏈接：http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/
35.設(shè)置元素浮動(dòng)后，該元素的display值是多少？（自動(dòng)變成display:block）
36.怎么讓Chrome支持小于12px 的文字？
我們可以使用到 css3里的一個(gè)屬性：transform:scale()
屬性介紹可以戳這里：http://www.w3chtml.com/css3/properties/2d-transform/transform.html
這個(gè)屬性前給-webkit-谷歌前綴，那么就可以控制字體的大小，代碼如下：
<style>
p{font-size:10px;-webkit-transform:scale(0.8);}
/*這里的數(shù)字0.8，是縮放比例，可以根據(jù)情況變化。*/
</style>
<p>中夢測試10px</p>
37.讓頁面里的字體變清晰，變細(xì)用CSS怎么做？
（-webkit-font-smoothing: antialiased;）
38.font-style屬性可以讓它賦值為“oblique” oblique是什么意思？
Italic是指斜體字，而Oblique是傾斜的文字，對于沒有斜體的字體應(yīng)該使用Oblique屬性值來實(shí)現(xiàn)傾斜的文字效果.
39.position:fixed;在android下無效怎么處理？
頭中加標(biāo)簽：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
40.如果需要手動(dòng)寫動(dòng)畫，你認(rèn)為最小時(shí)間間隔是多久，為什么？
多數(shù)顯示器默認(rèn)頻率是60Hz,所以最小間隔為1/60=16.7ms
41.display:inline-block 什么時(shí)候會(huì)顯示間隙？
移除空格、使用margin負(fù)值、使用font-size:0、letter-spacing、word-spacing
42.overflow: scroll時(shí)不能平滑滾動(dòng)的問題怎么處理？
1）阻止所有能導(dǎo)致頁面滾動(dòng)的事件。//scroll不能阻止，只能阻止mousewheel，鼠標(biāo)拽滾動(dòng)條就悲劇了；
2）bodyoverflow:hidden//win下右側(cè)滾動(dòng)條會(huì)消失導(dǎo)致頁面橫移，移動(dòng)端阻止不了；
3）把滾動(dòng)部分單獨(dú)放在一個(gè)div里，和彈出部分同級，body和window同高。//所有涉及offset/scrollTop的方法都要修改。fix并且width100%的元素(比如微博頂欄)會(huì)壓在內(nèi)容區(qū)滾動(dòng)條上；
4）彈出時(shí)算scrollTop，給內(nèi)容區(qū)fix然后top移動(dòng)到目前位置，同時(shí)body給一個(gè)overflow-y:scroll強(qiáng)撐出滾動(dòng)條。
43,有一個(gè)高度自適應(yīng)的div，里面有兩個(gè)div，一個(gè)高度100px，希望另一個(gè)填滿剩下的高度。
1）外層position: relative；
百分百自適應(yīng)元素直接position: absolute; top: 100px; bottom: 0; left: 0
2）對外層的padding 和 box-sizing（可以忽略），第一個(gè)塊的margin的修改，第二個(gè)填充塊的height設(shè)為100%。
body { height: 100%; padding: 0; margin: 0; }
.outer { height: 100%; padding: 100px 0 0;
box-sizing: border-box ; }
.A { height: 100px; margin: -100px 0 0; background: #BBE8F2; }
.B { height: 100%; background: #D9C666; }
44.png、jpg、gif 這些圖片格式解釋一下，分別什么時(shí)候用。有沒有了解過webp？
GIF最突出的地方就是他支持動(dòng)畫,同時(shí)GIF也是一種無損的圖片格式,也就是說你在修改圖片之后,圖片質(zhì)量并沒有損失.再者GIF支持半透明(全透明或是全不透明).根據(jù)Google的說法,GIF適用于很小或是較簡單的圖片
PNG包括了PNG-8跟真彩色-PNG(PNG-24 or PNG-32).那PNG相對于GIF最大的優(yōu)勢是:通常體積會(huì)更小，支持alpha(全透明) ，但是我們知道PNG是不支持動(dòng)畫的.同時(shí)需要留意IE6是可以支持PNG-8的,但是在處理PNG-24的透明時(shí)會(huì)顯示會(huì)灰色.相關(guān)例子可以參考sitepoint.通常圖片保存為PNG-8會(huì)在同等質(zhì)量下獲得比GIF更小的體積,而全透明的圖片我們現(xiàn)在只能使用PNG-24.但是請留意在保存圖片在PNG-8與GIF中進(jìn)行比較.因?yàn)槎刹⒉灰恢闭_.
JPG所能顯示的顏色比GIF,PNG要多的多,同時(shí)得到很好的壓縮,所以JPG很適用于保存數(shù)碼照片.但是注意它是一種失真壓縮,這意味著你每次修改圖片都會(huì)造成像素失真.
小圖片或網(wǎng)頁基本元素(如按鈕),考慮PNG-8或GIF.照片則考慮JPG.
Webpack 是一個(gè)前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源
45.什么是Cookie 隔離？（或者說：請求資源的時(shí)候不要讓它帶cookie怎么做）
？？？？？
46.style標(biāo)簽寫在body后與body前有什么區(qū)別？
寫在head標(biāo)簽中利于瀏覽器逐步渲染（resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint）。具體渲染過程請參考
http://blog.csdn.net/wozaixia...
寫在body標(biāo)簽后由于瀏覽器以逐行方式對html文檔進(jìn)行解析，當(dāng)解析到寫在尾部的樣式表（外聯(lián)或?qū)懺趕tyle標(biāo)簽）會(huì)導(dǎo)致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染，在windows的IE下可能會(huì)出現(xiàn)FOUC現(xiàn)象（即樣式失效導(dǎo)致的頁面閃爍問題）。
