一斥杜、HTML5語義化

1.為什么需要語義化：易修改、易維護(hù)沥匈；無障礙閱讀支持蔗喂；搜索引擎友好，有利于SEO高帖；面向未來的HTML缰儿，瀏覽器在未來可能提供更豐富的支持。
2.語義元素均有一個(gè)共同特點(diǎn)——他們均不做任何事情棋恼。換句話說返弹，語義元素僅僅是頁面結(jié)構(gòu)的規(guī)范化，并不會(huì)對(duì)內(nèi)容有本質(zhì)的影響爪飘。

結(jié)構(gòu)語義化.jpeg

參考百度ife的h5語義化IFE-NOTE：頁面結(jié)構(gòu)語義化

二义起、CSS

1.介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的师崎？

盒模型：盒模型又稱框模型（Box Model）,包含了元素內(nèi)容（content）默终、內(nèi)邊距（padding）、邊框（border）犁罩、外邊距（margin）幾個(gè)要素齐蔽。IE模型和標(biāo)準(zhǔn)模型唯一的區(qū)別是內(nèi)容計(jì)算方式的不同

• 標(biāo)準(zhǔn)盒模型：width=content ；

  
  
  image.png

• 低版本IE盒模型：width = content + padding + border床估；

  
  
  image.png

2.box-sizing屬性含滴？

box-sizing: content-box|border-box|inherit;
用來控制元素的盒子模型的解析模式，默認(rèn)為content-box丐巫。

• content-box:W3C標(biāo)準(zhǔn)的盒子模型谈况，設(shè)置元素的 height/width 屬性指的是content部分的高/寬。
• border-box:IE傳統(tǒng)盒子模型递胧。設(shè)置元素的height/width屬性指的是border + padding + content部分的高/寬碑韵。

3.CSS選擇器有哪些？哪些屬性可以繼承缎脾？

CSS選擇器：id選擇器（#idName）祝闻、類選擇器（.className）、標(biāo)簽選擇器（div遗菠、p联喘、h1）、相鄰選擇器（div + p）辙纬、子選擇器（ul>li）耸袜、后代選擇器（div a）、多元素選擇（div,p）牲平、兄弟選擇器（h1~p）堤框、通配符選擇器（*）、屬性選擇器（a[rel=”external”]）纵柿、偽類選擇器（a:hover, li:nth-child）

• 可繼承屬性：font-size蜈抓、font-family、color昂儒、visibility沟使、line-height...
• 不可繼承的樣式：border, padding, margin, width, height

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

元素選擇符： 1
class選擇符： 10
id選擇符：100
內(nèi)聯(lián)樣式：1000 

!important聲明的樣式優(yōu)先級(jí)最高,比內(nèi)聯(lián)樣式高渊跋，如果沖突再進(jìn)行計(jì)算腊嗡。
!important > [ id > class > tag ]
如果優(yōu)先級(jí)相同着倾，則選擇最后出現(xiàn)的樣式。
繼承得到的樣式的優(yōu)先級(jí)最低燕少。

5.CSS3新增偽類有那些?

• p:first-of-type 選擇屬于其父元素的首個(gè)元素
• p:last-of-type 選擇屬于其父元素的最后元素
• p:only-of-type 選擇屬于其父元素唯一的元素
• p:only-child 選擇屬于其父元素的唯一子元素
• p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素
• :enabled :disabled 表單控件的禁用狀態(tài)卡者。
• :checked 單選框或復(fù)選框被選中。

6.如何居中div客们？如何居中一個(gè)浮動(dòng)元素崇决？如何讓絕對(duì)定位的div居中？

div:
(水平居中)

width:100px;
height:100px;
margin:0 auto;
border: 1px solid red;

父級(jí)元素設(shè)置為flex容器,子級(jí)不做處理(支持IE10+)
display: flex;
justify-content:center;

(垂直居中)

父級(jí)元素添加屬性：position:relative;
子級(jí)添加屬性：position: absolute; margin: auto 0;

父級(jí)元素設(shè)置為表格屬性：
display: table-cell;
vertical-align: middle;

