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選擇器姐叁，簡(jiǎn)單屬性選擇瓦盛，具體屬性選擇(e.g.a[href][title] {color:red;})，根據(jù)部分屬性值選擇外潜，特定屬性選擇原环，從結(jié)構(gòu)上來(lái)分還有后代選擇器(關(guān)后代選擇器有一個(gè)易被忽視的方面，即兩個(gè)元素之間的層次間隔可以是無(wú)限的处窥。)嘱吗，子元素選擇器(h1 > span{……})，相鄰兄弟選擇器(h1 + p {……})以及偽類碧库。
可繼承的屬性有 font-size font-family color
不可繼承的屬性有 border padding margin background-color width height等

3.CSS優(yōu)先級(jí)算法如何計(jì)算柜与？

在多個(gè)選擇符應(yīng)用于同一個(gè)元素上那么Specificity值高的最終獲得優(yōu)先級(jí)。
選擇符Specificity值列表：規(guī)則：
1）行內(nèi)樣式優(yōu)先級(jí)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ù)位之間沒(méi)有進(jìn)制 比如說(shuō)： 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è)子元素開(kāi)始計(jì)數(shù)
p:nth-of-type(n)　 選擇其父元素的n個(gè)元素
p:nth-last-of-type(n) .從最后一個(gè)子元素開(kāi)始計(jì)數(shù)

注意：
last-of-type是指匹配的對(duì)象是其所在的父素的最后一個(gè)相同類型元素
last-child: 是指匹配的對(duì)象是其所在的父元素的最后一個(gè)元素

5.如何居中div灵临？如何居中一個(gè)浮動(dòng)元素？如何讓絕對(duì)定位的div居中趴荸？

水平左右居中

text-align:center 和 margin:0 auto(上下為0儒溉，左右為自動(dòng))；

.father{text-alingn:center;}
.son{margin: 0 auto}

