CSS

• 介紹一下標(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ì)算？

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

• CSS3新增偽類有那些？

    	舉例：
    	p:first-of-type	選擇屬于其父元素的首個(gè) 
   元素的每個(gè) 
   元素。
    	p:last-of-type	選擇屬于其父元素的最后 
   元素的每個(gè) 
   元素。
        p:only-of-type	選擇屬于其父元素唯一的 
   元素的每個(gè) 
   元素。
    	p:only-child		選擇屬于其父元素的唯一子元素的每個(gè) 
   元素。
    	p:nth-child(2)	選擇屬于其父元素的第二個(gè)子元素的每個(gè) 
   元素。
  
    	::after			在元素之前添加內(nèi)容,也可以用來做清除浮動(dòng)。
    	::before			在元素之后添加內(nèi)容
        :enabled  		
    	:disabled 		控制表單控件的禁用狀態(tài)。
    	:checked        單選框或復(fù)選框被選中。
  

• 如何居中div？

  • 水平居中：給div設(shè)置一個(gè)寬度，然后添加margin:0 auto屬性

     div{
     	width:200px;
     	margin:0 auto;
      }
    

  • 讓絕對定位的div居中

     div {
     	position: absolute;
     	width: 300px;
     	height: 300px;
     	margin: auto;
     	top: 0;
     	left: 0;
     	bottom: 0;
     	right: 0;
     	background-color: pink;	/* 方便看效果 */
     }
    

  • 水平垂直居中一

     確定容器的寬高 寬500 高 300 的層
     設(shè)置層的外邊距
    
     div {
     	position: relative;		/* 相對定位或絕對定位均可 */
     	width:500px;
     	height:300px;
     	top: 50%;
     	left: 50%;
     	margin: -150px 0 0 -250px;     	/* 外邊距為自身寬高的一半 */
     	background-color: pink;	 	/* 方便看效果 */
    
      }
    

  • 水平垂直居中二

     未知容器的寬高，利用 `transform` 屬性
    
     div {
     	position: absolute;		/* 相對定位或絕對定位均可 */
     	width:500px;
     	height:300px;
     	top: 50%;
     	left: 50%;
     	transform: translate(-50%, -50%);
     	background-color: pink;	 	/* 方便看效果 */
    
     }
    

  • 水平垂直居中三

     利用 flex 布局
     實(shí)際使用時(shí)應(yīng)考慮兼容性
    
     .container {
     	display: flex;
     	align-items: center; 		/* 垂直居中 */
     	justify-content: center;	/* 水平居中 */
    
     }
     .container div {
     	width: 100px;
     	height: 100px;
     	background-color: pink;		/* 方便看效果 */
     }  
    

• display有哪些值？說明他們的作用。

      block       	塊類型。默認(rèn)寬度為父元素寬度，可設(shè)置寬高，換行顯示。
      none        	元素不顯示，并從文檔流中移除。
      inline      	行內(nèi)元素類型。默認(rèn)寬度為內(nèi)容寬度，不可設(shè)置寬高，同行顯示。
      inline-block  默認(rèn)寬度為內(nèi)容寬度，可以設(shè)置寬高，同行顯示。
      list-item   	象塊類型元素一樣顯示，并添加樣式列表標(biāo)記。
      table       	此元素會(huì)作為塊級表格來顯示。
      inherit     	規(guī)定應(yīng)該從父元素繼承 display 屬性的值。
  

• position的值relative和absolute定位原點(diǎn)是？

      absolute
    	生成絕對定位的元素，相對于值不為 static的第一個(gè)父元素進(jìn)行定位。
      fixed （老IE不支持）
    	生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。
      relative
    	生成相對定位的元素，相對于其正常位置進(jìn)行定位。
      static
    	默認(rèn)值。沒有定位，元素出現(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）
      陰影和反射	（ShadowReflect）
      文字特效		（text-shadow、）
      文字渲染		（Text-decoration）
      線性漸變		（gradient）
      旋轉(zhuǎn)		 	（transform）
      縮放,定位,傾斜,動(dòng)畫,多背景
      例如:transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)Animation:
  

• 請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？

     一個(gè)用于頁面布局的全新CSS3功能，F(xiàn)lexbox可以把列表放在同一個(gè)方向（從上到下排列，從左到右），并讓列表能延伸到占用可用的空間。
     較為復(fù)雜的布局還可以通過嵌套一個(gè)伸縮容器（flex container）來實(shí)現(xiàn)。
     采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。
     它的所有子元素自動(dòng)成為容器成員，稱為Flex項(xiàng)目（flex item），簡稱"項(xiàng)目"。
     常規(guī)布局是基于塊和內(nèi)聯(lián)流方向，而Flex布局是基于flex-flow流可以很方便的用來做局中，能對不同屏幕大小自適應(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ì)?

    簡單的方式：
    	上面的div寬100%，
    	下面的兩個(gè)div分別寬50%，
    	然后用float或者inline使其不換行即可
  

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

    利用padding-bottom|margin-bottom正負(fù)值相抵；
    設(shè)置父容器設(shè)置超出隱藏（overflow:hidden），這樣子父容器的高度就還是它里面的列沒有設(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;}來統(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è)符號只有ie6會(huì)識別)
  
      漸進(jìn)識別的方式，從總體中逐漸排除局部。
  
      首先，巧妙的使用“9”這一標(biāo)記，將IE游覽器從所有情況中分離出來。
      接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識別。
  
      css
          .bb{
              background-color:red;/*所有識別*/
    	      background-color:#00deff9; /*IE6、7、8識別*/
    	      +background-color:#a200ff;/*IE6、7識別*/
    	      _background-color:#1e0bd1;/*IE6識別*/
          }
  
  
    *  IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,
       也可以使用getAttribute()獲取自定義屬性;
       Firefox下,只能使用getAttribute()獲取自定義屬性。
       解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性。
  
    *  IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;
       Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性。
  
    *  解決方法：（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請求數(shù)。
  
    *  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 :  a:link {} a:visited {} a:hover {} a:active {}
  

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

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