父級(jí)元素設(shè)置彈性布局：
display: flex; 
align-items:center;(加上justify-content:center;可以實(shí)現(xiàn)水平垂直居中)

居中浮動(dòng)元素：

（這個(gè)要根據(jù)寬高計(jì)算margin具體的值）
border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px; 

絕對(duì)定位的左右居中：

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0; 

7.簡(jiǎn)述display的取值底挫？

• none:此元素不會(huì)被顯示恒傻。
• block:此元素將顯示為塊級(jí)元素，前后會(huì)帶有換行符建邓。
• inline:默認(rèn)盈厘。此元素會(huì)被顯示為內(nèi)聯(lián)元素，前后沒有換行符官边。
• inline-block:行內(nèi)塊元素扑庞。（CSS2.1 新增的值）
• table:此元素會(huì)作為塊級(jí)表格來顯示（類似 <table>），前后帶有換行符拒逮。
• inline-table:此元素會(huì)作為內(nèi)聯(lián)表格來顯示（類似 <table>）罐氨，前后沒有換行符。
• list-item:此元素會(huì)作為列表顯示滩援。
• flex:設(shè)置為伸縮布局栅隐。
• inherit:規(guī)定應(yīng)該從父元素繼承 display 屬性的值。
• 還有一些不常用的W3school

8.簡(jiǎn)述position的取值玩徊？

• inherit:規(guī)定應(yīng)該從父元素繼承 position 屬性的值租悄。
• static:默認(rèn)值，沒有定位恩袱，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）泣棋。
• relative:生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位畔塔。(不脫離文檔流潭辈，子絕父相)
• absolute:生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位澈吨。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定把敢。
• fixed:生成絕對(duì)定位（固定定位）的元素，相對(duì)于瀏覽器窗口進(jìn)行定位谅辣。
  元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定修赞。

9.CSS3有哪些新特性？

• 文字陰影：text-shadow： 5px 5px 5px #FF0000;（水平陰影桑阶，垂直陰影柏副，模糊距離勾邦，陰影顏色）
• @Font-face 特性：用來加載字體樣式，而且它還能夠加載服務(wù)器端的字體文件割择，讓客戶端顯示客戶端所沒有安裝的字體眷篇。
• 圓角：border-radius: 10px;
• CSS3 的漸變效果：background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
  這里 linear 表示線性漸變，從左到右锨推，由藍(lán)色（#2A8BBE）到紅色（#FE280E）的漸變铅歼。
• word-wrap（對(duì)長(zhǎng)的不可分割單詞換行）word-wrap：break-word公壤；
• 媒體查詢：@media 定義兩套css换可，當(dāng)瀏覽器的尺寸變化時(shí)會(huì)采用不同的屬性
• 特效動(dòng)畫：Transition 對(duì)象變換時(shí)的過渡效果；Transforms 2D轉(zhuǎn)換效果厦幅，取值translate（水平移動(dòng)）沾鳄、rotate（旋轉(zhuǎn)）、scale（伸縮）确憨、skew（傾斜）译荞；Animation（@keyframes 自定義動(dòng)畫名）
  還有很多不一一列舉

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

