1.行內(nèi)元素和塊級元素?img算什么?行內(nèi)元素怎么轉(zhuǎn)化為塊級元素?

行內(nèi)元素：和有他元素都在一行上室埋，高度邑飒、行高及外邊距和內(nèi)邊距都不可改變辜王，文字圖片的寬度不可改變，只能容納文本或者其他行內(nèi)元素撕瞧；其中img是行元素
塊級元素：總是在新行上開始陵叽，高度狞尔、行高及外邊距和內(nèi)邊距都可控制，可以容納內(nèi)斂元素和其他元素巩掺；
行元素轉(zhuǎn)換為塊級元素方式：display：block偏序；

2.將多個元素設(shè)置為同一行?清除浮動有幾種方式?

將多個元素設(shè)置為同一行：float，inline-block
清除浮動的方式：方法一：添加新的元素 胖替、應(yīng)用 clear：both研儒；
方法二：父級div定義 overflow: hidden；
方法三：利用:after和:before來在元素內(nèi)部插入兩個元素塊独令，從面達到清除浮動的效果端朵。
.clear{zoom:1;}
.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

3.怪異盒模型box-sizing？彈性盒模型|盒布局?

在標準模式下的盒模型：盒子總寬度/高度=width/height+padding+border+margin
在怪異模式下的盒模型下燃箭，盒子的總寬度和高度是包含內(nèi)邊距padding和邊框border寬度在內(nèi)的冲呢，盒子總寬度/高度=width/height + margin = 內(nèi)容區(qū)寬度/高度 + padding + border + margin;
box-sizing有兩個值一個是content-box，另一個是border-box招狸。
當設(shè)置為box-sizing:content-box時敬拓，將采用標準模式解析計算；
當設(shè)置為box-sizing:border-box時裙戏，將采用怪異模式解析計算恩尾。

4.簡述幾個css hack?

(1) 圖片間隙
在div中插入圖片，圖片會將div下方撐大3px挽懦。hack1：將<div>與<img>寫在同一行翰意。hack2：給<img>添加display：block；
dt li 中的圖片間隙信柿。hack：給<img>添加display：block冀偶；
(2) 默認高度，IE6以下版本中渔嚷，部分塊元素进鸠，擁有默認高度（低于18px）
hack1：給元素添加：font-size：0；
hack2：聲明：overflow：hidden形病；
表單行高不一致
hack1：給表單添加聲明：float：left客年；height： ；border： 0漠吻；
鼠標指針
hack：若統(tǒng)一某一元素鼠標指針為手型：cursor：pointer量瓜；
當li內(nèi)的a轉(zhuǎn)化塊元素時，給a設(shè)置float途乃，IE里面會出現(xiàn)階梯狀
hack1：給a加display：inline-block绍傲；
hack2：給li加float：left；

5.href和src區(qū)別? title和alt

href (Hypertext Reference)指定網(wǎng)絡(luò)資源的位置（超文本引用），從而在當前元素或者當前文檔和由當前屬性定義的需要的錨點或資源之間定義一個鏈接或者關(guān)系烫饼，在 link和a 等元素上使用猎塞。
src (Source)屬性僅僅嵌入當前資源到當前文檔元素定義的位置，是頁面必不可少的一部分杠纵，是引入荠耽。在 img、script比藻、iframe 等元素上使用骇塘。
title：既是html標簽，又是html屬性韩容，title作為屬性時，用來為元素提供額外說明信息.
alt：alt是html標簽的屬性唐瀑，alt屬性則是用來指定替換文字群凶，只能用在img、area和input元素中（包括applet元素）哄辣，用于網(wǎng)頁中圖片無法正常顯示時給用戶提供文字說明使其了解圖像信息.

6.transform请梢？animation？區(qū)別?animation-duration

Transform:它和width力穗、left一樣毅弧，定義了元素很多靜態(tài)樣式實現(xiàn)變形、旋轉(zhuǎn)当窗、縮放够坐、移位及透視等功能，通過一系列功能的組合我們可以實現(xiàn)很炫酷的靜態(tài)效果（非動畫)崖面。
Animation:作用于元素本身而不是樣式屬性,屬于關(guān)鍵幀動畫的范疇元咙，它本身被用來替代一些純粹表現(xiàn)的javascript代碼而實現(xiàn)動畫,可以通過keyframe顯式控制當前幀的屬性值.
animation-duration：規(guī)定完成動畫所花費的時間，以秒或毫秒計巫员。

7.nth-of-type | nth-child?

舉例說明：
<ul> <p>111</p> <span>222</span> <li>1</li> <li>2</li> <li>3</li> </ul>
li:nth-of-type(2):表示ul下的第二個li元素
li:nth-child(2)：表示既是li元素又是在ul下的第二個元素（找不到）庶香。
建議一般使用nth-of-type，不容易出問題简识。