• 為什么要初始化CSS樣式。

    - 因?yàn)闉g覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面顯示差異。
  
    - 當(dāng)然，初始化樣式會(huì)對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
  
    最簡單的初始化方法： * {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, 5b8b4f53; }
    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ì)算方式跟正常流有什么不同？

    無論屬于哪種，都要先找到其祖先元素中最近的 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：簡單說就是它的父元素的內(nèi)容框（即去掉padding的部分）
    2. absolute: 向上找最近的定位為absolute/relative的元素
    3. fixed: 它的containing block一律為根元素(html/body)，根元素也是initial containing block
  

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

  對于普通元素visibility:collapse;會(huì)將元素完全隱藏,不占據(jù)頁面布局空間,與display:none;表現(xiàn)相同. 如果目標(biāo)元素為table,visibility:collapse;將table隱藏,但是會(huì)占據(jù)頁面布局空間. 僅在Firefox下起作用,IE會(huì)顯示元素,Chrome會(huì)將元素隱藏,但是占據(jù)空間.

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

  如果元素的display為none,那么元素不被渲染,position,float不起作用,如果元素?fù)碛衟osition:absolute;或者position:fixed;屬性那么元素將為絕對定位,float不起作用.如果元素float屬性不是none,元素會(huì)脫離文檔流,根據(jù)float屬性值來顯示.有浮動(dòng),絕對定位,inline-block屬性的元素,margin不會(huì)和垂直方向上的其他元素margin折疊.

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

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

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

  清除浮動(dòng)是為了清除使用浮動(dòng)元素產(chǎn)生的影響。浮動(dòng)的元素，高度會(huì)塌陷，而高度的塌陷使我們頁面后面的布局不能正常顯示。

    1、父級div定義height；
    2、父級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)元素的父級div定義偽類:after
    	&::after,&::before{
    	    content: " ";
            visibility: hidden;
            display: block;
            height: 0;
            clear: both;
    	}
  
    解析原理：
    1) display:block 使生成的元素以塊級元素顯示,占滿剩余空間;
    2) height:0 避免生成內(nèi)容破壞原有布局的高度。
    3) visibility:hidden 使生成的內(nèi)容不可見，并允許可能被生成內(nèi)容蓋住的內(nèi)容可以進(jìn)行點(diǎn)擊和交互;
    4）通過 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。
  
    通過分析發(fā)現(xiàn)，除了clear：both用來閉合浮動(dòng)的，其他代碼無非都是為了隱藏掉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è)置或檢索對象的縮放比例。解決ie下比較奇葩的bug。
    譬如外邊距（margin）的重疊，浮動(dòng)清除，觸發(fā)ie的haslayout屬性等。
  
    來龍去脈大概如下：
    當(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ò)大的問題。
  
    Zoom屬是IE瀏覽器的專有屬性，火狐和老版本的webkit核心的瀏覽器都不支持這個(gè)屬性。然而，zoom現(xiàn)在已經(jīng)被逐步標(biāo)準(zhǔn)化，出現(xiàn)在 CSS 3.0 規(guī)范草案中。
  
    目前非ie由于不支持這個(gè)屬性，它們又是通過什么屬性來實(shí)現(xiàn)元素的縮放呢？
    可以通過css3里面的動(dòng)畫屬性scale進(jìn)行縮放。
  

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

  假設(shè)你現(xiàn)在正用一臺顯示設(shè)備來閱讀這篇文章，同時(shí)你也想把它投影到屏幕上，或者打印出來， 而顯示設(shè)備、屏幕投影和打印等這些媒介都有自己的特點(diǎn)，CSS就是為文檔提供在不同媒介上展示的適配方法

  當(dāng)媒體查詢?yōu)檎鏁r(shí)，相關(guān)的樣式表或樣式規(guī)則會(huì)按照正常的級聯(lián)規(guī)被應(yīng)用。 當(dāng)媒體查詢返回假， 標(biāo)簽上帶有媒體查詢的樣式表 仍將被下載 （只不過不會(huì)被應(yīng)用）。

  包含了一個(gè)媒體類型和至少一個(gè)使用 寬度、高度和顏色等媒體屬性來限制樣式表范圍的表達(dá)式。 CSS3加入的媒體查詢使得無需修改內(nèi)容便可以使樣式應(yīng)用于某些特定的設(shè)備范圍。

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

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

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

    關(guān)鍵選擇器（key selector）。選擇器的最后面的部分為關(guān)鍵選擇器（即用來匹配目標(biāo)元素的部分）；
    如果規(guī)則擁有 ID 選擇器作為其關(guān)鍵選擇器，則不要為規(guī)則增加標(biāo)簽。過濾掉無關(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對css進(jìn)行語法檢查、自動(dòng)補(bǔ)前綴、打包壓縮、自動(dòng)優(yōu)雅降級）；
  

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

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

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

• margin和padding分別適合什么場景使用？

    margin是用來隔開元素與元素的間距；padding是用來隔開元素與內(nèi)容的間隔。
    margin用于布局分開元素使元素與元素互不相干；
    padding用于元素與內(nèi)容之間的間隔，讓內(nèi)容（文字）與（包裹）元素之間有一段
  

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

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

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

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

• 視差滾動(dòng)效果，如何給每頁做不同的動(dòng)畫？（回到頂部，向下滑動(dòng)要再次出現(xiàn)，和只出現(xiàn)一次分別怎么做？）

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

    單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素。（偽元素由雙冒號和偽元素名稱組成）
    雙冒號是在當(dāng)前規(guī)范中引入的，用于區(qū)分偽類和偽元素。不過瀏覽器需要同時(shí)支持舊的已經(jīng)存在的偽元素寫法，
    比如:first-line、:first-letter、:before、:after等，
    而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號的寫法。
  
    想讓插入的內(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);
    }
  