該布局模型的目的是提供一種更加高效的方式來對(duì)容器中的條目進(jìn)行布局休弃、對(duì)齊和分配空間吞歼。在傳統(tǒng)的布局方式中，block 布局是把塊在垂直方向從上到下依次排列的塔猾；而 inline 布局則是在水平方向來排列篙骡。彈性盒布局并沒有這樣內(nèi)在的方向限制，可以由開發(fā)人員自由操作丈甸。目前兼容ie9以上糯俗。
試用場(chǎng)景：彈性布局適合于移動(dòng)前端開發(fā)，在Android和ios上也完美支持睦擂。
參考Flexbox 布局完全指南(圖解 Flexbox 布局詳細(xì)教程）得湘、
阮一峰的flex系列

11.用純CSS創(chuàng)建一個(gè)三角形的原理是什么？

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

寬度和高度設(shè)置為0顿仇，然后設(shè)置邊框樣式淘正。

12.一個(gè)滿屏品字布局如何設(shè)計(jì)?

• 第一種真正的品字：
  三塊高寬是確定的；
  上面那塊用margin: 0 auto;居中臼闻；
  下面兩塊用float或者inline-block不換行跪帝；
  用margin調(diào)整位置使他們居中。

• 第二種全屏的品字布局:
  上面的div設(shè)置成100%些阅，下面的div分別寬50%伞剑，然后使用float或者inline使其不換行。

13.常見的兼容性問題市埋？

• 不同瀏覽器的標(biāo)簽?zāi)J(rèn)的margin和padding不一樣黎泣。*{margin:0;padding:0;}
• IE6雙邊距bug：塊屬性標(biāo)簽float后恕刘，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大抒倚。hack：display:inline;將其轉(zhuǎn)化為行內(nèi)屬性褐着。
• 設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6托呕，IE7中高度超出自己設(shè)置高度含蓉。hack：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度。
• IE下项郊，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性馅扣；Firefox下，只能使用getAttribute()獲取自定義屬性着降。解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性差油。
• Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決
• 超鏈接訪問過后hover樣式就不出現(xiàn)了，被點(diǎn)擊訪問過的超鏈接樣式不再具有hover和active了任洞。解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

14.為什么要初始化CSS樣式?

因?yàn)闉g覽器的兼容問題蓄喇，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，（margin,padding,borer,font等屬性的定義各有不同）交掏，如果沒對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面顯示差異妆偏。
一般使用Normalize.css

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

一般來說盅弛，盒子本身為其子孫建立了 containing block钱骂，用來計(jì)算內(nèi)部盒子的位置、大小熊尉，而對(duì)內(nèi)部的盒子罐柳，具體采用哪個(gè) containing block 來計(jì)算，需要分情況來討論狰住，無論屬于哪種张吉，都要先找到其祖先元素中最近的 position 值不為 static 的元素，

• 若此元素為 inline 元素催植，則 containing block 為能夠包含這個(gè)元素生成的第一個(gè)和最后一個(gè) inline box 的 padding box (除 margin, border 外的區(qū)域) 的最小矩形肮蛹；
• 否則,則由這個(gè)祖先元素的 padding box 構(gòu)成。
• 如果都找不到创南，則為 initial containing block伦忠。

補(bǔ)充：

• static(默認(rèn)的)/relative：簡(jiǎn)單說就是它的父元素的內(nèi)容框（即去掉padding的部分）
• absolute: 向上找最近的定位為absolute/relative的元素
• fixed: 它的containing block一律為根元素(html/body)

16.CSS里的visibility屬性有個(gè)collapse屬性值？在不同瀏覽器下以后什么區(qū)別稿辙？

visibility：visible| hidden| collapse| inherit昆码；
當(dāng)一個(gè)元素的visibility屬性被設(shè)置成collapse值后，對(duì)于一般的元素，它的表現(xiàn)跟hidden是一樣的赋咽。
1.chrome中旧噪，使用collapse值和使用hidden沒有區(qū)別。
2.firefox脓匿，opera和IE淘钟，使用collapse值和使用display：none沒有什么區(qū)別。

17.visibility:hidden;和display:none的區(qū)別?

• 1陪毡、display: none隱藏后的元素不占據(jù)任何空間（回流+重繪）米母，而visibility: hidden隱藏后的元素空間依舊保留（重繪） ;
• 2、visibility具有繼承性毡琉，給父元素設(shè)置visibility:hidden;子元素也會(huì)繼承這個(gè)屬性铁瞒。但是如果重新給子元素設(shè)置visibility: visible,則子元素又會(huì)顯示出來。這個(gè)和display: none有著質(zhì)的區(qū)別绊起。
• 3精拟、visibility: hidden不會(huì)影響計(jì)數(shù)器的計(jì)數(shù)燎斩，如圖所示虱歪，visibility: hidden雖然讓一個(gè)元素不見了，但是其計(jì)數(shù)器仍在運(yùn)行栅表。這和display: none完全不一樣笋鄙。
• 4、CSS3的transition支持visibility屬性怪瓶，但是并不支持display萧落，由于transition可以延遲執(zhí)行，因此可以配合visibility使用純css實(shí)現(xiàn)hover延時(shí)顯示效果洗贰。提高用戶體驗(yàn)找岖。