8. :before 和 ::before 區(qū)別?

單冒號(:)用于CSS3偽類赶掖，雙冒號(::)用于CSS3偽元素。 對于CSS2之前已有的偽元素七扰，比如:before奢赂，單冒號和雙冒號的寫法::before作用是一樣的。

9.如何讓一個div 上下左右居中?

//有三種方法颈走。
方法1： .div1{ width:400px; height:400px; border:#CCC 1px solid; 
background:#99f; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); } <div class="div1"></div> 
方法2： .div2{ width:400px; height:400px; border:#CCC 1px solid; 
background:#99f; position: absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; } 
<div class="div2"></div> 
方法3： .div3{ width:400px; height:400px; border:#CCC 1px solid; background:#9f9; 
position: absolute; left: 50%; top:50%; margin-left:-200px; margin-top: -200px; } <div class="div3"></div> 

10.css2.0 和css3.0

css3加強了css2的功能呈驶，增加了新的屬性和新的標簽，并且刪除了一些冗余的標簽疫鹊，在布局方面減少了代碼量袖瞻。以前比較復(fù)雜的布局現(xiàn)在一個屬性就搞定了（columns之類的屬性）司致。在效果方面加入了更多的效果(圓角，動畫之類的)聋迎，還有在盒子模型和列表模塊都進行了改進脂矫。不過CSS3兼容性不好，只有一些高級版本的瀏覽器支持霉晕。

11.彈性盒子模型?flex|box區(qū)別?

(1) 引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的條目進行排列庭再、對齊和分配空白空間。


即便容器中條目的尺寸未知或是動態(tài)變化的牺堰，彈性盒布局模型也能正常的工作拄轻。在該布局模型中，容器會根據(jù)布局的需要伟葫，調(diào)整其中包含的條目的尺寸和順序來最好地填充所有可用的空間恨搓。


當容器的尺寸由于屏幕大小或窗口尺寸發(fā)生變化時，其中包含的條目也會被動態(tài)地調(diào)整筏养。比如當容器尺寸變大時斧抱，其中包含的條目會被拉伸以占滿多余的空白空間；當容器尺寸變小時渐溶，條目會被縮小以防止超出容器的范圍辉浦。彈性盒布局是與方向無關(guān)的。


在傳統(tǒng)的布局方式中茎辐，block 布局是把塊在垂直方向從上到下依次排列的宪郊；
而 inline 布局則是在水平方向來排列。彈性盒布局并沒有這樣內(nèi)在的方向限制拖陆，可以由開發(fā)人員自由操作废膘。


(2) flex和box的區(qū)別: display：box 是老規(guī)范，要兼顧古董機子就加上它慕蔚； 父級元素有display:box;屬性之后丐黄。他的子元素里面加上box-flex屬性】嘴可以讓子元素按照父元素的寬度進行一定比例的分占空間灌闺。 flex是最新的，董機老機子不支持的坏瞄；


父元素設(shè)置display:flex后桂对，子元素寬度會隨父元素寬度的改變而改變，而display:box不會鸠匀。 Android UC瀏覽器只支持display: box語法蕉斜；而iOS UC瀏覽器則支持兩種方式。

12.viewport 所有屬性 ？

(1)width :設(shè)置layout viewport的寬度宅此，為一個正整數(shù)机错，或字符串'device-width';
(2)initial-scale:設(shè)置頁面的初始縮放值，為一個數(shù)字父腕，可以帶小數(shù)弱匪。
(3)minimum-scale:允許用戶的最小縮放值，為一個數(shù)字璧亮，可以帶小數(shù)萧诫。
(4)maximum-scale:允許用戶的最大縮放值，為一個數(shù)字枝嘶，可以帶小數(shù)帘饶。
(5)height:設(shè)置layout viewport的高度，這個屬性對我們并不重要群扶，很少使用
(6)user-scalable:是否允許用戶進行縮放及刻，值為‘no’或者‘yes’。
安卓中還支持：target-densitydpi穷当，表示目標設(shè)備的密度等級，作用是決定css中的1px 代表多少物理像素
(7)target-densitydpi:值可以為一個數(shù)值或者 high-dpi 淹禾、 medium-dpi馁菜、 low-dpi、 device-dpi 這幾個字符串中的一個

13.如何理解HTML結(jié)構(gòu)的語義化铃岔？

所謂標簽語義化汪疮，就是指標簽的含義。語義化的主要目的就是讓大家直觀的認識標簽(markup)和屬性(attribute)的用途和作用毁习，對搜索引擎友好智嚷，有了良好的結(jié)構(gòu)和語義我們的網(wǎng)頁內(nèi)容便自然容易被搜索引擎抓取，這種符合搜索引擎收索規(guī)則的做法纺且，網(wǎng)站的推廣便可以省下不少的功夫村刨，而且可維護性更高军援，因為結(jié)構(gòu)清晰,十分易于閱讀。這也是搜索引擎優(yōu)化SEO重要的一步。

14.偽類選擇器和偽元素阿浓？c3中引入的偽類選擇器有？c3中偽元素有?

偽類用一個冒號來表示攀芯，而偽元素則用兩個冒號來表示好渠。


偽類選擇器：
由于狀態(tài)是動態(tài)變化的，所以一個元素達到一個特定狀態(tài)時步咪，它可能得到一個偽類的樣式论皆；當狀態(tài)改變時，它又會失去這個樣式。


偽元素選擇器：
并不是針對真正的元素使用的選擇器点晴，而是針對CSS中已經(jīng)定義好的偽元素使用的選擇器感凤；


c3中引入的偽類選擇器：
:root()選擇器，根選擇器觉鼻，匹配元素E所在文檔的根元素俊扭。在HTML文檔中，根元素始終是<html>坠陈。:root選擇器等同于<html>元素萨惑。


:not()選擇器稱為否定選擇器，和jQuery中的:not選擇器一模一樣仇矾，可以選擇除某個元素之外的所有元素庸蔼。


:empty()選擇器表示的就是空。用來選擇沒有任何內(nèi)容的元素贮匕，這里沒有內(nèi)容指的是一點內(nèi)容都沒有姐仅，哪怕是一個空格。


:target()選擇器來對頁面某個target元素(該元素的id被當做頁面中的超鏈接來使用)指定樣式刻盐，該樣式只在用戶點擊了頁面中的超鏈接掏膏，并且跳轉(zhuǎn)到target元素后起作用。


:first-child()選擇器表示的是選擇父元素的第一個子元素的元素E敦锌。簡單點理解就是選擇元素中的第一個子元素馒疹，記住是子元素，而不是后代元素乙墙。


:nth-child()選擇某個元素的一個或多個特定的子元素颖变。


:nth-last-child()從某父元素的最后一個子元素開始計算，來選擇特定的元素


:nth-of-type(n)選擇器和:nth-child(n)選擇器非常類似听想，不同的是它只計算父元素中指定的某種類型的子元素腥刹。


:only-child表示的是一個元素是它的父元素的唯一一個子元素。


:first-line為某個元素的第一行文字使用樣式汉买。


:first-letter 為某個元素中的文字的首字母或第一個字使用樣式衔峰。


:before 在某個元素之前插入一些內(nèi)容。


:after 在某個元素之后插入一些內(nèi)容蛙粘。


c3中偽元素：
::first-line選擇元素的第一行朽色，比如說改變每個段落的第一行文本的樣式
::before和::after這兩個主要用來給元素的前面或后面插入內(nèi)容，這兩個常用"content"配合使用组题，見過最多的就是清除浮動
::selection用來改變?yōu)g覽網(wǎng)頁選中文的默認效果

15.html5有哪些新特性葫男、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題崔列？如何區(qū)分 HTML 和 HTML5梢褐？

• HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集旺遮，主要是關(guān)于圖像，位置盈咳，存儲耿眉，多任務(wù)等功能的增加。
  
  
• 拖拽釋放(Drag and drop) API 語義化更好的內(nèi)容標簽(header,nav,footer,aside,article,section) 音頻鱼响、視頻API(audio,video) 畫布(Canvas) API 地理(Geolocation) API 本地離線存儲 localStorage 長期存儲數(shù)據(jù)鸣剪，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
  
  
• sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除 表單控件丈积，calendar筐骇、date、time江滨、email铛纬、url、search 新的技術(shù)webworker, websocket, Geolocation
  
  
• 移除的元素 純表現(xiàn)的元素：basefont唬滑，big告唆，center，font, s晶密，strike擒悬，tt，u稻艰； 對可用性產(chǎn)生負面影響的元素：frame懂牧，frameset，noframes连锯；支持HTML5新標簽：
  
  
• IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標簽归苍， 可以利用這一特性讓這些瀏覽器支持HTML5新標簽用狱， 瀏覽器支持新標簽后运怖，還需要添加標簽?zāi)J的樣式：
  
  
• 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
  
  
• 如何區(qū)分： DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素