注意：他們起作用的首要條件是子元素必須沒(méi)有被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)：只需要對(duì)子元素設(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兼容性問(wèn)題

.parent{
    position: relative;
 }
.child{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
 }

flex+align-items
flex惧财、align-items兼容性問(wèn)題

.parent{
    display: flex;
    align-items: center;
}

單行內(nèi)容居中：只考慮單行是最簡(jiǎn)單的巡扇，無(wú)論是否給容器固定高度，只要給容器設(shè)置 line-height 和 height垮衷，并使兩值相等厅翔，再加上 over-flow: hidden；

   .son{
    height: 4em;
    line-height: 4em;
    overflow: hidden;}

同時(shí)支持塊級(jí)和內(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有哪些值仰迁？說(shuō)明他們的作用甸昏。

其中常用的的有none、inline徐许、block施蜜、inline-block。分別的意思是：
1)none： 元素不會(huì)顯示雌隅，而且改元素現(xiàn)實(shí)的空間也不會(huì)保留翻默。但有另外一個(gè) visibility: hidden， 是保留元素的空間的澄步。
2)inline： display的默認(rèn)屬性冰蘑。將元素顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符村缸。我們知道內(nèi)聯(lián)元素是無(wú)法設(shè)置寬高的祠肥，所以一旦將元素的display 屬性設(shè)為 inline， 設(shè)置屬性height和width是沒(méi)有用的。此時(shí)影響它的高度一般是內(nèi)部元素的高度（font-size）和padding仇箱。
3)block： 將元素將顯示為塊級(jí)元素县恕，元素前后會(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（相對(duì)定位）的定位原點(diǎn)是以自己本省原來(lái)所在位置做為原點(diǎn)的。
absolute（絕對(duì)定位）的定位原點(diǎn)是離自己這一級(jí)元素最近的一級(jí)position設(shè)置為 absolute或者relative的父元素的左上角為原點(diǎn)的堪滨，（當(dāng)然胯陋，如果自己的所有父元素都沒(méi) 有設(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 可以用來(lái)加載字體樣式盟萨，而且它還能夠加載服務(wù)器端的字體文件，讓客戶端顯示客戶端所沒(méi)有安裝的字體筐咧。以下是字體的引入和引用鸯旁。

        @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.請(qǐng)解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場(chǎng)景？

彈性布局（flexible box）模塊（目前是w3c候選的推薦）旨在提供一個(gè)更加有效的方式 來(lái)布置量蕊，對(duì)齊和分布在容器之間的各項(xiàng)內(nèi)容，即使它們的大小是未知或者動(dòng)態(tài)變化的艇挨。 彈性布局的主要思想是讓容器有能力來(lá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.常見(jiàn)兼容性問(wèn)題

1）不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同
問(wèn)題癥狀：隨便寫幾個(gè)標(biāo)簽，不加樣式控制的情況下脉漏，各自的margin 和padding差異較大苞冯。
碰到頻率:100%
解決方案：CSS里 {margin:0;padding:0;}
備注：這個(gè)是最常見(jiàn)的也是最易解決的一個(gè)瀏覽器兼容性問(wèn)題，幾乎所有的CSS文件開(kāi)頭都會(huì)用通配符來(lái)設(shè)置各個(gè)標(biāo)簽的內(nèi)外補(bǔ)丁是侧巨。
2）塊屬性標(biāo)簽float后舅锄，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大
問(wèn)題癥狀:常見(jiàn)癥狀是IE6中后面的一塊被頂?shù)较乱恍?br> 碰到頻率：90%（稍微復(fù)雜點(diǎn)的頁(yè)面都會(huì)碰到司忱，float布局最常見(jiàn)的瀏覽器兼容問(wèn)題）
解決方案：在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ì)碰到的兼容性問(wèn)題叨襟。
3）設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6幔荒，IE7糊闽，遨游中高度超出自己設(shè)置高度
問(wèn)題癥狀：IE6、7和遨游里這個(gè)標(biāo)簽的高度不受控制爹梁，超出自己設(shè)置的高度
碰到頻率：60%
解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度右犹。
備注：這種情況一般出現(xiàn)在我們?cè)O(shè)置小圓角背景的標(biāo)簽里。出現(xiàn)這個(gè)問(wèn)題的原因是IE8之前的瀏覽器都會(huì)給標(biāo)簽一個(gè)最小默認(rèn)的行高的高度卫键。即使你的標(biāo)簽是空的傀履，這個(gè)標(biāo)簽的高度還是會(huì)達(dá)到默認(rèn)的行高

13.li與li之間有看不見(jiàn)的空白間隔是什么原因引起的？有什么解決辦法莉炉？

