@轉(zhuǎn)自GitHub

• 介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
  （1）有兩種蒜茴， IE 盒子模型、W3C 盒子模型浆西；
  （2）盒模型： 內(nèi)容(content)粉私、填充(padding)、邊界(margin)近零、 邊框(border)毡鉴；
  （3）區(qū) 別： IE的content部分把 border 和 padding計(jì)算了進(jìn)去;
• CSS選擇符有哪些？哪些屬性可以繼承秒赤？

 1.id選擇器（ # myid）

   2.類選擇器（.myclassname）
   3.標(biāo)簽選擇器（div, h1, p）
   4.相鄰選擇器（h1 + p）
   5.子選擇器（ul > li）
   6.后代選擇器（li a）
   7.通配符選擇器（ * ）
   8.屬性選擇器（a[rel = "external"]）
   9.偽類選擇器（a:hover, li:nth-child）

可繼承的樣式： font-size font-family color, UL LI DL DD DT;
不可繼承的樣式：border padding margin width height ;

• CSS優(yōu)先級(jí)算法如何計(jì)算猪瞬？

優(yōu)先級(jí)就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);
載入樣式以最后載入的定位為準(zhǔn);
優(yōu)先級(jí)為:
同權(quán)重: 內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部）> 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）入篮。
!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級(jí)高

• CSS3新增偽類有那些陈瘦？
  舉例：
  p:first-of-type 選擇屬于其父元素的首個(gè) <p> 元素的每個(gè) <p> 元素。
  p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個(gè) <p> 元素潮售。
  p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個(gè) <p> 元素痊项。
  p:only-child 選擇屬于其父元素的唯一子元素的每個(gè) <p> 元素。
  p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè) <p> 元素酥诽。

     :after          在元素之前添加內(nèi)容,也可以用來(lái)做清除浮動(dòng)鞍泉。
    :before         在元素之后添加內(nèi)容
    :enabled        
    :disabled       控制表單控件的禁用狀態(tài)。
    :checked        單選框或復(fù)選框被選中肮帐。
  

• 如何居中div咖驮？
  1.水平居中：給div設(shè)置一個(gè)寬度，然后添加margin:0 auto屬性
  div{
  width:200px;
  margin:0 auto;
  }

  2.讓絕對(duì)定位的div居中
      div {
        position: absolute;
        width: 300px;
        height: 300px;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: pink; /* 方便看效果 */
      }
  
  3.水平垂直居中一
    確定容器的寬高 寬500 高 300 的層
    設(shè)置層的外邊距
      div {
        position: relative;     /* 相對(duì)定位或絕對(duì)定位均可 */
        width:500px; 
        height:300px;
        top: 50%;
        left: 50%;
        margin: -150px 0 0 -250px;      /* 外邊距為自身寬高的一半 */
        background-color: pink;     /* 方便看效果 */
     }
  
  4.水平垂直居中二
    未知容器的寬高训枢，利用 `transform` 屬性
      div {
        position: absolute;     /* 相對(duì)定位或絕對(duì)定位均可 */
        width:500px; 
        height:300px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: pink;     /* 方便看效果 */
    }
  
  5.水平垂直居中三
    利用 flex 布局
    實(shí)際使用時(shí)應(yīng)考慮兼容性
      .container {
         display: flex; 
         align-items: center;        /* 垂直居中 */
         justify-content: center;    /* 水平居中 */
      }
      .container div {
         width: 100px;
         height: 100px;
         background-color: pink;     /* 方便看效果 */
      }  
  

• display有哪些值托修？說(shuō)明他們的作用。
  block 塊類型恒界。默認(rèn)寬度為父元素寬度睦刃，可設(shè)置寬高，換行顯示十酣。
  none 缺省值涩拙。象行內(nèi)元素類型一樣顯示。
  inline 行內(nèi)元素類型耸采。默認(rèn)寬度為內(nèi)容寬度兴泥，不可設(shè)置寬高，同行顯示洋幻。
  inline-block 默認(rèn)寬度為內(nèi)容寬度郁轻，可以設(shè)置寬高，同行顯示。
  list-item 象塊類型元素一樣顯示好唯，并添加樣式列表標(biāo)記竭沫。
  table 此元素會(huì)作為塊級(jí)表格來(lái)顯示。
  inherit 規(guī)定應(yīng)該從父元素繼承 display 屬性的值骑篙。