• 你對line-height是如何理解的？

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

    自動(dòng)變成了 display:block
  

• 怎么讓Chrome支持小于12px 的文字？

    1、用圖片：如果是內(nèi)容固定不變情況下，使用將小于12px文字內(nèi)容切出做圖片，這樣不影響兼容也不影響美觀。
    2、使用12px及12px以上字體大?。簽榱思嫒莞鞔笾髁鳛g覽器，建議設(shè)計(jì)美工圖時(shí)候設(shè)置大于或等于12px的字體大小，如果是接單的這個(gè)時(shí)候就需要給客戶講解小于12px瀏覽器不兼容等事宜。
    3、繼續(xù)使用小于12px字體大小樣式設(shè)置：如果不考慮chrome可以不用考慮兼容，同時(shí)在設(shè)置小于12px對象設(shè)置-webkit-text-size-adjust:none，做到最大兼容考慮。
    4、使用12px以上字體：為了兼容、為了代碼更簡單 從新考慮權(quán)重下兼容性。
  

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

    -webkit-font-smoothing: antialiased;
  

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

    傾斜的字體樣式
  

• position:fixed;在android下無效怎么處理？

    fixed的元素是相對整個(gè)頁面固定位置的，你在屏幕上滑動(dòng)只是在移動(dòng)這個(gè)所謂的viewport，
    原來的網(wǎng)頁還好好的在那，fixed的內(nèi)容也沒有變過位置，
    所以說并不是iOS不支持fixed，只是fixed的元素不是相對手機(jī)屏幕固定的。
    
  

• 如果需要手動(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)的問題怎么處理？

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

• png、jpg、gif 這些圖片格式解釋一下，分別什么時(shí)候用。有沒有了解過webp？

• 什么是Cookie 隔離？（或者說：請求資源的時(shí)候不要讓它帶cookie怎么做）

    如果靜態(tài)文件都放在主域名下，那靜態(tài)文件請求的時(shí)候都帶有的cookie的數(shù)據(jù)提交給server的，非常浪費(fèi)流量，
    所以不如隔離開。
  
    因?yàn)閏ookie有域的限制，因此不能跨域提交請求，故使用非主要域名的時(shí)候，請求頭中就不會(huì)帶有cookie數(shù)據(jù)，
    這樣可以降低請求頭的大小，降低請求時(shí)間，從而達(dá)到降低整體請求延時(shí)的目的。
  
    同時(shí)這種方式不會(huì)將cookie傳入Web Server，也減少了Web Server對cookie的處理分析環(huán)節(jié)，
    提高了webserver的http請求的解析速度。
  

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

• 什么是CSS 預(yù)處理器 / 后處理器？

    - 預(yù)處理器例如：LESS、Sass、Stylus，用來預(yù)編譯Sass或less，增強(qiáng)了css代碼的復(fù)用性，
      還有層級、mixin、變量、循環(huán)、函數(shù)等，具有很方便的UI組件模塊化開發(fā)能力，極大的提高工作效率。
  
    - 后處理器例如：PostCSS，通常被視為在完成的樣式表中根據(jù)CSS規(guī)范處理CSS，讓其更有效；目前最常做的
      是給CSS屬性添加瀏覽器私有前綴，實(shí)現(xiàn)跨瀏覽器兼容性的問題。
  

• rem布局的優(yōu)缺點(diǎn)

JavaScript

• 介紹js的基本數(shù)據(jù)類型。

    Undefined、Null、Boolean、Number、String、
    ECMAScript 2015 新增:Symbol(創(chuàng)建后獨(dú)一無二且不可變的數(shù)據(jù)類型 )
  