拓展：回流和重繪×沧蹋回流當(dāng)render tree中的一部分或全部因?yàn)樵氐囊?guī)模尺寸许布、布局、隱藏等改變時(shí)绎晃，瀏覽器重新渲染部分DOM或全部DOM的過程蜜唾。回流也被稱為重排庶艾，其實(shí)從字面上來看袁余，重排更容易讓人形象易懂（即重新排版整個(gè)頁面）。當(dāng)頁面元素樣式改變不影響元素在文檔流中的位置時(shí)（如background-color咱揍，border-color颖榜，visibility），瀏覽器只會(huì)將新樣式賦予元素并進(jìn)行重新繪制操作⊙谕辏回流一定會(huì)觸發(fā)重繪蟹地，而重繪不一定會(huì)回流。
詳細(xì)介紹你真的了解回流和重繪嗎

18.position跟display藤为、overflow怪与、float這些特性相互疊加后會(huì)怎么樣？

• display屬性規(guī)定元素應(yīng)該生成的框的類型缅疟；
• position屬性規(guī)定元素的定位類型分别；
• float屬性是一種布局方式，定義元素在哪個(gè)方向浮動(dòng)存淫。

類似于優(yōu)先級(jí)機(jī)制：position：absolute/fixed優(yōu)先級(jí)最高耘斩，有他們?cè)跁r(shí)，float不起作用桅咆，display值需要調(diào)整括授。float 或者absolute定位的元素，只能是塊元素或表格岩饼。

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

BFC規(guī)定了內(nèi)部的Block Box如何布局。定位方案：

• 內(nèi)部的Box會(huì)在垂直方向上一個(gè)接一個(gè)放置籍茧。
• Box垂直方向的距離由margin決定版述，屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊。
• 每個(gè)元素的margin box 的左邊寞冯，與包含塊border box的左邊相接觸渴析。
• BFC的區(qū)域不會(huì)與float box重疊。
• BFC是頁面上的一個(gè)隔離的獨(dú)立容器吮龄，容器里面的子元素不會(huì)影響到外面的元素俭茧。
• 計(jì)算BFC的高度時(shí)，浮動(dòng)元素也會(huì)參與計(jì)算漓帚。

滿足下列條件之一就可觸發(fā)BFC：

• 根元素母债，即html
• float的值不為none（默認(rèn)）
• overflow的值不為visible（默認(rèn)）
• display的值為inline-block、table-cell胰默、table-caption
• position的值為absolute或fixed

可參考三元大佬總結(jié)的BFC

20.為什么會(huì)出現(xiàn)浮動(dòng)和什么時(shí)候需要清除浮動(dòng)场斑？清除浮動(dòng)的方式？

浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留牵署。由于浮動(dòng)元素不在文檔流中漏隐，所以文檔流的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。浮動(dòng)元素會(huì)漂浮在文檔流的塊框上奴迅。

浮動(dòng)帶來的問題：

• 父元素的高度無法被撐開青责，影響與父元素同級(jí)的元素
• 與浮動(dòng)元素同級(jí)的非浮動(dòng)元素（內(nèi)聯(lián)元素）會(huì)跟隨其后
• 若非第一個(gè)元素浮動(dòng)挺据，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁面顯示的結(jié)構(gòu)脖隶。

清除浮動(dòng)的方式：

• 父級(jí)div定義height
• 最后一個(gè)浮動(dòng)元素后加空div標(biāo)簽 并添加樣式clear:both扁耐。
• 包含浮動(dòng)元素的父標(biāo)簽添加樣式overflow為hidden或auto。
• 父級(jí)div定義zoom

21.上下margin重合的問題