瀏覽器的默認(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覽器的兼容問(wèn)題啦粹，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒(méi)對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異窘游。
初始化CSS樣式主要是提高編碼質(zhì)量唠椭，如果不初始化整個(gè)頁(yè)面做完很糟糕，重復(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一般來(lái)說(shuō)于置，盒子本身就為其子孫建立了 containing block茧吊，用來(lái)計(jì)算內(nèi)部盒子的位置、大小，
而對(duì)內(nèi)部的盒子饱狂，具體采用哪個(gè) containing block 來(lái)計(jì)算曹步，需要分情況來(lái)討論：根元素所在的 containing block 被稱為 initial containing block，在我們常用的瀏覽器環(huán)境下休讳，指的是原點(diǎn)與 canvas 重合讲婚，大小和 viewport 相同的矩形；對(duì)于 position 為 static 或 relative 的元素俊柔，其 containing block 為祖先元素中最近的 block container box 的 content box (除 margin, border, padding 外的區(qū)域)筹麸；
對(duì)于 position:fixed 的元素，其 containing block 由 viewport 建立雏婶；對(duì)于 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)值参歹。元素是可見(jiàn)的。
hidden: 元素是不可見(jiàn)的隆判，相當(dāng)于display：hidden犬庇；，但此時(shí)仍占用頁(yè)面空間
collapse: 當(dāng)在表格元素中使用時(shí)侨嘀，此值可刪除一行或一列臭挽，但是它不會(huì)影響表格的布局。被行或列占據(jù)的空間會(huì)留給其他內(nèi)容使用咬腕。如果此值被用在其他的元素上埋哟，會(huì)呈現(xiàn)為 “hidden”。
inherit: 規(guī)定應(yīng)該從父元素繼承 visibility 屬性的值郎汪。

對(duì)于一般的元素，它的表現(xiàn)跟display:hidden是一樣的闯狱。但例外的是煞赢，如果這個(gè)元素是table相關(guān)的元素，例如table行哄孤，table group照筑，table列，table column group，它的表現(xiàn)卻跟display: none一樣凝危，也就是說(shuō)波俄，它們占用的空間也會(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)或絕對(duì)定位的元素世吨，只能是塊元素或表格。

display折剃，position另假，float流程圖.png

display對(duì)應(yīng)表.png

總的來(lái)說(shuō)，可以把它看作是一個(gè)類似優(yōu)先級(jí)的機(jī)制怕犁， "position:absolute" 和 "position:fixed" 優(yōu)先級(jí)最高边篮，有它存在的時(shí)候，浮動(dòng)不起作用奏甫，'display' 的值也需要調(diào)整戈轿； 其次，元素的 'float' 特性的值不是 "none" 的時(shí)候或者它是根元素的時(shí)候阵子，調(diào)整 'display' 的值思杯； 最后，非根元素挠进，并且非浮動(dòng)元素色乾，并且非絕對(duì)定位的元素，'display' 特性值同設(shè)置值领突。

Collapsing margins暖璧，即外邊距折疊，指的是毗鄰的兩個(gè)或多個(gè)外邊距 (margin) 會(huì)合并成一個(gè)外邊距君旦。其中所說(shuō)的 margin 毗鄰澎办，可以歸結(jié)為以下兩點(diǎn)：
1)這兩個(gè)或多個(gè)外邊距沒(méi)有被非空內(nèi)容嘲碱、padding、border 或 clear 分隔開(kāi)局蚀。
2)這些 margin 都處于普通流中麦锯。

18.對(duì)BFC規(guī)范(塊級(jí)格式化上下文：block formatting context)的理解？

BFC（Block Formatting Context）直譯為“塊級(jí)格式化范圍”琅绅。是 W3C CSS 2.1 規(guī)范中的一個(gè)概念扶欣，它決定了元素如何對(duì)其內(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ú)立的行政單位的意思。也可以說(shuō)BFC就是一個(gè)作用范圍摆碉√料唬可以把它理解成是一個(gè)獨(dú)立的容器，并且這個(gè)容器的里box的布局巷帝，與這個(gè)容器外的毫不相干忌卤。

19.CSS權(quán)重優(yōu)先級(jí)是如何計(jì)算的？

第一等：代表內(nèi)聯(lián)樣式楞泼，如: style=””驰徊，權(quán)值為1000。
第二等：代表ID選擇器堕阔，如：#content棍厂，權(quán)值為100。
第三等：代表類超陆，偽類和屬性選擇器牺弹，如.content，權(quán)值為10时呀。
第四等：代表類型選擇器和偽元素選擇器张漂，如div p，權(quán)值為1谨娜。
最后把這些值加起來(lái)鹃锈，再就是當(dāng)前元素的權(quán)重了。

權(quán)重算出來(lái)了瞧预，但是某個(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è)步驟躯喇，不過(guò)這個(gè)步驟是最復(fù)雜的，上面已經(jīng)說(shuō)過(guò)了硝枉。
3）如果權(quán)重也一樣廉丽，按照它在CSS樣式表里聲明的順序，后聲明的優(yōu)先

20.請(qǐng)解釋一下為什么會(huì)出現(xiàn)浮動(dòng)和什么時(shí)候需要清除浮動(dòng)妻味？清除浮動(dòng)的方式