• position的值relative和absolute定位原點(diǎn)是蜕提？
  absolute
  生成絕對(duì)定位的元素，相對(duì)于值不為 static的第一個(gè)父元素進(jìn)行定位靶端。
  fixed （老IE不支持）
  生成絕對(duì)定位的元素谎势，相對(duì)于瀏覽器窗口進(jìn)行定位。
  relative
  生成相對(duì)定位的元素杨名，相對(duì)于其正常位置進(jìn)行定位脏榆。
  static
  默認(rèn)值。沒(méi)有定位台谍，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right,
  z-index 聲明）须喂。
  inherit
  規(guī)定從父元素繼承 position 屬性的值。

• CSS3有哪些新特性趁蕊？
  新增各種CSS選擇器 （: not(.input)：所有 class 不是“input”的節(jié)點(diǎn)）
  圓角 （border-radius:8px）
  多列布局 （multi-column layout）
  陰影和反射 （Shadow\Reflect）
  文字特效 （text-shadow坞生、）
  文字渲染 （Text-decoration）
  線性漸變 （gradient）
  旋轉(zhuǎn) （transform）
  縮放,定位,傾斜,動(dòng)畫,多背景
  例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)
  Animation:

• 請(qǐng)解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場(chǎng)景？

一個(gè)用于頁(yè)面布局的全新CSS3功能掷伙，F(xiàn)lexbox可以把列表放在同一個(gè)方向（從上到下排列是己，從左到右），并讓列表能延伸到占用可用的空間任柜。
較為復(fù)雜的布局還可以通過(guò)嵌套一個(gè)伸縮容器（flex container）來(lái)實(shí)現(xiàn)卒废。
采用Flex布局的元素，稱為Flex容器（flex container）乘盼，簡(jiǎn)稱"容器"升熊。
它的所有子元素自動(dòng)成為容器成員，稱為Flex項(xiàng)目（flex item）绸栅，簡(jiǎn)稱"項(xiàng)目"。
常規(guī)布局是基于塊和內(nèi)聯(lián)流方向页屠，而Flex布局是基于flex-flow流可以很方便的用來(lái)做局中粹胯，能對(duì)不同屏幕大小自適應(yīng)。
在布局上有了比以前更加靈活的空間辰企。
具體：http://www.w3cplus.com/css3/flexbox-basics.html

• 用純CSS創(chuàng)建一個(gè)三角形的原理是什么风纠？
  把上、左牢贸、右三條邊隱藏掉（顏色設(shè)為 transparent）
  #demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
  }

• 一個(gè)滿屏 品 字布局 如何設(shè)計(jì)?
  簡(jiǎn)單的方式：
  上面的div寬100%竹观，
  下面的兩個(gè)div分別寬50%，
  然后用float或者inline使其不換行即可

• css多列等高如何實(shí)現(xiàn)？

利用padding-bottom|margin-bottom正負(fù)值相抵臭增；
設(shè)置父容器設(shè)置超出隱藏（overflow:hidden）懂酱，這樣子父容器的高度就還是它里面的列沒(méi)有設(shè)定padding-bottom時(shí)的高度，
當(dāng)它里面的任 一列高度增加了誊抛，則父容器的高度被撐到里面最高那列的高度列牺，
其他比這列矮的列會(huì)用它們的padding-bottom補(bǔ)償這部分高度差。