• 介紹js有哪些內(nèi)置對象？

   Object 是 JavaScript 中所有對象的父對象
  
   數(shù)據(jù)封裝類對象：Object、Array、Boolean、Number 和 String
   其他對象：Function、Arguments、Math、Date、RegExp、Error
  
   參考：http://www.ibm.com/developerworks/cn/web/wa-objectsinjs-v1b/index.html
  

• 說幾條寫JavaScript的基本規(guī)范？

   1.不要在同一行聲明多個(gè)變量。
   2.請使用 ===/!==來比較true/false或者數(shù)值
   3.使用對象字面量替代new Array這種形式
   4.不要使用全局函數(shù)。
   5.Switch語句必須帶有default分支
   6.函數(shù)不應(yīng)該有時(shí)候有返回值，有時(shí)候沒有返回值。
   7.For循環(huán)必須使用大括號
   8.If語句必須使用大括號
   9.for-in循環(huán)中的變量 應(yīng)該使用var關(guān)鍵字明確限定作用域，從而避免作用域污染。
  

• JavaScript原型，原型鏈 ? 有什么特點(diǎn)？

   每個(gè)對象都會(huì)在其內(nèi)部初始化一個(gè)屬性，就是prototype(原型)，當(dāng)我們訪問一個(gè)對象的屬性時(shí)，
   如果這個(gè)對象內(nèi)部不存在這個(gè)屬性，那么他就會(huì)去prototype里找這個(gè)屬性，這個(gè)prototype又會(huì)有自己的prototype，
   于是就這樣一直找下去，也就是我們平時(shí)所說的原型鏈的概念。
   關(guān)系：instance.constructor.prototype = instance.__proto__
  
   特點(diǎn)：
   JavaScript對象是通過引用來傳遞的，我們創(chuàng)建的每個(gè)新對象實(shí)體中并沒有一份屬于自己的原型副本。當(dāng)我們修改原型時(shí)，與之相關(guān)的對象也會(huì)繼承這一改變。
  
  
    當(dāng)我們需要一個(gè)屬性的時(shí)，Javascript引擎會(huì)先看當(dāng)前對象中是否有這個(gè)屬性， 如果沒有的話，
    就會(huì)查找他的Prototype對象是否有這個(gè)屬性，如此遞推下去，一直檢索到 Object 內(nèi)建對象。
   	function Func(){}
   	Func.prototype.name = "Sean";
   	Func.prototype.getInfo = function() {
   	  return this.name;
   	}
   	var person = new Func();//現(xiàn)在可以參考var person = Object.create(oldObject);
   	console.log(person.getInfo());//它擁有了Func的屬性和方法
   	//"Sean"
   	console.log(Func.prototype);
   	// Func { name="Sean", getInfo=function()}
  

• JavaScript有幾種類型的值？，你能畫一下他們的內(nèi)存圖嗎？

   棧：原始數(shù)據(jù)類型（Undefined，Null，Boolean，Number、String）
   堆：引用數(shù)據(jù)類型（對象、數(shù)組和函數(shù)）
  
   兩種類型的區(qū)別是：存儲位置不同；
   原始數(shù)據(jù)類型直接存儲在棧(stack)中的簡單數(shù)據(jù)段，占據(jù)空間小、大小固定，屬于被頻繁使用數(shù)據(jù)，所以放入棧中存儲；
   引用數(shù)據(jù)類型存儲在堆(heap)中的對象,占據(jù)空間大、大小不固定。如果存儲在棧中，將會(huì)影響程序運(yùn)行的性能；引用數(shù)據(jù)類型在棧中存儲了指針，該指針指向堆中該實(shí)體的起始地址。當(dāng)解釋器尋找引用值時(shí)，會(huì)首先檢索其在棧中的地址，取得地址后從堆中獲得實(shí)體
  

• 如何將字符串轉(zhuǎn)化為數(shù)字，例如12.3b?

    * parseFloat(12.3b);
    * 正則表達(dá)式，12.3b.match(/(d)+(.)?(d)+/g)[0] * 1, 但是這個(gè)不太靠譜，提供一種思路而已。
  

• 如何將浮點(diǎn)數(shù)點(diǎn)左邊的數(shù)每三位添加一個(gè)逗號，如12000000.11轉(zhuǎn)化為『12,000,000.11』?

    function commafy(num){
    	return num && num
    		.toString()
    		.replace(/(d)(?=(d{3})+.)/g, function($1, $2){
    			return $2 + ,;
    		});
    }
  

• 如何實(shí)現(xiàn)數(shù)組的隨機(jī)排序？

    方法一：
    	var arr = [1,2,3,4,5,6,7,8,9,10];
    	function randSort1(arr){
    		for(var i = 0,len = arr.length;i < len; i++ ){
    			var rand = parseInt(Math.random()*len);
    			var temp = arr[rand];
    			arr[rand] = arr[i];
    			arr[i] = temp;
    		}
    		return arr;
    	}
    	console.log(randSort1(arr));
    	
    方法二：
    	var arr = [1,2,3,4,5,6,7,8,9,10];
    	function randSort2(arr){
    		var mixedArray = [];
    		while(arr.length > 0){
    			var randomIndex = parseInt(Math.random()*arr.length);
    			mixedArray.push(arr[randomIndex]);
    			arr.splice(randomIndex, 1);
    		}
    		return mixedArray;
    	}
    	console.log(randSort2(arr));
  
    方法三：
    	var arr = [1,2,3,4,5,6,7,8,9,10];
    	arr.sort(function(){
    		return Math.random() - 0.5;
    	})
    	console.log(arr);
  