16.placeholder?如何在ie8上兼容placeholder這個效果

方法一：

首先判斷瀏覽器是否支持placeholder屬性夏伊，如果不支持的話摇展，就遍歷所有input輸入框，獲取placeholder屬性的值填充進輸入框作為提示信息溺忧，同時字體設(shè)置成灰色咏连。

當輸入框獲得焦點( focus )同時輸入框內(nèi)文字等于設(shè)置的提示信息時，就把輸入框內(nèi)清空鲁森；

當輸入框失去焦點( blur )同時輸入框內(nèi)文字為空時祟滴，再把獲取的placeholder屬性的值填充
進輸入框作為提示信息，同時字體設(shè)置成灰色歌溉；

當輸入框內(nèi)有輸入( keydown )時垄懂，此時輸入框內(nèi)的提示信息已經(jīng)由focus事件清除骑晶，此時只需要把字體再恢復(fù)成黑色即可

此方法的缺點是，不適用于加載完DOM時即獲得焦點的輸入框草慧，因為在用戶的角度桶蛔，加載完頁面時看到的獲得焦點的那個輸入框，它的提示文字是看不到的漫谷。

HTML：
<input type="text" id="uname" name="uname" placeholder="請輸入用戶名"/>

CSS：
.phcolor{ color:#999;}

JS
$(function(){  
  //判斷瀏覽器是否支持placeholder屬性
  supportPlaceholder='placeholder'in document.createElement('input'),
  placeholder=function(input){
    var text = input.attr('placeholder'),
    defaultValue = input.defaultValue;
    if(!defaultValue){
      input.val(text).addClass("phcolor");
    }
    input.focus(function(){
      if(input.val() == text){
        $(this).val("");
      }
    });
    input.blur(function(){
      if(input.val() == ""){
        $(this).val(text).addClass("phcolor");
      }
    });
    //輸入的字符不為灰色
    input.keydown(function(){
      $(this).removeClass("phcolor");
    });
  };
  //當瀏覽器不支持placeholder屬性時仔雷，調(diào)用placeholder函數(shù)
  if(!supportPlaceholder){
    $('input').each(function(){
      text = $(this).attr("placeholder");
      if($(this).attr("type") == "text"){
        placeholder($(this));
      }
    });
  }
});

方法二：
此方法的思路是做一張含有提示文字的圖片作為input輸入框的背景圖，初始時獲得焦點同時加載背景圖舔示；
當輸入框不為空時碟婆，去掉背景圖；
當輸入框為空時斩郎，加載背景圖脑融；
當用戶鍵盤按鍵且輸入框不為空( 輸入字符 )時，去掉背景圖缩宜；
當用戶鍵盤按鍵且輸入框為空( 刪除字符 )時肘迎，加載背景圖。
此方法的缺點是：需要為每一個提示文字不同的input制作背景圖片锻煌，并且設(shè)置input的樣式妓布。

CSS：
.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}