在非IE瀏覽器（如Firefox）下正压，當(dāng)容器的高度為auto，且容器的內(nèi)容中有浮動(dòng)（float為left或right）的元素责球，在這種情況下焦履，容器的高度不能自動(dòng)伸長(zhǎ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）父級(jí)div定義偽類:after屑宠。

   .clearfix:after{
         content: "020"; 
         display: block; 
         height: 0; 
         clear: both; 
         visibility: hidden;  
      }

2）父級(jí)div定義overflow:hidden。
3）父級(jí)div定義overflow:auto仇让。
4）父級(jí)div也浮動(dòng)典奉，需要定義寬度

21.移動(dòng)端的布局用過(guò)媒體查詢嗎？

媒體查詢妹孙，就是根據(jù)頁(yè)面分辨率設(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 的對(duì)整體性能的影響可以忽略不計(jì)了虚吟，selector 的考察更多是規(guī)范化和可維護(hù)性寸认、健壯性方面，很少有人在實(shí)際工作當(dāng)中會(huì)把選擇器性能作為重點(diǎn)關(guān)注對(duì)象的串慰，但也像 GitHub 這個(gè)分享里面說(shuō)的一樣——知道總比不知道好偏塞。
3）渲染性能
渲染性能是 CSS 優(yōu)化最重要的關(guān)注對(duì)象。頁(yè)面渲染 junky 過(guò)多邦鲫？看看是不是大量使用了 text-shadow灸叼？是不是開(kāi)了字體抗鋸齒？CSS 動(dòng)畫怎么實(shí)現(xiàn)的庆捺？合理利用 GPU 加速了嗎古今？什么你用了 Flexible Box Model？有沒(méi)有測(cè)試換個(gè) layout 策略對(duì) render performance 的影響滔以？這個(gè)方面搜索一下 CSS render performance 或者 CSS animation performance 也會(huì)有一堆一堆的資料可供參考捉腥。
4）可維護(hù)性、健壯性
命名合理嗎醉者？結(jié)構(gòu)層次設(shè)計(jì)是否足夠健壯但狭？對(duì)樣式進(jìn)行抽象復(fù)用了嗎？?jī)?yōu)雅的 CSS 不僅僅會(huì)影響后期的維護(hù)成本撬即，也會(huì)對(duì)加載性能等方面產(chǎn)生影響立磁。這方面可以多找一些 OOCSS（不是說(shuō)就要用 OOCSS，而是說(shuō)多了解一下）等等不同 CSS Strategy 的信息剥槐，取長(zhǎng)補(bǔ)短唱歧。

24.瀏覽器是怎樣解析CSS選擇器的？

從上到下粒竖，從左到右颅崩。

25.在網(wǎng)頁(yè)中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢蕊苗？

偶數(shù)字號(hào)相對(duì)更容易和 web 設(shè)計(jì)的其他部分構(gòu)成比例關(guān)系沿后。比如：當(dāng)我用了 14 px 的正文字號(hào)，我可能會(huì)在一些地方用 14 × 0.5 = 7 px 的 margin朽砰，在另一些地方用 14 × 1.5 = 21 px 的標(biāo)題字號(hào)尖滚。
Windows 自帶的點(diǎn)陣宋體（中易宋體）從 Vista 開(kāi)始只提供 12、14瞧柔、16 px 這三個(gè)大小的點(diǎn)陣漆弄，而 13、15造锅、17 px 時(shí)用的是小一號(hào)的點(diǎn)陣（即每個(gè)字占的空間大了 1 px撼唾，但點(diǎn)陣沒(méi)變），于是略顯稀疏哥蔚。

26.margin和padding分別適合什么場(chǎng)景使用倒谷？