• Javascript如何實(shí)現(xiàn)繼承？

   1、構(gòu)造繼承
   2、原型繼承
   3、實(shí)例繼承
   4、拷貝繼承
  
   原型prototype機(jī)制或apply和call方法去實(shí)現(xiàn)較簡單，建議使用構(gòu)造函數(shù)與原型混合方式。
   
   	function Parent(){
   		this.name = wang;
   	}
  
   	function Child(){
   		this.age = 28;
   	}
   	Child.prototype = new Parent();//繼承了Parent，通過原型
  
   	var demo = new Child();
   	alert(demo.age);
   	alert(demo.name);//得到被繼承的屬性
  

• JavaScript繼承的幾種實(shí)現(xiàn)方式？

  • 參考：構(gòu)造函數(shù)的繼承，非構(gòu)造函數(shù)的繼承；

• javascript創(chuàng)建對象的幾種方式？

   javascript創(chuàng)建對象簡單的說,無非就是使用內(nèi)置對象或各種自定義對象，當(dāng)然還可以用JSON；但寫法有很多種，也能混合使用。
  
  
   1、對象字面量的方式
  
   	person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};
  
   2、用function來模擬無參的構(gòu)造函數(shù)
  
   	function Person(){}
   	var person=new Person();//定義一個(gè)function，如果使用new"實(shí)例化",該function可以看作是一個(gè)Class
   	person.name="Mark";
   	person.age="25";
   	person.work=function(){
   	alert(person.name+" hello...");
   	}
   	person.work();
  
   3、用function來模擬參構(gòu)造函數(shù)來實(shí)現(xiàn)（用this關(guān)鍵字定義構(gòu)造的上下文屬性）
  
   	function Pet(name,age,hobby){
   	   this.name=name;//this作用域：當(dāng)前對象
   	   this.age=age;
   	   this.hobby=hobby;
   	   this.eat=function(){
   	      alert("我叫"+this.name+",我喜歡"+this.hobby+",是個(gè)程序員");
   	   }
   	}
   	var maidou =new Pet("麥兜",25,"coding");//實(shí)例化、創(chuàng)建對象
   	maidou.eat();//調(diào)用eat方法
  
  
   4、用工廠方式來創(chuàng)建（內(nèi)置對象）
  
   	 var wcDog =new Object();
   	 wcDog.name="旺財(cái)";
   	 wcDog.age=3;
   	 wcDog.work=function(){
   	   alert("我是"+wcDog.name+",汪汪汪......");
   	 }
   	 wcDog.work();
  
  
   5、用原型方式來創(chuàng)建
  
   	function Dog(){
  
   	 }
   	 Dog.prototype.name="旺財(cái)";
   	 Dog.prototype.eat=function(){
   	 alert(this.name+"是個(gè)吃貨");
   	 }
   	 var wangcai =new Dog();
   	 wangcai.eat();
  
  
   5、用混合方式來創(chuàng)建
  
   	function Car(name,price){
   	  this.name=name;
   	  this.price=price;
   	}
   	 Car.prototype.sell=function(){
   	   alert("我是"+this.name+"，我現(xiàn)在賣"+this.price+"萬元");
   	  }
   	var camry =new Car("凱美瑞",27);
   	camry.sell();
  

• Javascript作用鏈域?

   全局函數(shù)無法查看局部函數(shù)的內(nèi)部細(xì)節(jié)，但局部函數(shù)可以查看其上層的函數(shù)細(xì)節(jié)，直至全局細(xì)節(jié)。
   當(dāng)需要從局部函數(shù)查找某一屬性或方法時(shí)，如果當(dāng)前作用域沒有找到，就會(huì)上溯到上層作用域查找，
   直至全局函數(shù)，這種組織形式就是作用域鏈。
  

• 談?wù)凾his對象的理解。

  this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）；
  如果有new關(guān)鍵字，this指向new出來的那個(gè)對象；
  在事件中，this指向觸發(fā)這個(gè)事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window；
  

• eval是做什么的？

   它的功能是把對應(yīng)的字符串解析成JS代碼并運(yùn)行；
   應(yīng)該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執(zhí)行）。
   由JSON字符串轉(zhuǎn)換為JSON對象的時(shí)候可以用eval，var obj =eval((+ str +));
  

• 什么是window對象? 什么是document對象?

   window對象是指瀏覽器打開的窗口。
   document對象是Documentd對象（HTML 文檔對象）的一個(gè)只讀引用，window對象的一個(gè)屬性。
  