JS
$(function(){  
   //判斷瀏覽器是否支持placeholder屬性
   supportPlaceholder='placeholder' in document.createElement('input');
   if(!supportPlaceholder){
     //初始狀態(tài)添加背景圖片
     $("#uname").attr("class","phbg");
     //初始狀態(tài)獲得焦點
     $("#uname").focus;
     function destyle(){
      if($("#uname").val() != ""){
        $("#uname").removeClass("phbg");
      }else{
        $("#uname").attr("class","phbg");
       }
     }
     //當輸入框為空時，添加背景圖片宋梧；有值時去掉背景圖片
     destyle();
     $("#uname").keyup(function(){
      //當輸入框有按鍵輸入同時輸入框不為空時匣沼，去掉背景圖片；有按鍵輸入同時為空時（刪除字符）捂龄，添加背景圖片
      destyle();
     });
     $("#uname").keydown(function(){
      //keydown事件可以在按鍵按下的第一時間去掉背景圖片
      $("#uname").removeClass("phbg");
     });
   }
});

方法三：
使用插件：Placeholders.js

17.常見兼容性問題释涛？

• png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.也可以引用一段腳本處理倦沧。

• 瀏覽器默認的margin和padding不同唇撬。解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一。

• IE6雙邊距bug:塊屬性標簽float后展融，又有橫行的margin情況下窖认，在ie6顯示margin比設(shè)置的大。

• 浮動ie產(chǎn)生的雙倍距離（IE6雙邊距問題：在IE6下告希，如果對元素設(shè)置了浮動扑浸，同時又設(shè)置了margin-left或margin-right，margin值會加倍燕偶。） #box{ float:left; width:10px; margin:0 0 0 100px;} 這種情況之下IE會產(chǎn)生20px的距離喝噪，解決方案是在float的標簽樣式控制中加入 ——display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(這個符號只有ie6會識別)

• 漸進識別的方式指么，從總體中逐漸排除局部酝惧。 首先驰吓，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來系奉。 接著檬贰，再次使用“+”將IE8和IE7、IE6分離開來缺亮，這樣IE8已經(jīng)獨立識別翁涤。 css// .bb{ background-color:#f1ee18; .background-color:#00deff\9; +background-color:#a200ff; _background-color:#1e0bd1; }

• IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性, 也可以使用getAttribute()獲取自定義屬性; Firefox下,只能使用getAttribute()獲取自定義屬性. 解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性。

• IE下,event對象有x,y屬性,但是沒有pageX,pageY屬性; Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.

• 解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)萌踱。

• Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決葵礼。

• 超鏈接訪問過后hover樣式就不出現(xiàn)了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