• 經(jīng)常遇到的瀏覽器的兼容性有哪些拗窃？原因瞎领，解決方法是什么，常用hack的技巧 随夸？
  * png24位的圖片在iE6瀏覽器上出現(xiàn)背景九默，解決方案是做成PNG8.

  * 瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來(lái)統(tǒng)一宾毒。
  
  * IE6雙邊距bug:塊屬性標(biāo)簽float后荤西，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大伍俘。
  
    浮動(dòng)ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}
  
    這種情況之下IE會(huì)產(chǎn)生20px的距離邪锌，解決方案是在float的標(biāo)簽樣式控制中加入 ——
      _display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個(gè)符號(hào)只有ie6會(huì)識(shí)別)
  
    漸進(jìn)識(shí)別的方式癌瘾，從總體中逐漸排除局部觅丰。
      首先，巧妙的使用“\9”這一標(biāo)記妨退，將IE游覽器從所有情況中分離出來(lái)妇萄。
      接著，再次使用“+”將IE8和IE7咬荷、IE6分離開來(lái)冠句，這樣IE8已經(jīng)獨(dú)立識(shí)別。
  css
    .bb{
        background-color:red;/*所有識(shí)別*/
        background-color:#00deff\9; /*IE6幸乒、7懦底、8識(shí)別*/
        +background-color:#a200ff;/*IE6、7識(shí)別*/
        _background-color:#1e0bd1;/*IE6識(shí)別*/
    }
  
  * IE下,可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性,
    也可以使用getAttribute()獲取自定義屬性;
    Firefox下,只能使用getAttribute()獲取自定義屬性罕扎。
    解決方法:統(tǒng)一通過(guò)getAttribute()獲取自定義屬性聚唐。
  
  *  IE下,even對(duì)象有x,y屬性,但是沒(méi)有pageX,pageY屬性;
     Firefox下,event對(duì)象有pageX,pageY屬性,但是沒(méi)有x,y屬性。
  
  *  解決方法：（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)腔召。
  
  *  Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示,
     可通過(guò)加入 CSS 屬性 -webkit-text-size-adjust: none; 解決杆查。
  
  超鏈接訪問(wèn)過(guò)后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不在具有hover和active
  了解決方法是改變CSS屬性的排列順序:
      L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}
  

• li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法臀蛛？
  行框的排列會(huì)受到中間空白（回車\空格）等的影響亲桦，因?yàn)榭崭褚矊儆谧址?這些空白也會(huì)被應(yīng)用樣式崖蜜，占據(jù)空間，所以會(huì)有間隔客峭，把字符大小設(shè)為0豫领，就沒(méi)有空格了。