• null，undefined 的區(qū)別？

   null 		表示一個(gè)對象是“沒有值”的值，也就是值為“空”；
   undefined 	表示一個(gè)變量聲明了沒有初始化(賦值)；
  
   undefined不是一個(gè)有效的JSON，而null是；
   undefined的類型(typeof)是undefined；
   null的類型(typeof)是object；
  
  
   Javascript將未賦值的變量默認(rèn)值設(shè)為undefined；
   Javascript從來不會(huì)將變量設(shè)為null。它是用來讓程序員表明某個(gè)用var聲明的變量時(shí)沒有值的。
  
   typeof undefined
   	//"undefined"
   	undefined :是一個(gè)表示"無"的原始值或者說表示"缺少值"，就是此處應(yīng)該有一個(gè)值，但是還沒有定義。當(dāng)嘗試讀取時(shí)會(huì)返回 undefined；
   	例如變量被聲明了，但沒有賦值時(shí)，就等于undefined
  
   typeof null
   	//"object"
   	null : 是一個(gè)對象(空對象, 沒有任何屬性和方法)；
   	例如作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象；
  
   注意：
   	在驗(yàn)證null時(shí)，一定要使用　=== ，因?yàn)?== 無法分別 null 和　undefined
   	null == undefined // true
   	null === undefined // false
  
   再來一個(gè)例子：
  
   	null
   	Q：有張三這個(gè)人么？
   	A：有！
   	Q：張三有房子么？
   	A：沒有！
  
   	undefined
   	Q：有張三這個(gè)人么？
   	A：有！
   	Q: 張三有多少歲？
   	A: 不知道（沒有被告訴）
  

  參考閱讀：undefined與null的區(qū)別

• 寫一個(gè)通用的事件偵聽器函數(shù)。

   	// event(事件)工具集，來源：github.com/markyun
   	markyun.Event = {
   		// 頁面加載完成后
   		readyEvent : function(fn) {
   			if (fn==null) {
   				fn=document;
   			}
   			var oldonload = window.onload;
   			if (typeof window.onload != function) {
   				window.onload = fn;
   			} else {
   				window.onload = function() {
   					oldonload();
   					fn();
   				};
   			}
   		},
   		// 視能力分別使用dom0||dom2||IE方式 來綁定事件
   		// 參數(shù)： 操作的元素,事件名稱 ,事件處理程序
   		addEvent : function(element, type, handler) {
   			if (element.addEventListener) {
   				//事件類型、需要執(zhí)行的函數(shù)、是否捕捉
   				element.addEventListener(type, handler, false);
   			} else if (element.attachEvent) {
   				element.attachEvent(on + type, function() {
   					handler.call(element);
   				});
   			} else {
   				element[on + type] = handler;
   			}
   		},
   		// 移除事件
   		removeEvent : function(element, type, handler) {
   			if (element.removeEventListener) {
   				element.removeEventListener(type, handler, false);
   			} else if (element.datachEvent) {
   				element.detachEvent(on + type, handler);
   			} else {
   				element[on + type] = null;
   			}
   		},
   		// 阻止事件 (主要是事件冒泡，因?yàn)镮E不支持事件捕獲)
   		stopPropagation : function(ev) {
   			if (ev.stopPropagation) {
   				ev.stopPropagation();
   			} else {
   				ev.cancelBubble = true;
   			}
   		},
   		// 取消事件的默認(rèn)行為
   		preventDefault : function(event) {
   			if (event.preventDefault) {
   				event.preventDefault();
   			} else {
   				event.returnValue = false;
   			}
   		},
   		// 獲取事件目標(biāo)
   		getTarget : function(event) {
   			return event.target || event.srcElement;
   		},
   		// 獲取event對象的引用，取到事件的所有信息，確保隨時(shí)能使用event；
   		getEvent : function(e) {
   			var ev = e || window.event;
   			if (!ev) {
   				var c = this.getEvent.caller;
   				while (c) {
   					ev = c.arguments[0];
   					if (ev && Event == ev.constructor) {
   						break;
   					}
   					c = c.caller;
   				}
   			}
   			return ev;
   		}
   	};
  

• ["1", "2", "3"].map(parseInt) 答案是多少？

   parseInt() 函數(shù)能解析一個(gè)字符串，并返回一個(gè)整數(shù)，需要兩個(gè)參數(shù) (val, radix)，
   其中 radix 表示要解析的數(shù)字的基數(shù)?！驹撝到橛?2 ~ 36 之間，并且字符串中的數(shù)字不能大于radix才能正確返回?cái)?shù)字結(jié)果值】;
   但此處 map 傳了 3 個(gè) (element, index, array),我們重寫parseInt函數(shù)測試一下是否符合上面的規(guī)則。
  
   function parseInt(str, radix) {
       return str+-+radix;
   };
   var a=["1", "2", "3"];
   a.map(parseInt);  // ["1-0", "2-1", "3-2"] 不能大于radix
  
   因?yàn)槎M(jìn)制里面，沒有數(shù)字3,導(dǎo)致出現(xiàn)超范圍的radix賦值和不合法的進(jìn)制解析，才會(huì)返回NaN
   所以["1", "2", "3"].map(parseInt) 答案也就是：[1, NaN, NaN]
  
   詳細(xì)解析：http://blog.csdn.net/justjavac/article/details/19473199
  