• 怪異模式問題：漏寫DTD聲明，F(xiàn)irefox仍然會按照標準模式來解析網(wǎng)頁并鸵，但在IE中會觸發(fā)怪異模式鸳粉。為避免怪異模式給我們帶來不必要的麻煩，最好養(yǎng)成書寫DTD聲明的好習(xí)慣≡暗＃現(xiàn)在可以使用html5推薦的寫法：<doctype html>

• 上下margin重合問題ie和ff都存在届谈，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發(fā)生重合弯汰。解決方法艰山，養(yǎng)成良好的代碼編寫習(xí)慣，同時采用margin-top或者同時采用margin-bottom咏闪。

• ie6對png圖片格式支持不好(引用一段腳本處理)

18.簡述前端優(yōu)化的方式 舊的雅虎34條|h5新添加的方式

1曙搬、盡量減少HTTP請求次數(shù)
2、減少DNS查找次數(shù)
3鸽嫂、避免跳轉(zhuǎn)
4纵装、可緩存的AJAX
5、推遲加載內(nèi)容
6据某、預(yù)加載
7橡娄、減少DOM元素數(shù)量
8、根據(jù)域名劃分頁面內(nèi)容
9哗脖、使iframe的數(shù)量最小
10瀑踢、不要出現(xiàn)404錯誤
11扳还、使用內(nèi)容分發(fā)網(wǎng)絡(luò)
12才避、為文件頭指定Expires或Cache-Control 13、Gzip壓縮文件內(nèi)容
14氨距、配置ETag
15桑逝、盡早刷新輸出緩沖
16、使用GET來完成AJAX請求
17俏让、把樣式表置于頂部
18楞遏、避免使用CSS表達式（Expression）
19茬暇、使用外部JavaScript和CSS
20、削減JavaScript和CSS
21寡喝、用<link>代替@import
22糙俗、避免使用濾鏡
23、把腳本置于頁面底部
24预鬓、剔除重復(fù)腳本

19.jquery版本?1.11兼容?

Query 2.x系列和 jQuery 1.x擁有同樣的API巧骚，但是不再支持IE6、7格二、8劈彪。
推薦使用 1.x version，除非你確定IE6顶猜、7沧奴、8用戶不再訪問網(wǎng)站。
jquery1.11屬于1.x 版本长窄，其兼容IE6滔吠、7、8挠日，所以也支持IE9.

20.塊級屠凶？行內(nèi)？空元素?

行內(nèi)元素：和有他元素都在一行上肆资，高度矗愧、行高及外邊距和內(nèi)邊距都不可改變，文字圖片的寬度不可改變郑原，只能容納文本或者其他行內(nèi)元素
塊級元素：總是在新行上開始唉韭，高度、行高及外邊距和內(nèi)邊距都可控制犯犁，可以容納內(nèi)斂元素和其他元素属愤；
空元素：在HTML元素中，沒有內(nèi)容的 HTML 元素被稱為空元素酸役∽≈睿空元素是在開始標簽中關(guān)閉的。
就是沒有關(guān)閉標簽的空元素涣澡。

21.media屬性贱呐？screen？All入桂？max-width?min-width?

media 屬性規(guī)定被鏈接文檔將顯示在什么設(shè)備上奄薇。media 屬性用于為不同的媒介類型規(guī)定不同的樣式。Screen計算機默認屏幕抗愁，all適用于所有設(shè)備馁蒂，max-width超過最大寬度就不執(zhí)行呵晚，min-width必須大于最小寬度才執(zhí)行。

22.meta標簽的name屬性值沫屡？

name 屬性主要用于描述網(wǎng)頁饵隙，與之對應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機器人查找信息和分類信息用的沮脖。
meta標簽的name屬性語法格式是：＜meta name="參數(shù)" content="具體的參數(shù)值"＞癞季。
其中name屬性主要有以下幾種參數(shù)：
A 、Keywords(關(guān)鍵字)說明：keywords用來告訴搜索引擎你網(wǎng)頁的關(guān)鍵字是什么倘潜。
B 绷柒、description(網(wǎng)站內(nèi)容描述) 說明：description用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容.
C 、robots(機器人向?qū)?說明：robots用來告訴搜索機器人哪些頁面需要索引涮因，哪些頁面不需要索引废睦。
content的參數(shù)有all,none,index,noindex,follow,nofollow,默認是all。
舉例：＜meta name="robots" content="none"＞D 养泡、author(作者)

23.一般做手機頁面切圖有幾種方式?

響應(yīng)式布局嗜湃，彈性布局display：flex，利用js編寫設(shè)定比例澜掩，給根元素設(shè)定像素购披，使用rem為單位。

24.px/em/rem有什么區(qū)別肩榕？ 為什么通常給font-size 設(shè)置的字體為62.5%