• 為什么要初始化CSS樣式桃笙。
  因?yàn)闉g覽器的兼容問(wèn)題氏堤，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒(méi)對(duì)CSS初始化往往會(huì)出現(xiàn)
  瀏覽器之間的頁(yè)面顯示差異搏明。

  當(dāng)然鼠锈，初始化樣式會(huì)對(duì)SEO有一定的影響，但魚和熊掌不可兼得星著，但力求影響最小的情況下初始化购笆。
  
  最簡(jiǎn)單的初始化方法： * {padding: 0; margin: 0;} （強(qiáng)烈不建議）
  
  淘寶的樣式初始化代碼：
     body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre,
     form, fieldset, legend, button, input, textarea, th, td {margin:0; padding:0;}
     body, button, input, select, textarea {font:12px/1.5tahoma, arial,\5b8b\4f53;}
     h1, h2, h3, h4, h5, h6{ font-size:100%; }
     address, cite, dfn, em, var { font-style:normal; }
     code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
     small{ font-size:12px; }
     ul, ol { list-style:none; }
     a { text-decoration:none; }
     a:hover { text-decoration:underline; }
     sup { vertical-align:text-top; }
     sub{ vertical-align:text-bottom; }
     legend { color:#000; }
     fieldset, img { border:0; }
     button, input, select, textarea { font-size:100%; }
     table { border-collapse:collapse; border-spacing:0; }
  

• absolute的containing block(容器塊)計(jì)算方式跟正常流有什么不同？

無(wú)論屬于哪種虚循，都要先找到其祖先元素中最近的 position 值不為 static 的元素同欠，然后再判斷：
1、若此元素為 inline 元素横缔，則 containing block 為能夠包含這個(gè)元素生成的第一個(gè)和最后一個(gè) inline box 的 padding box (除 margin, border 外的區(qū)域) 的最小矩形铺遂；
2、否則,則由這個(gè)祖先元素的 padding box 構(gòu)成茎刚。
如果都找不到襟锐，則為 initial containing block。
補(bǔ)充：
1. static(默認(rèn)的)/relative：簡(jiǎn)單說(shuō)就是它的父元素的內(nèi)容框（即去掉padding的部分）
2. absolute: 向上找最近的定位為absolute/relative的元素
3. fixed: 它的containing block一律為根元素(html/body)膛锭，根元素也是
initial containing block

• CSS里的visibility屬性有個(gè)collapse屬性值是干嘛用的粮坞？在不同瀏覽器下以后什么區(qū)別？

• position跟display初狰、margin collapse莫杈、overflow、float這些特性相互疊加后會(huì)怎么樣奢入？

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

（W3C CSS 2.1 規(guī)范中的一個(gè)概念,它是一個(gè)獨(dú)立容器，決定了元素如何對(duì)其內(nèi)容進(jìn)行定位,以及與其他元素的關(guān)系和相互作用俊马。）
一個(gè)頁(yè)面是由很多個(gè) Box 組成的,元素的類型和 display 屬性,決定了這個(gè) Box 的類型丁存。
不同類型的 Box,會(huì)參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box內(nèi)的元素會(huì)以不同的方式渲染,也就是說(shuō)BFC內(nèi)部的元素和外部的元素不會(huì)互相影響。

• css定義的權(quán)重

以下是權(quán)重的規(guī)則：標(biāo)簽的權(quán)重為1柴我，class的權(quán)重為10，id的權(quán)重為100扩然，以下例子是演示各種定義的權(quán)重值：
/權(quán)重為1/
div{
}
/權(quán)重為10/
.class1{
}
/權(quán)重為100/
#id1{
}
/權(quán)重為100+1=101/
#id1 div{
}
/權(quán)重為10+1=11/
.class1 div{
}
/權(quán)重為10+10+1=21/
.class1 .class2 div{
}
如果權(quán)重相同艘儒，則最后定義的樣式會(huì)起作用，但是應(yīng)該避免這種情況出現(xiàn)

• 請(qǐng)解釋一下為什么需要清除浮動(dòng)？清除浮動(dòng)的方式

清除浮動(dòng)是為了清除使用浮動(dòng)元素產(chǎn)生的影響界睁。浮動(dòng)的元素觉增，高度會(huì)塌陷，而高度的塌陷使我們頁(yè)面后面的布局不能正常顯示翻斟。
1逾礁、父級(jí)div定義height；
2访惜、父級(jí)div 也一起浮動(dòng)嘹履；
3、常規(guī)的使用一個(gè)class债热；
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
4砾嫉、SASS編譯的時(shí)候，浮動(dòng)元素的父級(jí)div定義偽類:after
&:after,&:before{
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
解析原理：

1. display:block 使生成的元素以塊級(jí)元素顯示,占滿剩余空間;
2. height:0 避免生成內(nèi)容破壞原有布局的高度窒篱。
3. visibility:hidden 使生成的內(nèi)容不可見焕刮，并允許可能被生成內(nèi)容蓋住的內(nèi)容可以進(jìn)行點(diǎn)擊和交互;
   4）通過(guò) content:"."生成內(nèi)容作為最后一個(gè)元素，至于content里面是點(diǎn)還是其他都是可以的墙杯，例如oocss里面就有經(jīng)典的 content:".",有些版本可能content 里面內(nèi)容為空,一絲冰涼是不推薦這樣做的,firefox直到7.0 content:”" 仍然會(huì)產(chǎn)生額外的空隙配并；
   5）zoom：1 觸發(fā)IE hasLayout。
   通過(guò)分析發(fā)現(xiàn)
   除了clear：both用來(lái)閉合浮動(dòng)的高镐，其他代碼無(wú)非都是為了隱藏掉content生成的內(nèi)容溉旋，這也就是其他版本的閉合浮動(dòng)為什么會(huì)有font-size：0，line-height：0避消。

• 什么是外邊距合并低滩？
  外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)岩喷，它們將形成一個(gè)外邊距恕沫。
  合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
  w3school介紹網(wǎng)址： http://www.w3school.com.cn/css/css_margin_collapsing.asp