• 事件是？IE與火狐的事件機(jī)制有什么區(qū)別？ 如何阻止冒泡？

    1. 我們在網(wǎng)頁中的某個(gè)操作（有的操作對應(yīng)多個(gè)事件）。例如：當(dāng)我們點(diǎn)擊一個(gè)按鈕就會(huì)產(chǎn)生一個(gè)事件。是可以被 JavaScript 偵測到的行為。
    2. 事件處理機(jī)制：IE是事件冒泡、Firefox同時(shí)支持兩種事件模型，也就是：捕獲型事件和冒泡型事件；
    3. ev.stopPropagation();（舊ie的方法 ev.cancelBubble = true;）
  

• 什么是閉包（closure），為什么要用它？

   閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中變量的函數(shù)，創(chuàng)建閉包的最常見的方式就是在一個(gè)函數(shù)內(nèi)創(chuàng)建另一個(gè)函數(shù)，通過另一個(gè)函數(shù)訪問這個(gè)函數(shù)的局部變量,利用閉包可以突破作用鏈域，將函數(shù)內(nèi)部的變量和方法傳遞到外部。
  
   閉包的特性：
  
   1.函數(shù)內(nèi)再嵌套函數(shù)
   2.內(nèi)部函數(shù)可以引用外層的參數(shù)和變量
   3.參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收
  
   //li節(jié)點(diǎn)的onclick事件都能正確的彈出當(dāng)前被點(diǎn)擊的li索引
    
  
       
   index = 0
       
   index = 1
       
   index = 2
       
   index = 3
   
   
  
  
  
   執(zhí)行say667()后,say667()閉包內(nèi)部變量會(huì)存在,而閉包內(nèi)部函數(shù)的內(nèi)部變量不會(huì)存在
   使得Javascript的垃圾回收機(jī)制GC不會(huì)收回say667()所占用的資源
   因?yàn)閟ay667()的內(nèi)部函數(shù)的執(zhí)行需要依賴say667()中的變量
   這是對閉包作用的非常直白的描述
  
     function say667() {
   	// Local variable that ends up within closure
   	var num = 666;
   	var sayAlert = function() {
   		alert(num);
   	}
   	num++;
   	return sayAlert;
   }
  
    var sayAlert = say667();
    sayAlert()//執(zhí)行結(jié)果應(yīng)該彈出的667
  

• javascript 代碼中的"use strict";是什么意思 ? 使用它區(qū)別是什么？

   use strict是一種ECMAscript 5 添加的（嚴(yán)格）運(yùn)行模式,這種模式使得 Javascript 在更嚴(yán)格的條件下運(yùn)行,
  
   使JS編碼更加規(guī)范化的模式,消除Javascript語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為。
   默認(rèn)支持的糟糕特性都會(huì)被禁用，比如不能用with，也不能在意外的情況下給全局變量賦值;
   全局變量的顯示聲明,函數(shù)必須聲明在頂層，不允許在非函數(shù)代碼塊內(nèi)聲明函數(shù),arguments.callee也不允許使用；
   消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全,限制函數(shù)中的arguments修改，嚴(yán)格模式下的eval函數(shù)的行為和非嚴(yán)格模式的也不相同;
  
   提高編譯器效率，增加運(yùn)行速度；
   為未來新版本的Javascript標(biāo)準(zhǔn)化做鋪墊。
  

• 如何判斷一個(gè)對象是否屬于某個(gè)類？

     使用instanceof （待完善）
      if(a instanceof Person){
          alert(yes);
      }
  

• new操作符具體干了什么呢?

   	 1、創(chuàng)建一個(gè)空對象，并且 this 變量引用該對象，同時(shí)還繼承了該函數(shù)的原型。
     	 2、屬性和方法被加入到 this 引用的對象中。
   	 3、新創(chuàng)建的對象由 this 所引用，并且最后隱式的返回 this 。
  
   var obj  = {};
   obj.__proto__ = Base.prototype;
   Base.call(obj);
  

• 用原生JavaScript的實(shí)現(xiàn)過什么功能嗎？

• Javascript中，有一個(gè)函數(shù)，執(zhí)行時(shí)對象查找時(shí)，永遠(yuǎn)不會(huì)去查找原型，這個(gè)函數(shù)是？

   hasOwnProperty
  
   javaScript中hasOwnProperty函數(shù)方法是返回一個(gè)布爾值，指出一個(gè)對象是否具有指定名稱的屬性。此方法無法檢查該對象的原型鏈中是否具有該屬性；該屬性必須是對象本身的一個(gè)成員。
   使用方法：
   object.hasOwnProperty(proName)
   其中參數(shù)object是必選項(xiàng)。一個(gè)對象的實(shí)例。
   proName是必選項(xiàng)。一個(gè)屬性名稱的字符串值。
  
   如果 object 具有指定名稱的屬性，那么JavaScript中hasOwnProperty函數(shù)方法返回 true，反之則返回 false。
  

• JSON 的了解？

   JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式。
   它是基于JavaScript的一個(gè)子集。數(shù)據(jù)格式簡單, 易于讀寫, 占用帶寬小
   如：{"age":"12", "name":"back"}
  
   JSON字符串轉(zhuǎn)換為JSON對象:
   var obj =eval((+ str +));
   var obj = str.parseJSON();
   var obj = JSON.parse(str);
  
   JSON對象轉(zhuǎn)換為JSON字符串：
   var last=obj.toJSONString();
   var last=JSON.stringify(obj);
  