相對于當前對象內(nèi)文本的字體尺寸刚陡。如當前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認字體尺寸株汉。
1筐乳、em的值并不是固定的；
2乔妈、em會繼承父級元素的字體大小蝙云。使用rem為元素設(shè)定字體大小時，仍然是相對大小路召，但相對的只是HTML根元素勃刨。這個單位可謂集相對大小和絕對大小的優(yōu)點于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小股淡，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)身隐。
rem是相對于瀏覽器進行縮放的。1rem默認是16px揣非，在響應(yīng)式布局中抡医，一個個除來轉(zhuǎn)換成rem躲因，太麻煩早敬，所以重置rem
body{font-size=62.5% } 此時1rem = 10px;若是12px則是1.2rem.

25.sass和scss有什么區(qū)別?sass一般怎么樣編譯的

文件擴展名不同忌傻，Sass 是以“.sass”后綴為擴展名，而 SCSS 是以“.scss”后綴為擴展名搞监；語法書寫方式不同水孩，Sass 是以嚴格的縮進式語法規(guī)則來書寫，不帶大括號({})和分號(;)琐驴，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似俘种。

26.如果對css進行優(yōu)化如何處理？

壓縮打包绝淡，圖片整合宙刘，避免使用Hack，解決兼容問題牢酵，使用簡寫悬包，讓CSS能保證日后的維護。

27.如何對css文件進行壓縮合并? gulp ?

使用gulp, 首頁全局安裝gulp馍乙。
1布近、npm install --global gulp
2、其次局部安裝gulp丝格。npm install gulp --save-dev
3撑瞧、在項目根目錄下創(chuàng)建一個名為 gulpfile.js 的文件
var gulp = require('gulp');
gulp.task('default', function() {
// 將你的默認的任務(wù)代碼放在這});
4、運行g(shù)ulp显蝌。（默認的名為 default 的任務(wù)（task）將會被運行预伺，想要單獨執(zhí)行特定的任務(wù)（task），請輸入 gulp <task> <othertask>）
gulp
合并和壓縮JS曼尊、CSS文件
壓縮JS扭屁，CSS文件需要引用如下組件：
gulp-minify-css: 壓縮css

28.組件? 模塊化編程？

組件化編程: 將js css html包裝一起提供方法和效果涩禀；
模塊化化: 將相同的功能抽取出來 存放在一個位置進行編程

29.圖片和文字在同一行顯示?

1 在css中給div添加上“vertical-align:middle”屬性料滥。
2 分別把圖片和文字放入不同的div中，然后用“margin”屬性進行定位艾船，就可以使他們顯示在同一行葵腹。
3 把圖片設(shè)置為背景圖片。

30.禁止事件冒泡

event.stopPropagation()

31.禁止默認事件

event.preventDefault()

32.a標簽中 active hover link visited 正確的設(shè)置順序是什么?

a標簽的link屿岂、visited践宴、hover、active是有一定順序的
a:link
a:visited
a:hover
a:active

33.a標簽中 如何禁用href 跳轉(zhuǎn)頁面 或 定位鏈接

e.preventDefault();
href="javascript:void(0);

34.手機端上 圖片長時間點擊會選中圖片爷怀，如何處理?

onselect=function() {
return false
}

35.video標簽的幾個個屬性方法

src：視頻的URL poster：視頻封面阻肩，沒有播放時顯示的圖片 preload：預(yù)加載 autoplay：自動播放 loop：循環(huán)播放 controls：瀏覽器自帶的控制條 width：視頻寬度 height：視頻高度

36.常見的視頻編碼格式有幾種?視頻格式有幾種?

視頻格式：MPEG-1、MPEG-2和MPEG4 、AVI 烤惊、RM乔煞、ASF和WMV格式
視頻編碼格式：H.264、MPEG-4柒室、MPEG-2渡贾、WMA-HD以及VC-1

37.canvas在標簽上設(shè)置寬高 和在style中設(shè)置寬高有什么區(qū)別？

canvas標簽的width和height是畫布實際寬度和高度雄右，繪制的圖形都是在這個上面空骚。而style的width和height是canvas在瀏覽器中被渲染的高度和寬度。如果canvas的width和height沒指定或值不正確擂仍，就被設(shè)置成默認值 囤屹。

38.border-image？box-sizing?

Border-image : 圖形化邊框
Box-sizing : 屬性允許您以特定的方式定義匹配某個區(qū)域的特定元素逢渔。
語法 ：box-sizing：content-box | border-box
Content-box : padding和border不被包含在定義的width和height之內(nèi)牺丙。對象的實際寬度等于設(shè)置的width值和border、padding之和复局，即 ( Element width = width + border + padding) 此屬性表現(xiàn)為標準模式下的盒模型 .
Border-box : padding和border被包含在定義的width和height之內(nèi)冲簿。對象的實際寬度就等于設(shè)置的width值，即使定義有border和padding也不會改變對象的實際寬度亿昏，即 ( Element width = width ) 此屬性表現(xiàn)為怪異模式下的盒模型峦剔。

39.漸進增強和優(yōu)雅降級

漸進增強 progressive enhancement：針對低版本瀏覽器進行構(gòu)建頁面，保證最基本的功能角钩，然后再針對高級瀏覽器進行效果吝沫、交互等改進和追加功能達到更好的用戶體驗。
優(yōu)雅降級 graceful degradation：一開始就構(gòu)建完整的功能递礼，然后再針對低版本瀏覽器進行兼容惨险。


區(qū)別：優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給脊髓，而漸進增強則是從一個非潮栌洌基礎(chǔ)的，能夠起作用的版本開始将硝，并不斷擴充恭朗，以適應(yīng)未來環(huán)境的需要。
降級（功能衰減）意味著往回看依疼；而漸進增強則意味著朝前看痰腮，同時保證其根基處于安全地帶。


“優(yōu)雅降級”觀點
“優(yōu)雅降級”觀點認為應(yīng)該針對那些最高級律罢、最完善的瀏覽器來設(shè)計網(wǎng)站膀值。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發(fā)周期的最后階段，并把測試對象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個版本沧踏。
在這種設(shè)計范例下歌逢，舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調(diào)整來適應(yīng)某個特定的瀏覽器悦冀。但由于它們并非我們所關(guān)注的焦點趋翻，因此除了修復(fù)較大的錯誤之外睛琳，其它的差異將被直接忽略盒蟆。


“漸進增強”觀點
“漸進增強”觀點則認為應(yīng)關(guān)注于內(nèi)容本身。
內(nèi)容是我們建立網(wǎng)站的誘因师骗。有的網(wǎng)站展示它历等，有的則收集它，有的尋求辟癌，有的操作寒屯，還有的網(wǎng)站甚至?xí)陨系姆N種，但相同點是它們?nèi)忌婕暗絻?nèi)容黍少。這使得“漸進增強”成為一種更為合理的設(shè)計范例寡夹。這也是它立即被 Yahoo! 所采納并用以構(gòu)建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在。
那么問題來了〕е茫現(xiàn)在產(chǎn)品經(jīng)理看到IE6,7,8網(wǎng)頁效果相對高版本現(xiàn)代瀏覽器少了很多圓角菩掏，陰影（CSS3），要求兼容（使用圖片背景昵济，放棄CSS3）智绸，你會如何說服他？