有以下情況：
1产阱、兄弟級(jí)的塊之間婉称，margin這個(gè)屬性上下邊距，經(jīng)常會(huì)發(fā)生重疊的情況构蹬，以數(shù)值大的為準(zhǔn)王暗，而不會(huì)相加。
2庄敛、父子級(jí)的塊之間俗壹，子級(jí)的上下margin會(huì)與父級(jí)上下margin重疊，以數(shù)值大的為準(zhǔn)藻烤，而不會(huì)相加绷雏。

如何解決：
第一種情況：

• 設(shè)置float
• 設(shè)置inline-block

第二種情況：

• 父級(jí)加overflow:hidden
• 父級(jí)加padding
• 父級(jí)加border
• 子級(jí)加position:absolute

22.設(shè)置元素浮動(dòng)后，該元素的display值是多少怖亭？

會(huì)自動(dòng)變成display:block;

23.移動(dòng)端布局媒體查詢

通過媒體查詢可以為不同大小和尺寸的媒體定義不同的css涎显，適應(yīng)相應(yīng)的設(shè)備的顯示。

• <head>里邊<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>
• CSS : @media only screen and (max-device-width:480px) {/css樣式/}

24.CSS預(yù)處理器

less sass

25.CSS優(yōu)化依许、提高性能的方法有哪些棺禾？

• 避免過度約束
• 避免后代選擇符
• 避免鏈?zhǔn)竭x擇符
• 使用緊湊的語法
• 避免不必要的命名空間
• 避免不必要的重復(fù)
• 最好使用表示語義的名字缀蹄。一個(gè)好的類名應(yīng)該是描述他是什么而不是像什么
• 避免峭跳！important，可以選擇其他選擇器
• 盡可能的精簡(jiǎn)規(guī)則缺前，可以合并不同類里的重復(fù)規(guī)則

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

CSS選擇器的解析是從右向左解析的蛀醉。若從左向右的匹配，發(fā)現(xiàn)不符合規(guī)則衅码，需要進(jìn)行回溯拯刁，會(huì)損失很多性能。若從右向左匹配逝段，先找到所有的最右節(jié)點(diǎn)垛玻，對(duì)于每一個(gè)節(jié)點(diǎn)，向上尋找其父節(jié)點(diǎn)直到找到根元素或滿足條件的匹配規(guī)則奶躯，則結(jié)束這個(gè)分支的遍歷帚桩。兩種匹配規(guī)則的性能差別很大，是因?yàn)閺挠蚁蜃蟮钠ヅ湓诘谝徊骄秃Y選掉了大量的不符合條件的最右節(jié)點(diǎn)（葉子節(jié)點(diǎn)）嘹黔，而從左向右的匹配規(guī)則的性能都浪費(fèi)在了失敗的查找上面账嚎。
而在 CSS 解析完畢后，需要將解析的結(jié)果與 DOM Tree 的內(nèi)容一起進(jìn)行分析建立一棵 Render Tree，最終用來進(jìn)行繪圖郭蕉。在建立 Render Tree 時(shí)（WebKit 中的「Attachment」過程）疼邀，瀏覽器就要為每個(gè) DOM Tree 中的元素根據(jù) CSS 的解析結(jié)果（Style Rules）來確定生成怎樣的 Render Tree。

27.在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體召锈？為什么呢旁振？

使用偶數(shù)字體。偶數(shù)字號(hào)相對(duì)更容易和 web 設(shè)計(jì)的其他部分構(gòu)成比例關(guān)系涨岁。Windows 自帶的點(diǎn)陣宋體（中易宋體）從 Vista 開始只提供 12规求、14、16 px 這三個(gè)大小的點(diǎn)陣卵惦，而 13阻肿、15、17 px時(shí)用的是小一號(hào)的點(diǎn)沮尿。（即每個(gè)字占的空間大了 1 px丛塌，但點(diǎn)陣沒變），于是略顯稀疏畜疾。

28.margin和padding分別適合什么場(chǎng)景使用赴邻？

何時(shí)使用margin：

• 需要在border外側(cè)添加空白
• 空白處不需要背景色
• 上下相連的兩個(gè)盒子之間的空白，需要相互抵消時(shí)啡捶。