何時(shí)應(yīng)當(dāng)使用margin
需要在border外側(cè)添加空白時(shí)蛛蒙。空白處不需要背景（色）時(shí)恨锚。上下相連的兩個(gè)盒子之間的空白宇驾，需要相互抵消時(shí)。如15px+20px的margin猴伶，將得到20px的空白。
何時(shí)應(yīng)當(dāng)時(shí)用padding
需要在border內(nèi)測(cè)添加空白時(shí)塌西∷妫空白處需要背景（色）時(shí)。上下相連的兩個(gè)盒子之間的空白捡需，希望等于兩者之和時(shí)办桨。如15px+20px的padding，將得到35px的空白站辉。

27.抽離樣式模塊怎么寫呢撞，說(shuō)出思路，有無(wú)實(shí)踐經(jīng)驗(yàn)饰剥？

殊霞？？汰蓉？绷蹲？？顾孽？祝钢？？若厚？

28.元素豎向的百分比設(shè)定是相對(duì)于容器的高度嗎拦英？

相對(duì)于父元素寬度的：
[max/min-]width、left测秸、right疤估、padding、margin 等乞封；
相對(duì)于父元素高度的：
[max/min-]height做裙、top、bottom 等肃晚；

當(dāng)按百分比設(shè)定一個(gè)元素的寬度時(shí)锚贱，它是相對(duì)于父容器的寬度計(jì)算的，但是关串，對(duì)于一些表示豎向距離的屬性拧廊，例如padding-top,padding-bottom,margin-top,margin-bottom等监徘，當(dāng)按百分比設(shè)定它們時(shí)，依據(jù)的也是父容器的寬度吧碾，而不是高度凰盔。

29.全屏滾動(dòng)的原理是什么？用到了CSS的那些屬性倦春？

圖片輪播原理户敬，只不過(guò)圖片寬高100%、超出隱藏睁本、調(diào)整比例適應(yīng)屏幕大小

30什么是響應(yīng)式設(shè)計(jì)尿庐？響應(yīng)式設(shè)計(jì)的基本原理是什么？如何兼容低版本的IE呢堰？

頁(yè)面的設(shè)計(jì)和開(kāi)發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺(tái)抄瑟、屏幕尺寸、屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整枉疼。具體的實(shí)踐方式由多方面組成皮假，包括彈性網(wǎng)格和布局、圖片骂维、css media query的使用等惹资。無(wú)論用戶正在使用筆記本還是iPad，我們的頁(yè)面都應(yīng)該能夠自動(dòng)切換分辨率席舍、圖片尺寸及相關(guān)腳本功能等布轿，以適應(yīng)不同設(shè)備；換句話說(shuō)来颤，頁(yè)面應(yīng)該有能力去自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境汰扭。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這樣福铅，我們就可以不必為不斷到來(lái)的新設(shè)備做專門的版本設(shè)計(jì)和開(kāi)發(fā)了萝毛。
響應(yīng)式設(shè)計(jì)的基本原理是通過(guò)媒體查詢檢測(cè)不同的設(shè)備屏幕尺寸做處理。頁(yè)面頭部必須有meta聲明viewport：

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

31.視差滾動(dòng)效果滑黔，如何給每頁(yè)做不同的動(dòng)畫笆包？（回到頂部，向下滑動(dòng)要再次出現(xiàn)略荡，和只出現(xiàn)一次分別怎么做庵佣？）

這個(gè)太高端上鏈接：https://www.zhihu.com/question/20990029/answer/21436067

32.::before 和 :after中雙冒號(hào)和單冒號(hào) 有什么區(qū)別？解釋一下這2個(gè)偽元素的作用汛兜。

單冒號(hào)(:)用于CSS3偽類巴粪，雙冒號(hào)(::)用于CSS3偽元素。
偽元素由雙冒號(hào)和偽元素名稱組成。雙冒號(hào)是在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文本框是純色背景的
可以對(duì)input:-webkit-autofill使用足夠大的純色內(nèi)陰影來(lái)覆蓋input輸入框的黃色背景题诵；如：

  input : -webkit-autofill { 
      -webkit-box-shadow : 0 0 0px 1000px white inset ; 
      border : 1px solid #CCC !important ; 
    } 