40.解釋在ie低版本下的怪異盒模型和c3的怪異盒模型 和 彈性盒模型?

IE當padding+border的值小于width或者height:
盒模型的寬度=margin(左右)+width（width已經(jīng)包含了padding和border的值）
盒模型的高度=margin(上下)+height（height已經(jīng)包含了padding和border的值）
當padding+border的值大于width或者height:
盒模型的寬度=margin(左右)+padding(左右)+border(左右)
盒模型的高度=margin(上下)+padding(上下)+border(上下)+19px （加一個默認行高 19px） 所以相當于是padding+border和width或者height比大小访忿，誰大取誰瞧栗。


以上幾種DOCTYPE都是標準的文檔類型，無論使用哪種模式完整定義DOCTYPE海铆，都會觸發(fā)標準模式迹恐，而如果DOCTYPE缺失則在ie6，ie7卧斟，ie8下將會觸發(fā)怪異模式（quirks 模式） CSS3box-sizing有兩個值一個是content-box系草，另一個是border-box。
當設(shè)置為box-sizing:content-box時唆涝，將采用標準模式解析計算找都，也是默認模式；
當設(shè)置為box-sizing:border-box時廊酣，將采用怪異模式解析計算能耻；


Css3彈性盒模型引入了新的盒子模型—彈性盒模型，該模型決定一個盒子在其他盒子中的分布方式以及如何處理可用的空間。使用該模型晓猛，可以很輕松的創(chuàng)建自適應(yīng)瀏覽器窗口的流動布局或自適應(yīng)字體大小的彈性布局饿幅。

41.animation對應(yīng)的屬性

寫法：animation: name duration timing-function delay iteration-count direction;
下面是對應(yīng)的屬性的介紹
animation-name 規(guī)定需要綁定到選擇器的 keyframe 名稱。
animation-duration 規(guī)定完成動畫所花費的時間戒职，以秒或毫秒計栗恩。
animation-timing-function 規(guī)定動畫的速度曲線。
animation-delay 規(guī)定在動畫開始之前的延遲洪燥。
animation-iteration-count 規(guī)定動畫應(yīng)該播放的次數(shù)磕秤。
animation-direction 規(guī)定是否應(yīng)該輪流反向播放動畫。

42.transition?

css的transition允許css的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡捧韵。這種效果可以在鼠標單擊市咆、獲得焦點、被點擊或?qū)υ厝魏胃淖冎杏|發(fā)再来，并圓滑地以動畫效果改變CSS的屬性值 注意區(qū)別transform蒙兰，transform是進行2D轉(zhuǎn)換的 如移動，比例化芒篷，反過來搜变，旋轉(zhuǎn)，和拉伸元素针炉。