何時(shí)使用padding：

• 需要在border內(nèi)側(cè)添加空白
• 空白處需要背景顏色
• 上下相連的兩個(gè)盒子的空白姥敛，希望為兩者之和。

兼容性的問題：在IE5 IE6中瞎暑，為float的盒子指定margin時(shí)彤敛，左側(cè)的margin可能會(huì)變成兩倍的寬度。通過改變padding或者指定盒子的display：inline解決了赌。

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

當(dāng)按百分比設(shè)定一個(gè)元素的寬度時(shí)，它是相對(duì)于父容器的寬度計(jì)算的勿她，但是袄秩，對(duì)于一些表示豎向距離的屬性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等逢并，當(dāng)按百分比設(shè)定它們時(shí)之剧，依據(jù)的也是父容器的寬度，而不是高度砍聊。

30.全屏滾動(dòng)的原理是什么背稼？用到了CSS的哪些屬性？

• 原理：有點(diǎn)類似于輪播辩恼，整體的元素一直排列下去雇庙，假設(shè)有5個(gè)需要展示的全屏頁面谓形，那么高度是500%，只是展示100%疆前，剩下的可以通過transform進(jìn)行y軸定位寒跳，也可以通過margin-top實(shí)現(xiàn)

• overflow：hidden；transition：all 1000ms ease竹椒；

31.什么是響應(yīng)式設(shè)計(jì)童太？響應(yīng)式設(shè)計(jì)的基本原理是什么？如何兼容低版本的IE胸完？

• 響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive Web design)是一個(gè)網(wǎng)站能夠兼容多個(gè)終端书释，而不是為每一個(gè)終端做一個(gè)特定的版本。
• 基本原理是通過媒體查詢檢測(cè)不同的設(shè)備屏幕尺寸做處理赊窥。
• 頁面頭部必須有meta聲明的viewport爆惧。

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

32.視差滾動(dòng)效果？

視差滾動(dòng)（Parallax Scrolling）通過在網(wǎng)頁向下滾動(dòng)的時(shí)候锨能，控制背景的移動(dòng)速度比前景的移動(dòng)速度慢來創(chuàng)建出令人驚嘆的3D效果扯再。

CSS3實(shí)現(xiàn)
優(yōu)點(diǎn)：開發(fā)時(shí)間短、性能和開發(fā)效率比較好址遇，缺點(diǎn)是不能兼容到低版本的瀏覽器

jQuery實(shí)現(xiàn)
通過控制不同層滾動(dòng)速度熄阻，計(jì)算每一層的時(shí)間，控制滾動(dòng)效果倔约。
優(yōu)點(diǎn)：能兼容到各個(gè)版本的秃殉，效果可控性好
缺點(diǎn)：開發(fā)起來對(duì)制作者要求高

插件實(shí)現(xiàn)方式
例如：parallax-scrolling，兼容性好

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

• 單冒號(hào)(:)用于CSS3偽類钾军，雙冒號(hào)(::)用于CSS3偽元素。
• ::before就是以一個(gè)子元素的存在乒省，定義在元素主體內(nèi)容之前的一個(gè)偽元素巧颈。并不存在于dom之中，只存在在頁面之中袖扛。
• :before 和 :after 這兩個(gè)偽元素，是在CSS2.1里新出現(xiàn)的十籍。起初蛆封，偽元素的前綴使用的是單冒號(hào)語法，但隨著Web的進(jìn)化勾栗，在CSS3的規(guī)范里惨篱，偽元素的語法被修改成使用雙冒號(hào)，成為::before ::after

34.對(duì)line-height是如何理解的?

• 行高是指一行文字的高度围俘，具體說是兩行文字間基線的距離砸讳。CSS中起高度作用的是height和line-height琢融，沒有定義height屬性，最終其表現(xiàn)作用一定是line-height簿寂。
• 單行文本垂直居中：把line-height值設(shè)置為height一樣大小的值可以實(shí)現(xiàn)單行文字的垂直居中漾抬，其實(shí)也可以把height刪除。
• 多行文本垂直居中：需要設(shè)置display屬性為inline-block常遂。