• zoom:1的清除浮動(dòng)原理?

清除浮動(dòng)纱意，觸發(fā)hasLayout婶溯；
Zoom屬性是IE瀏覽器的專有屬性，它可以設(shè)置或檢索對(duì)象的縮放比例偷霉。解決ie下比較奇葩的bug迄委。
譬如外邊距（margin）的重疊，浮動(dòng)清除类少，觸發(fā)ie的haslayout屬性等叙身。
來(lái)龍去脈大概如下：
當(dāng)設(shè)置了zoom的值之后，所設(shè)置的元素就會(huì)就會(huì)擴(kuò)大或者縮小硫狞，高度寬度就會(huì)重新計(jì)算了信轿，這里一旦改變zoom值時(shí)其實(shí)也會(huì)發(fā)生重新渲染晃痴，運(yùn)用這個(gè)原理，也就解決了ie下子元素浮動(dòng)時(shí)候父元素不隨著自動(dòng)擴(kuò)大的問(wèn)題财忽。
Zoom屬是IE瀏覽器的專有屬性倘核，火狐和老版本的webkit核心的瀏覽器都不支持這個(gè)屬性。然而即彪，zoom現(xiàn)在已經(jīng)被逐步標(biāo)準(zhǔn)化紧唱，出現(xiàn)在 CSS 3.0 規(guī)范草案中。
目前非ie由于不支持這個(gè)屬性隶校，它們又是通過(guò)什么屬性來(lái)實(shí)現(xiàn)元素的縮放呢漏益？
可以通過(guò)css3里面的動(dòng)畫屬性scale進(jìn)行縮放。

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

假設(shè)你現(xiàn)在正用一臺(tái)顯示設(shè)備來(lái)閱讀這篇文章遭庶，同時(shí)你也想把它投影到屏幕上，或者打印出來(lái)稠屠， 而顯示設(shè)備峦睡、屏幕投影和打印等這些媒介都有自己的特點(diǎn)，CSS就是為文檔提供在不同媒介上展示的適配方法
當(dāng)媒體查詢?yōu)檎鏁r(shí)权埠，相關(guān)的樣式表或樣式規(guī)則會(huì)按照正常的級(jí)聯(lián)規(guī)被應(yīng)用榨了。 當(dāng)媒體查詢返回假， 標(biāo)簽上帶有媒體查詢的樣式表 仍將被下載 （只不過(guò)不會(huì)被應(yīng)用）攘蔽。
包含了一個(gè)媒體類型和至少一個(gè)使用 寬度龙屉、高度和顏色等媒體屬性來(lái)限制樣式表范圍的表達(dá)式。 CSS3加入的媒體查詢使得無(wú)需修改內(nèi)容便可以使樣式應(yīng)用于某些特定的設(shè)備范圍满俗。
@media (min-width: 700px) and (orientation: landscape){ .sidebar { display: none; } }

• 使用 CSS 預(yù)處理器嗎转捕？喜歡那個(gè)？

SASS (SASS唆垃、LESS沒(méi)有本質(zhì)區(qū)別五芝，只因?yàn)閳F(tuán)隊(duì)前端都是用的SASS)

• CSS優(yōu)化、提高性能的方法有哪些辕万？

關(guān)鍵選擇器（key selector）枢步。選擇器的最后面的部分為關(guān)鍵選擇器（即用來(lái)匹配目標(biāo)元素的部分）；
如果規(guī)則擁有 ID 選擇器作為其關(guān)鍵選擇器渐尿，則不要為規(guī)則增加標(biāo)簽醉途。過(guò)濾掉無(wú)關(guān)的規(guī)則（這樣樣式系統(tǒng)就不會(huì)浪費(fèi)時(shí)間去匹配它們了）；
提取項(xiàng)目的通用公有樣式砖茸，增強(qiáng)可復(fù)用性隘擎，按模塊編寫組件；增強(qiáng)項(xiàng)目的協(xié)同開發(fā)性凉夯、可維護(hù)性和可擴(kuò)展性;
使用預(yù)處理工具或構(gòu)建工具（gulp對(duì)css進(jìn)行語(yǔ)法檢查嵌屎、自動(dòng)補(bǔ)前綴推正、打包壓縮恍涂、自動(dòng)優(yōu)雅降級(jí)）宝惰；

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