43.h5新特性挠他？

1、繪畫的 canvas 元素
2糊识、用于媒介回放的 video 和 audio 元素
3绩社、對本地離線存儲的更好的支持
4、新的特殊內(nèi)容元素赂苗，比如 article愉耙、footer、header拌滋、nav朴沿、section 5、新的表單控件败砂，比如 calendar赌渣、date、time昌犹、email坚芜、url、search

44.canvas 如何繪制一個三角形|正方形

moveto 是移動到某個坐標斜姥， lineto 是從當前坐標連線到某個坐標鸿竖。
這兩個函數(shù)加起來就是畫一條直線沧竟。 畫線要用“筆”，那么MoveTo()把筆要畫的起始位置固定了（x,y）然后要固定終止位置要用到LineTo函數(shù)確定終止位置（xend,yend）,這樣一條線就畫出來了缚忧。 每次與前面一個坐標相連 悟泵。
stroke() 方法會實際地繪制出通過 moveTo() 和 lineTo() 方法定義的路徑。默認顏色是黑色闪水。

<!DOCTYPE HTML5>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>畫布</title>
  </head> 
<body>
     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
     Your browser does not support the canvas element.
     </canvas>
     <script type="text/javascript">
         var c=document.getElementById("myCanvas");
//三角形
         var cxt=c.getContext("2d");
         cxt.moveTo(10,10);
         cxt.lineTo(50,50);
         cxt.lineTo(10,50);
         cxt.lineTo(10,10);
         cxt.stroke();
//正方形
         var cxt2=c.getContext("2d");
         cxt2.moveTo(60,10);
         cxt2.lineTo(100,10);
         cxt2.lineTo(100,50);
         cxt2.lineTo(60,50);
         cxt2.lineTo(60,10);
         cxt2.stroke(); 
     </script>
</body>
</html>

45.所用bootstap版本糕非？

3.0

46.css清除浮動的幾種方式？

1球榆、父級div定義 height
2朽肥、結(jié)尾處加空div標簽 clear:both
3、父級div定義 偽類:after 和 zoom
4芜果、父級div定義 overflow:hidden
5鞠呈、父級div定義 overflow:auto
6融师、父級div 也一起浮動
7右钾、父級div定義 display:table

47.為什么要初始化CSS樣式。

因為瀏覽器的兼容問題旱爆，不同瀏覽器對有些標簽的默認值是不同的舀射，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。

48.CSS3有哪些新特性怀伦？

CSS3實現(xiàn)圓角（border-radius）脆烟，陰影（box-shadow），
對文字加特效（text-shadow房待、）邢羔，線性漸變（gradient），旋轉(zhuǎn)（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
//旋轉(zhuǎn),縮放,定位,傾斜增加了更多的CSS選擇器 多背景 rgba 在CSS3中唯一引入的偽元素是::selection.媒體查詢桑孩，多欄布局 border-image

49.解釋下 CSS sprites拜鹤，以及你要如何在頁面或網(wǎng)站中使用它。

CSS Sprites其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中流椒，再利用CSS的“background-image”敏簿，“background- repeat”，“background-position”的組合進行背景定位宣虾，background-position可以用數(shù)字能精確的定位出背景圖片的位置惯裕。這樣可以減少很多圖片請求的開銷，因為請求耗時比較長绣硝；請求雖然可以并發(fā)蜻势，但是也有限制，一般瀏覽器都是6個鹉胖。對于未來而言握玛，就不需要這樣做了猜煮，因為有了http2。

50.什么是 FOUC（無樣式內(nèi)容閃爍）败许？你如何來避免 FOUC王带？

FOUC - Flash Of Unstyled Content 文檔樣式閃爍
<style type="text/css" media="all">@import "../fouc.css";</style>
而引用CSS文件的@import就是造成這個問題的罪魁禍首。IE會先加載整個HTML文檔的DOM市殷，然后再去導(dǎo)入外部的CSS文件愕撰，因此，在頁面DOM加載完成到CSS導(dǎo)入完成中間會有一段時間頁面上的內(nèi)容是沒有樣式的醋寝，這段時間的長短跟網(wǎng)速搞挣，電腦速度都有關(guān)系。
解決方法：只要在<head>之間加入一個<link>或者<script>元素就可以了音羞。

51.a點擊出現(xiàn)框囱桨，解決方法:

a,a:hover,a:active,a:visited,a:link,a:focus{ 
 -webkit-tap-highlight-color:rgba(0,0,0,0);
 -webkit-tap-highlight-color: transparent;
 outline:none;background: none;
 text-decoration: none;border:none;
 -webkit-appearance: none; }

原文：前端基礎(chǔ)面試題