35.怎么讓Chrome支持小于12px 的文字纳令？

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是縮放比例

36.讓頁面里的字體變清晰，變細(xì)用CSS怎么做克胳？

-webkit-font-smoothing在window系統(tǒng)下沒有起作用平绩，但是在IOS設(shè)備上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑漠另。

37.position:fixed;在android下無效怎么處理捏雌？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

38.如果需要手動(dòng)寫動(dòng)畫，你認(rèn)為最小時(shí)間間隔是多久笆搓，為什么腹忽？

多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次砚作，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms窘奏。

39.li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法葫录？

行框的排列會(huì)受到中間空白（回車空格）等的影響着裹，因?yàn)榭崭褚矊儆谧址?這些空白也會(huì)被應(yīng)用樣式，占據(jù)空間米同，所以會(huì)有間隔骇扇，把字符大小設(shè)為0，就沒有空格了面粮。
解決方法：

• 可以將<li>代碼全部寫在一排
• 浮動(dòng)li中float：left
• 在ul中用font-size：0（谷歌不支持）少孝；可以使用letter-space：-3px;

40.display:inline-block 什么時(shí)候會(huì)顯示間隙？

• 有空格時(shí)候會(huì)有間隙 解決：移除空格
• margin正值的時(shí)候 解決：margin使用負(fù)值
• 使用font-size時(shí)候 解決：font-size:0熬苍、letter-spacing稍走、word-spacing

41.有一個(gè)高度自適應(yīng)的div，里面有兩個(gè)div柴底，一個(gè)高度100px婿脸，希望另一個(gè)填滿剩下的高度

外層div使用position：relative；高度要求自適應(yīng)的div使用position: absolute; top: 100px; bottom: 0; left: 0

42.png柄驻、jpg狐树、gif 這些圖片格式解釋一下，分別什么時(shí)候用鸿脓。還有webp抑钟？

• png是便攜式網(wǎng)絡(luò)圖片（Portable Network Graphics）是一種無損數(shù)據(jù)壓縮位圖文件格式.優(yōu)點(diǎn)是：壓縮比高涯曲，色彩好。 大多數(shù)地方都可以用在塔。

• jpg是一種針對(duì)相片使用的一種失真壓縮方法幻件，是一種破壞性的壓縮，在色調(diào)及顏色平滑變化做的不錯(cuò)心俗。在www上傲武，被用來儲(chǔ)存和傳輸照片的格式。

• gif是一種位圖文件格式城榛，以8位色重現(xiàn)真色彩的圖像揪利。可以實(shí)現(xiàn)動(dòng)畫效果.

• webp格式是谷歌在2010年推出的圖片格式狠持，壓縮率只有jpg的2/3疟位，大小比png小了45%。缺點(diǎn)是壓縮的時(shí)間更久了喘垂，兼容性不好甜刻，目前谷歌和opera支持。

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

頁面加載自上而下 當(dāng)然是先加載樣式得院。
寫在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)致的頁面閃爍問題）

44.CSS屬性overflow屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理?

參數(shù)是scroll時(shí)候，必會(huì)出現(xiàn)滾動(dòng)條鸭限。
參數(shù)是auto時(shí)候箫老，子元素內(nèi)容大于父元素時(shí)出現(xiàn)滾動(dòng)條铜异。
參數(shù)是visible時(shí)候授段，溢出的內(nèi)容出現(xiàn)在父元素之外泡仗。
參數(shù)是hidden時(shí)候，溢出隱藏赡麦。

45.闡述一下CSS Sprites（精靈圖）

將一個(gè)頁面涉及到的所有圖片都包含到一張大圖中去朴皆，然后利用CSS的 background-image，background- repeat隧甚，background-position 的組合進(jìn)行背景定位车荔。利用CSS Sprites能很好地減少網(wǎng)頁的http請(qǐng)求，從而大大的提高頁面的性能戚扳；CSS Sprites能減少圖片的字節(jié)。

文章持續(xù)更新中....