• [].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)}) 能解釋一下這段代碼的意思嗎？

• js延遲加載的方式有哪些？

   defer和async、動(dòng)態(tài)創(chuàng)建DOM方式（用得最多）、按需異步載入js
  

• Ajax 是什么? 如何創(chuàng)建一個(gè)Ajax？

   ajax的全稱：Asynchronous Javascript And XML。
   異步傳輸+js+xml。
   所謂異步，在這里簡單地解釋就是：向服務(wù)器發(fā)送請求的時(shí)候，我們不必等待結(jié)果，而是可以同時(shí)做其他的事情，等到有了結(jié)果它自己會(huì)根據(jù)設(shè)定進(jìn)行后續(xù)操作，與此同時(shí)，頁面是不會(huì)發(fā)生整頁刷新的，提高了用戶體驗(yàn)。
  
   (1)創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個(gè)異步調(diào)用對象
   (2)創(chuàng)建一個(gè)新的HTTP請求,并指定該HTTP請求的方法、URL及驗(yàn)證信息
   (3)設(shè)置響應(yīng)HTTP請求狀態(tài)變化的函數(shù)
   (4)發(fā)送HTTP請求
   (5)獲取異步調(diào)用返回的數(shù)據(jù)
   (6)使用JavaScript和DOM實(shí)現(xiàn)局部刷新
  

• Ajax 解決瀏覽器緩存問題？

    1、在ajax發(fā)送請求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
  
    2、在ajax發(fā)送請求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
  
    3、在URL后面加上一個(gè)隨機(jī)數(shù)： "fresh=" + Math.random();。
  

       4、在URL后面加上時(shí)間戳："nowtime=" + new Date().getTime();。

    5、如果是使用jQuery，直接這樣就可以了 $.ajaxSetup({cache:false})。這樣頁面的所有ajax都會(huì)執(zhí)行這條語句就是不需要保存緩存記錄。

• 同步和異步的區(qū)別?

  同步的概念應(yīng)該是來自于OS中關(guān)于同步的概念:不同進(jìn)程為協(xié)同完成某項(xiàng)工作而在先后次序上調(diào)整(通過阻塞,喚醒等方式).同步強(qiáng)調(diào)的是順序性.誰先誰后.異步則不存在這種順序性.

  同步：瀏覽器訪問服務(wù)器請求，用戶看得到頁面刷新，重新發(fā)請求,等請求完，頁面刷新，新內(nèi)容出現(xiàn)，用戶看到新內(nèi)容,進(jìn)行下一步操作。

  異步：瀏覽器訪問服務(wù)器請求，用戶正常操作，瀏覽器后端進(jìn)行請求。等請求完，頁面不刷新，新內(nèi)容也會(huì)出現(xiàn)，用戶看到新內(nèi)容。

  （待完善）

• 如何解決跨域問題?

   jsonp、 iframe、window.name、window.postMessage、服務(wù)器上設(shè)置代理頁面
  

• 頁面編碼和被請求的資源編碼如果不一致如何處理？

• 服務(wù)器代理轉(zhuǎn)發(fā)時(shí)，該如何處理cookie？

   nginx
  

• 模塊化開發(fā)怎么做？

  立即執(zhí)行函數(shù),不暴露私有成員

       var module1 = (function(){
       　　　　var _count = 0;
       　　　　var m1 = function(){
       　　　　　　//...
       　　　　};
       　　　　var m2 = function(){
       　　　　　　//...
       　　　　};
       　　　　return {
       　　　　　　m1 : m1,
       　　　　　　m2 : m2
       　　　　};
       　　})();
  

  （待完善）

• AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規(guī)范區(qū)別？

  AMD 規(guī)范在這里：https://github.com/amdjs/amdjs-api/wiki/AMD

  CMD 規(guī)范在這里：https://github.com/seajs/seajs/issues/242

   Asynchronous Module Definition，異步模塊定義，所有的模塊將被異步加載，模塊加載不影響后面語句運(yùn)行。所有依賴某些模塊的語句均放置在回調(diào)函數(shù)中。
  
    區(qū)別：
  
       1. 對于依賴的模塊，AMD 是提前執(zhí)行，CMD 是延遲執(zhí)行。不過 RequireJS 從 2.0 開始，也改成可以延遲執(zhí)行（根據(jù)寫法不同，處理方式不同）。CMD 推崇 as lazy as possible.
       2. CMD 推崇依賴就近，AMD 推崇依賴前置?？创a：
  
   // CMD
   define(function(require, exports, module) {
       var a = require(./a)
       a.doSomething()
       // 此處略去 100 行
       var b = require(./b) // 依賴可以就近書寫
       b.doSomething()
       // ...
   })
  
   // AMD 默認(rèn)推薦
   define([./a, ./b], function(a, b) { // 依賴必須一開始就寫好
       a.doSomething()
       // 此處略去 100 行
       b.doSomething()
       // ...
   })
  

• requireJS的核心原理是什么？（如何動(dòng)態(tài)加載的？如何避免多次加載的？如何 緩存的？）

   參考：http://annn.me/how-to-realize-cmd-load