樣式系統(tǒng)從關(guān)鍵選擇器開始匹配再沧，然后左移查找規(guī)則選擇器的祖先元素尼夺。
只要選擇器的子樹一直在工作，樣式系統(tǒng)就會(huì)持續(xù)左移炒瘸，直到和規(guī)則匹配淤堵，或者是因?yàn)椴黄ヅ涠艞壴撘?guī)則。

• 在網(wǎng)頁(yè)中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體顷扩？為什么呢拐邪？

• margin和padding分別適合什么場(chǎng)景使用？
  margin是用來(lái)隔開元素與元素的間距隘截；padding是用來(lái)隔開元素與內(nèi)容的間隔扎阶。
  margin用于布局分開元素使元素與元素互不相干；
  padding用于元素與內(nèi)容之間的間隔婶芭，讓內(nèi)容（文字）與（包裹）元素之間有一段

• 抽離樣式模塊怎么寫东臀，說(shuō)出思路，有無(wú)實(shí)踐經(jīng)驗(yàn)犀农？[阿里航旅的面試題]

• 元素豎向的百分比設(shè)定是相對(duì)于容器的高度嗎惰赋？

• 全屏滾動(dòng)的原理是什么？用到了CSS的那些屬性呵哨？

• 什么是響應(yīng)式設(shè)計(jì)赁濒？響應(yīng)式設(shè)計(jì)的基本原理是什么？如何兼容低版本的IE孟害？
  視差滾動(dòng)效果拒炎，如何給每頁(yè)做不同的動(dòng)畫？（回到頂部纹坐，向下滑動(dòng)要再次出現(xiàn)枝冀，和只出現(xiàn)一次分別怎么做？）

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

 單冒號(hào)(:)用于CSS3偽類，雙冒號(hào)(::)用于CSS3偽元素谷誓。（偽元素由雙冒號(hào)和偽元素

      名稱組成）
   雙冒號(hào)是在當(dāng)前規(guī)范中引入的绒障，用于區(qū)分偽類和偽元素。不過(guò)瀏覽器需要同時(shí)支持舊的
      已經(jīng)存在的偽元素寫法捍歪， 比如:first-line户辱、:first-letter鸵钝、:before祖屏、:after等伴榔，
      而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號(hào)的寫法肴熏。

想讓插入的內(nèi)容出現(xiàn)在其它內(nèi)容前偏友，使用::before街立，否者捷犹，使用::after乌昔；
在代碼順序上雷逆，::after生成的內(nèi)容也比::before生成的內(nèi)容靠后名眉。
如果按堆棧視角粟矿，::after生成的內(nèi)容會(huì)在::before生成的內(nèi)容之上

• 如何修改chrome記住密碼后自動(dòng)填充表單的黃色背景 ？

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189); /* #FAFFBD; */
    background-image: none;
    color: rgb(0, 0, 0);
}

• 你對(duì)line-height是如何理解的损拢？

• 設(shè)置元素浮動(dòng)后陌粹，該元素的display值是多少？
  自動(dòng)變成了 display:block

• 怎么讓Chrome支持小于12px 的文字福压？
  1掏秩、用圖片：如果是內(nèi)容固定不變情況下，使用將小于12px文字內(nèi)容切出做圖片隧膏，這樣不影響兼容也不
  影響美觀哗讥。
  2、使用12px及12px以上字體大邪怼：為了兼容各大主流瀏覽器杆煞，建議設(shè)計(jì)美工圖時(shí)候設(shè)置大于或等于
  12px的字體大小，如果是接單的這個(gè)時(shí)候就需要給客戶講解小于12px瀏覽器不兼容等事宜腐泻。
  3决乎、繼續(xù)使用小于12px字體大小樣式設(shè)置：如果不考慮chrome可以不用考慮兼容，同時(shí)在設(shè)置小于
  12px對(duì)象設(shè)置-webkit-text-size-adjust:none派桩，做到最大兼容考慮构诚。
  4、使用12px以上字體：為了兼容铆惑、為了代碼更簡(jiǎn)單 從新考慮權(quán)重下兼容性范嘱。