如果你有使用圓角等屬性，或者發(fā)現(xiàn)輸入框的長(zhǎng)度高度不太對(duì)层皱，可以對(duì)其進(jìn)行調(diào)整性锭，除了chrome默認(rèn)定義的background-color，background-image叫胖，color不能用!important提升其優(yōu)先級(jí)以外草冈，其他的屬性均可使用!important提升其優(yōu)先級(jí)，如：

   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.你對(duì)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>中夢(mèng)測(cè)試10px</p>

37.讓頁(yè)面里的字體變清晰垦藏，變細(xì)用CSS怎么做梆暖？

（-webkit-font-smoothing: antialiased;）

38.font-style屬性可以讓它賦值為“oblique” oblique是什么意思？

Italic是指斜體字掂骏，而Oblique是傾斜的文字轰驳，對(duì)于沒(méi)有斜體的字體應(yīng)該使用Oblique屬性值來(lái)實(shí)現(xiàn)傾斜的文字效果.

39.position:fixed;在android下無(wú)效怎么處理？
頭中加標(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)的問(wèn)題怎么處理豁延？

1）阻止所有能導(dǎo)致頁(yè)面滾動(dòng)的事件。//scroll不能阻止腊状，只能阻止mousewheel诱咏，鼠標(biāo)拽滾動(dòng)條就悲劇了；
2）bodyoverflow:hidden//win下右側(cè)滾動(dòng)條會(huì)消失導(dǎo)致頁(yè)面橫移缴挖，移動(dòng)端阻止不了袋狞；
3）把滾動(dòng)部分單獨(dú)放在一個(gè)div里，和彈出部分同級(jí)映屋，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）對(duì)外層的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í)候用滤愕。有沒(méi)有了解過(guò)webp温算？

GIF最突出的地方就是他支持動(dòng)畫,同時(shí)GIF也是一種無(wú)損的圖片格式,也就是說(shuō)你在修改圖片之后,圖片質(zhì)量并沒(méi)有損失.再者GIF支持半透明(全透明或是全不透明).根據(jù)Google的說(shuō)法,GIF適用于很小或是較簡(jiǎn)單的圖片

PNG包括了PNG-8跟真彩色-PNG(PNG-24 or PNG-32).那PNG相對(duì)于GIF最大的優(yōu)勢(shì)是:通常體積會(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.但是請(qǐng)留意在保存圖片在PNG-8與GIF中進(jìn)行比較.因?yàn)槎刹⒉灰恢闭_.

JPG所能顯示的顏色比GIF,PNG要多的多,同時(shí)得到很好的壓縮,所以JPG很適用于保存數(shù)碼照片.但是注意它是一種失真壓縮,這意味著你每次修改圖片都會(huì)造成像素失真.

小圖片或網(wǎng)頁(yè)基本元素(如按鈕),考慮PNG-8或GIF.照片則考慮JPG.

Webpack 是一個(gè)前端資源加載/打包工具注竿。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源

45.什么是Cookie 隔離？（或者說(shuō)：請(qǐng)求資源的時(shí)候不要讓它帶cookie怎么做）
巩割？裙顽？？宣谈？愈犹？

46.style標(biāo)簽寫在body后與body前有什么區(qū)別？

寫在head標(biāo)簽中利于瀏覽器逐步渲染（resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint）闻丑。具體渲染過(guò)程請(qǐng)參考
http://blog.csdn.net/wozaixia...

寫在body標(biāo)簽后由于瀏覽器以逐行方式對(duì)html文檔進(jìn)行解析漩怎，當(dāng)解析到寫在尾部的樣式表（外聯(lián)或?qū)懺趕tyle標(biāo)簽）會(huì)導(dǎo)致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染嗦嗡，在windows的IE下可能會(huì)出現(xiàn)FOUC現(xiàn)象（即樣式失效導(dǎo)致的頁(yè)面閃爍問(wèn)題）勋锤。