• 讓頁(yè)面里的字體變清晰，變細(xì)用CSS怎么做员魏？
  -webkit-font-smoothing: antialiased;

• font-style屬性可以讓它賦值為“oblique” oblique是什么意思丑蛤？
  傾斜的字體樣式

• position:fixed;在android下無(wú)效怎么處理？

fixed的元素是相對(duì)整個(gè)頁(yè)面固定位置的撕阎，你在屏幕上滑動(dòng)只是在移動(dòng)這個(gè)所謂的viewport受裹，
原來(lái)的網(wǎng)頁(yè)還好好的在那，fixed的內(nèi)容也沒(méi)有變過(guò)位置，
所以說(shuō)并不是iOS不支持fixed棉饶，只是fixed的元素不是相對(duì)手機(jī)屏幕固定的厦章。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

• 如果需要手動(dòng)寫動(dòng)畫，你認(rèn)為最小時(shí)間間隔是多久照藻，為什么袜啃？（阿里）
  多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次岩梳，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms

• display:inline-block 什么時(shí)候會(huì)顯示間隙囊骤？(攜程)

移除空格、使用margin負(fù)值冀值、使用font-size:0、letter-spacing宫屠、word-spacing

• overflow: scroll時(shí)不能平滑滾動(dòng)的問(wèn)題怎么處理列疗？

• 有一個(gè)高度自適應(yīng)的div，里面有兩個(gè)div浪蹂，一個(gè)高度100px抵栈，希望另一個(gè)填滿剩下的高度。

• png坤次、jpg古劲、gif 這些圖片格式解釋一下，分別什么時(shí)候用缰猴。有沒(méi)有了解過(guò)webp产艾？

• 什么是Cookie 隔離？（或者說(shuō)：請(qǐng)求資源的時(shí)候不要讓它帶cookie怎么做）
  如果靜態(tài)文件都放在主域名下滑绒，那靜態(tài)文件請(qǐng)求的時(shí)候都帶有的cookie的數(shù)據(jù)提交給server的闷堡，非常
  浪費(fèi)流量，所以不如隔離開疑故。

  因?yàn)閏ookie有域的限制杠览，因此不能跨域提交請(qǐng)求，故使用非主要域名的時(shí)候纵势，請(qǐng)求頭中就不會(huì)帶有
  cookie數(shù)據(jù)踱阿，這樣可以降低請(qǐng)求頭的大小，降低請(qǐng)求時(shí)間钦铁，從而達(dá)到降低整體請(qǐng)求延時(shí)的目的软舌。
  
  同時(shí)這種方式不會(huì)將cookie傳入Web Server，也減少了Web Server對(duì)cookie的處理分析環(huán)節(jié)育瓜，
  提高了webserver的http請(qǐng)求的解析速度葫隙。
  

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

• 什么是CSS 預(yù)處理器 / 后處理器躏仇？
  - 預(yù)處理器例如：LESS恋脚、Sass腺办、Stylus，用來(lái)預(yù)編譯Sass或less糟描，增強(qiáng)了css代碼的復(fù)用性怀喉，還有
  層級(jí)、mixin船响、變量躬拢、循環(huán)、函數(shù)等见间，具有很方便的UI組件模塊化開發(fā)能力聊闯，極大的提高工作效率。
  - 后處理器例如：PostCSS米诉，通常被視為在完成的樣式表中根據(jù)CSS規(guī)范處理CSS菱蔬，讓其更有效；目前
  最常做的是給CSS屬性添加瀏覽器私有前綴史侣，實(shí)現(xiàn)跨瀏覽器兼容性的問(wèn)題拴泌。