前端面試整理(HTML&CSS)

1.行內元素和塊級元素?img算什麼?行內元素怎麼轉化爲塊級元素?

行內元素：和有他元素都在一行上，高度、行高及外邊距和內邊距都不可改變，文字圖片的寬度不可改變，只能容納文本或者其餘行內元素；其中img是行元素
塊級元素：老是在新行上開始，高度、行高及外邊距和內邊距均可控制，能夠容納內斂元素和其餘元素；
行元素轉換爲塊級元素方式：display：block；

 

2.將多個元素設置爲同一行?清除浮動有幾種方式?

將多個元素設置爲同一行：float，inline-block
清除浮動的方式：方法一：添加新的元素 、應用 clear：both；
方法二：父級div定義 overflow: hidden；
方法三：利用:after和:before來在元素內部插入兩個元素塊，從面達到清除浮動的效果。
.clear{zoom:1;}
.clear:after{content:」」;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

 

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

在標準模式下的盒模型：盒子總寬度/高度=width/height+padding+border+margin
在怪異模式下的盒模型下，盒子的總寬度和高度是包含內邊距padding和邊框border寬度在內的，盒子總寬度/高度=width/height + margin = 內容區寬度/高度 + padding + border + margin;
box-sizing有兩個值一個是content-box，另外一個是border-box。
當設置爲box-sizing:content-box時，將採用標準模式解析計算；
當設置爲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：若統一某一元素鼠標指針爲手型：cursor：pointer；
當li內的a轉化塊元素時，給a設置float，IE裏面會出現階梯狀
hack1：給a加display：inline-block；
hack2：給li加float：left；

 

5.href和src區別? title和alt

href (Hypertext Reference)指定網絡資源的位置（超文本引用），從而在當前元素或者當前文檔和由當前屬性定義的須要的錨點或資源之間定義一個連接或者關係，在 link和a 等元素上使用。
src (Source)屬性僅僅嵌入當前資源到當前文檔元素定義的位置，是頁面必不可少的一部分，是引入。在 img、script、iframe 等元素上使用。
title：既是html標籤，又是html屬性，title做爲屬性時，用來爲元素提供額外說明信息.
alt：alt是html標籤的屬性，alt屬性則是用來指定替換文字，只能用在img、area和input元素中（包括applet元素），用於網頁中圖片沒法正常顯示時給用戶提供文字說明使其瞭解圖像信息.

 

6.transform？animation？區別?animation-duration

Transform:它和width、left同樣，定義了元素不少靜態樣式實現變形、旋轉、縮放、移位及透視等功能，經過一系列功能的組合咱們能夠實現很炫酷的靜態效果（非動畫)。 
Animation:做用於元素自己而不是樣式屬性,屬於關鍵幀動畫的範疇，它自己被用來替代一些純粹表現的javascript代碼而實現動畫,能夠經過keyframe顯式控制當前幀的屬性值.
animation-duration：規定完成動畫所花費的時間，以秒或毫秒計。

 

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 區別?

單冒號(:)用於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的功能，增長了新的屬性和新的標籤，而且刪除了一些冗餘的標籤，在佈局方面減小了代碼量。之前比較複雜的佈局如今一個屬性就搞定了（columns之類的屬性）。在效果方面加入了更多的效果(圓角，動畫之類的)，還有在盒子模型和列表模塊都進行了改進。不過CSS3兼容性很差，只有一些高級版本的瀏覽器支持。

 

11.彈性盒子模型?flex|box區別?

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

即使容器中條目的尺寸未知或是動態變化的，彈性盒佈局模型也能正常的工做。在該佈局模型中，容器會根據佈局的須要，調整其中包含的條目的尺寸和順序來最好地填充全部可用的空間。

當容器的尺寸因爲屏幕大小或窗口尺寸發生變化時，其中包含的條目也會被動態地調整。好比當容器尺寸變大時，其中包含的條目會被拉伸以佔滿多餘的空白空間；當容器尺寸變小時，條目會被縮小以防止超出容器的範圍。彈性盒佈局是與方向無關的。

在傳統的佈局方式中，block 佈局是把塊在垂直方向從上到下依次排列的；
而 inline 佈局則是在水平方向來排列。彈性盒佈局並無這樣內在的方向限制，能夠由開發人員自由操做。 

(2) flex和box的區別: display：box 是老規範，要兼顧古董機子就加上它； 父級元素有display:box;屬性以後。他的子元素裏面加上box-flex屬性。可讓子元素按照父元素的寬度進行必定比例的分佔空間。 flex是最新的，董機老機子不支持的；

父元素設置display:flex後，子元素寬度會隨父元素寬度的改變而改變，而display:box不會。 Android UC瀏覽器只支持display: box語法；而iOS UC瀏覽器則支持兩種方式。

 

12.viewport 全部屬性 ？

(1)width :設置layout viewport的寬度，爲一個正整數，或字符串'device-width';
(2)initial-scale:設置頁面的初始縮放值，爲一個數字，能夠帶小數。
(3)minimum-scale:容許用戶的最小縮放值，爲一個數字，能夠帶小數。
(4)maximum-scale:容許用戶的最大縮放值，爲一個數字，能夠帶小數。
(5)height:設置layout viewport的高度，這個屬性對咱們並不重要，不多使用
(6)user-scalable:是否容許用戶進行縮放，值爲‘no’或者‘yes’。
安卓中還支持：target-densitydpi，表示目標設備的密度等級，做用是決定css中的1px 表明多少物理像素
(7)target-densitydpi:值能夠爲一個數值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 這幾個字符串中的一個

 

13.如何理解HTML結構的語義化？

所謂標籤語義化，就是指標籤的含義。語義化的主要目的就是讓你們直觀的認識標籤(markup)和屬性(attribute)的用途和做用，對搜索引擎友好，有了良好的結構和語義咱們的網頁內容便天然容易被搜索引擎抓取，這種符合搜索引擎收索規則的作法，網站的推廣即可以省下很多的功夫，並且可維護性更高，由於結構清晰,十分易於閱讀。這也是搜索引擎優化SEO重要的一步。

 

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

僞類用一個冒號來表示，而僞元素則用兩個冒號來表示。

僞類選擇器：
因爲狀態是動態變化的，因此一個元素達到一個特定狀態時，它可能獲得一個僞類的樣式；當狀態改變時，它又會失去這個樣式。

僞元素選擇器：
並非針對真正的元素使用的選擇器，而是針對CSS中已經定義好的僞元素使用的選擇器；

c3中引入的僞類選擇器：
:root()選擇器，根選擇器，匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。:root選擇器等同於<html>元素。

:not()選擇器稱爲否認選擇器，和jQuery中的:not選擇器如出一轍，能夠選擇除某個元素以外的全部元素。

:empty()選擇器表示的就是空。用來選擇沒有任何內容的元素，這裏沒有內容指的是一點內容都沒有，哪怕是一個空格。

:target()選擇器來對頁面某個target元素(該元素的id被當作頁面中的超連接來使用)指定樣式，該樣式只在用戶點擊了頁面中的超連接，而且跳轉到target元素後起做用。

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

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

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

:nth-of-type(n)選擇器和:nth-child(n)選擇器很是相似，不一樣的是它只計算父元素中指定的某種類型的子元素。

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

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

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

:before 在某個元素以前插入一些內容。

:after 在某個元素以後插入一些內容。 

c3中僞元素：
::first-line選擇元素的第一行，好比說改變每一個段落的第一行文本的樣式
::before和::after這兩個主要用來給元素的前面或後面插入內容，這兩個經常使用"content"配合使用，見過最多的就是清除浮動
::selection用來改變瀏覽網頁選中文的默認效果

 

15.html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

* HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
* 拖拽釋放(Drag and drop) API 語義化更好的內容標籤(header,nav,footer,aside,article,section) 音頻、視頻API(audio,video) 畫布(Canvas) API 地理(Geolocation) API 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失； 
sessionStorage 的數據在瀏覽器關閉後自動刪除 表單控件，calendar、date、time、email、url、search 新的技術webworker, websocket, Geolocation 
* 移除的元素 純表現的元素：basefont，big，center，font, s，strike，tt，u； 
對可用性產生負面影響的元素：frame，frameset，noframes；
支持HTML5新標籤： 
* IE8/IE7/IE6支持經過document.createElement方法產生的標籤， 能夠利用這一特性讓這些瀏覽器支持HTML5新標籤， 瀏覽器支持新標籤後，還須要添加標籤默認的樣式： 
* 固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 <!--[if lt IE 9]> <script> src=" http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]--> 
* 如何區分： DOCTYPE聲明\新增的結構元素\功能元素

 

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

方法一：
首先判斷瀏覽器是否支持placeholder屬性，若是不支持的話，就遍歷全部input輸入框，獲取placeholder屬性的值填充進輸入框做爲提示信息，同時字體設置成灰色。

當輸入框得到焦點( focus )同時輸入框內文字等於設置的提示信息時，就把輸入框內清空；

當輸入框失去焦點( blur )同時輸入框內文字爲空時，再把獲取的placeholder屬性的值填充
進輸入框做爲提示信息，同時字體設置成灰色；

當輸入框內有輸入( keydown )時，此時輸入框內的提示信息已經由focus事件清除，此時只須要把字體再恢復成黑色便可

此方法的缺點是，不適用於加載完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屬性時，調用placeholder函數 if(!supportPlaceholder){ $('input').each(function(){ text = $(this).attr("placeholder"); if($(this).attr("type") == "text"){ placeholder($(this)); } }); } }); 

方法二：
此方法的思路是作一張含有提示文字的圖片做爲input輸入框的背景圖，初始時得到焦點同時加載背景圖；
當輸入框不爲空時，去掉背景圖；
當輸入框爲空時，加載背景圖；
當用戶鍵盤按鍵且輸入框不爲空( 輸入字符 )時，去掉背景圖；
當用戶鍵盤按鍵且輸入框爲空( 刪除字符 )時，加載背景圖。
此方法的缺點是：須要爲每個提示文字不一樣的input製做背景圖片，而且設置input的樣式。

CSS： .phbg{ background:url(img/bg.jpg) 0 0 no-repeat;} JS $(function(){ //判斷瀏覽器是否支持placeholder屬性 supportPlaceholder='placeholder' in document.createElement('input'); if(!supportPlaceholder){ //初始狀態添加背景圖片 $("#uname").attr("class","phbg"); //初始狀態得到焦點 $("#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瀏覽器上出現背景，解決方案是作成PNG8.也能夠引用一段腳本處理。

* 瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

* IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。

* 浮動ie產生的雙倍距離（IE6雙邊距問題：在IE6下，若是對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。） #box{ float:left; width:10px; margin:0 0 0 100px;} 這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)

* 漸進識別的方式，從整體中逐漸排除局部。 首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。 接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。 
css// .bb{ background-color:#f1ee18; .background-color:#00deff\9; +background-color:#a200ff; _background-color:#1e0bd1; } 

* IE下,可使用獲取常規屬性的方法來獲取自定義屬性, 也可使用getAttribute()獲取自定義屬性; Firefox下,只能使用getAttribute()獲取自定義屬性. 解決方法:統一經過getAttribute()獲取自定義屬性。

* IE下,event對象有x,y屬性,可是沒有pageX,pageY屬性; Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性. * 解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。

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

* 超連接訪問事後hover樣式就不出現了 被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

* 怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發怪異模式。爲避免怪異模式給咱們帶來沒必要要的麻煩，最好養成書寫DTD聲明的好習慣。如今可使用[html5]( http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html>`

* 上下margin重合問題
ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，可是margin-top和margin-bottom卻會發生重合。
解決方法，養成良好的代碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。

* ie6對png圖片格式支持很差(引用一段腳本處理)

 

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

一、儘可能減小HTTP請求次數
二、減小DNS查找次數
三、避免跳轉
四、可緩存的AJAX
五、推遲加載內容
六、預加載
七、減小DOM元素數量
八、根據域名劃分頁面內容
九、使iframe的數量最小
十、不要出現404錯誤
十一、使用內容分發網絡
十二、爲文件頭指定Expires或Cache-Control 1三、Gzip壓縮文件內容
1四、配置ETag
1五、儘早刷新輸出緩衝
1六、使用GET來完成AJAX請求
1七、把樣式表置於頂部
1八、避免使用CSS表達式（Expression）
1九、使用外部JavaScript和CSS
20、削減JavaScript和CSS
2一、用<link>代替@import
2二、避免使用濾鏡
2三、把腳本置於頁面底部
2四、剔除重複腳本

 

19.jquery版本?1.11兼容?

Query 2.x系列和 jQuery 1.x擁有一樣的API，可是再也不支持IE六、七、8。
推薦使用 1.x version，除非你肯定IE六、七、8用戶再也不訪問網站。
jquery1.11屬於1.x 版本，其兼容IE六、七、8，因此也支持IE9.

 

20.塊級？行內？空元素?

行內元素：和有他元素都在一行上，高度、行高及外邊距和內邊距都不可改變，文字圖片的寬度不可改變，只能容納文本或者其餘行內元素
塊級元素：老是在新行上開始，高度、行高及外邊距和內邊距均可控制，能夠容納內斂元素和其餘元素；
空元素：在HTML元素中，沒有內容的 HTML 元素被稱爲空元素。空元素是在開始標籤中關閉的。<br> 就是沒有關閉標籤的空元素。

 

21.media屬性？screen？All？max-width?min-width?

media 屬性規定被連接文檔將顯示在什麼設備上。media 屬性用於爲不一樣的媒介類型規定不一樣的樣式。Screen計算機默認屏幕，all適用於全部設備，max-width超過最大寬度就不執行，min-width必須大於最小寬度才執行。

 

22.meta標籤的name屬性值？

name 屬性主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
meta標籤的name屬性語法格式是：＜meta name="參數" content="具體的參數值"＞。
其中name屬性主要有如下幾種參數：
A 、Keywords(關鍵字)說明：keywords用來告訴搜索引擎你網頁的關鍵字是什麼。
B 、description(網站內容描述) 說明：description用來告訴搜索引擎你的網站主要內容.
C 、robots(機器人嚮導)說明：robots用來告訴搜索機器人哪些頁面須要索引，哪些頁面不須要索引。
content的參數有all,none,index,noindex,follow,nofollow,默認是all。
舉例：＜meta name="robots" content="none"＞D 、author(做者)

 

23.通常作手機頁面切圖有幾種方式?

響應式佈局，彈性佈局display：flex，利用js編寫設定比例，給根元素設定像素，使用rem爲單位。

 

24.px/em/rem有什麼區別？ 爲何一般給font-size 設置的字體爲62.5%

相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。
一、em的值並非固定的；
二、em會繼承父級元素的字體大小。使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。
rem是相對於瀏覽器進行縮放的。1rem默認是16px，在響應式佈局中，一個個除來轉換成rem，太麻煩，因此重置rem
body{font-size=62.5% } 此時1rem = 10px;如果12px則是1.2rem.

 

25.sass和scss有什麼區別?sass通常怎麼樣編譯的

文件擴展名不一樣，Sass 是以「.sass」後綴爲擴展名，而 SCSS 是以「.scss」後綴爲擴展名；語法書寫方式不一樣，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和咱們的 CSS 語法書寫方式很是相似。

 

26.若是對css進行優化如何處理？

壓縮打包，圖片整合，避免使用Hack，解決兼容問題，使用簡寫，讓CSS能保證往後的維護。

 

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

使用gulp, 首頁全局安裝gulp。
一、npm install --global gulp 
二、其次局部安裝gulp。npm install gulp --save-dev
三、在項目根目錄下建立一個名爲 gulpfile.js 的文件
var gulp = require('gulp');
gulp.task('default', function() {
// 將你的默認的任務代碼放在這});
四、運行gulp。（默認的名爲 default 的任務（task）將會被運行，想要單獨執行特定的任務（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 把圖片設置爲背景圖片。

 

30.禁止事件冒泡

event.stopPropagation()

 

31.禁止默認事件

event.preventDefault()

 

32.a標籤中 active hover link visited 正確的設置順序是什麼?

a標籤的link、visited、hover、active是有必定順序的
a:link 
a:visited 
a:hover 
a:active

 

33.a標籤中 如何禁用href 跳轉頁面 或 定位連接

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

 

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

onselect=function() {
return false
}

 

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

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

 

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

視頻格式：MPEG-一、MPEG-2和MPEG4 、AVI 、RM、ASF和WMV格式 
視頻編碼格式：H.26四、MPEG-四、MPEG-二、WMA-HD以及VC-1

 

37.canvas在標籤上設置寬高 和在style中設置寬高有什麼區別？

canvas標籤的width和height是畫布實際寬度和高度，繪製的圖形都是在這個上面。而style的width和height是canvas在瀏覽器中被渲染的高度和寬度。若是canvas的width和height沒指定或值不正確，就被設置成默認值 。

 

38.border-image？box-sizing?

Border-image : 圖形化邊框
Box-sizing : 屬性容許您以特定的方式定義匹配某個區域的特定元素。
語法 ：box-sizing：content-box | border-box
Content-box : padding和border不被包含在定義的width和height以內。對象的實際寬度等於設置的width值和border、padding之和，即 ( Element width = width + border + padding) 此屬性表現爲標準模式下的盒模型 .
Border-box : padding和border被包含在定義的width和height以內。對象的實際寬度就等於設置的width值，即便定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width ) 此屬性表現爲怪異模式下的盒模型。

 

39.漸進加強和優雅降級

漸進加強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。
區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。
降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶。
「優雅降級」觀點
「優雅降級」觀點認爲應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認爲「過期」或有功能缺失的瀏覽器下的測試工做安排在開發週期的最後階段，並把測試對象限定爲主流瀏覽器（如 IE、Mozilla 等）的前一個版本。
在這種設計範例下，舊版的瀏覽器被認爲僅能提供「簡陋卻無妨 (poor, but passable)」 的瀏覽體驗。你能夠作一些小的調整來適應某個特定的瀏覽器。但因爲它們並不是咱們所關注的焦點，所以除了修復較大的錯誤以外，其它的差別將被直接忽略。
「漸進加強」觀點
「漸進加強」觀點則認爲應關注於內容自己。
內容是咱們創建網站的誘因。有的網站展現它，有的則收集它，有的尋求，有的操做，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得「漸進加強」成爲一種更爲合理的設計範例。這也是它當即被 Yahoo! 所採納並用以構建其「分級式瀏覽器支持 (Graded Browser Support)」策略的緣由所在。
那麼問題來了。如今產品經理看到IE6,7,8網頁效果相對高版本現代瀏覽器少了不少圓角，陰影（CSS3），要求兼容（使用圖片背景，放棄CSS3），你會如何說服他？

 

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

IE當padding+border的值小於width或者height: 
盒模型的寬度=margin(左右)+width（width已經包含了padding和border的值） 
盒模型的高度=margin(上下)+height（height已經包含了padding和border的值） 
當padding+border的值大於width或者height: 
盒模型的寬度=margin(左右)+padding(左右)+border(左右) 
盒模型的高度=margin(上下)+padding(上下)+border(上下)+19px （加一個默認行高 19px） 因此至關因而padding+border和width或者height比大小，誰大取誰。 
以上幾種DOCTYPE都是標準的文檔類型，不管使用哪一種模式完整定義DOCTYPE，都會觸發標準模式，而若是DOCTYPE缺失則在ie6，ie7，ie8下將會觸發怪異模式（quirks 模式） CSS3box-sizing有兩個值一個是content-box，另外一個是border-box。 
當設置爲box-sizing:content-box時，將採用標準模式解析計算，也是默認模式； 
當設置爲box-sizing:border-box時，將採用怪異模式解析計算； 
Css3彈性盒模型引入了新的盒子模型—彈性盒模型，該模型決定一個盒子在其餘盒子中的分佈方式以及如何處理可用的空間。使用該模型，能夠很輕鬆的建立自適應瀏覽器窗口的流動佈局或自適應字體大小的彈性佈局。

 

41.animation對應的屬性

寫法：animation: name duration timing-function delay iteration-count direction; 
下面是對應的屬性的介紹 
animation-name 規定須要綁定到選擇器的 keyframe 名稱。
animation-duration 規定完成動畫所花費的時間，以秒或毫秒計。 
animation-timing-function 規定動畫的速度曲線。 
animation-delay 規定在動畫開始以前的延遲。 
animation-iteration-count 規定動畫應該播放的次數。 
animation-direction 規定是否應該輪流反向播放動畫。

 

42.transition?

css的transition容許css的屬性值在必定的時間區間內平滑地過渡。這種效果能夠在鼠標單擊、得到焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值 注意區別transform，transform是進行2D轉換的 如移動，比例化，反過來，旋轉，和拉伸元素。

 

43.h5新特性？

一、繪畫的 canvas 元素 
二、用於媒介回放的 video 和 audio 元素 
三、對本地離線存儲的更好的支持 
四、新的特殊內容元素，好比 article、footer、header、nav、section 五、新的表單控件，好比 calendar、date、time、email、url、search

 

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

moveto 是移動到某個座標， lineto 是從當前座標連線到某個座標。
這兩個函數加起來就是畫一條直線。 畫線要用「筆」，那麼MoveTo()把筆要畫的起始位置固定了（x,y）而後要固定終止位置要用到LineTo函數肯定終止位置（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清除浮動的幾種方式？

一、父級div定義 height 
二、結尾處加空div標籤 clear:both 
三、父級div定義 僞類:after 和 zoom 
四、父級div定義 overflow:hidden 
五、父級div定義 overflow:auto 
六、父級div 也一塊兒浮動 
七、父級div定義 display:table

 

47.爲何要初始化CSS樣式。

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

 

48.CSS3有哪些新特性？

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

 

49.解釋下 CSS sprites，以及你要如何在頁面或網站中使用它。

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置。這樣能夠減小不少圖片請求的開銷，由於請求耗時比較長；請求雖然能夠併發，可是也有限制，通常瀏覽器都是6個。對於將來而言，就不須要這樣作了，由於有了`http2`。

 

50.什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？

FOUC - Flash Of Unstyled Content 文檔樣式閃爍
<style type="text/css" media="all">@import "../fouc.css";</style> 
而引用CSS文件的@import就是形成這個問題的罪魁禍首。IE會先加載整個HTML文檔的DOM，而後再去導入外部的CSS文件，所以，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關係。
解決方法：只要在<head>之間加入一個<link>或者<script>元素就能夠了。

 

51.a點擊出現框，解決方法:

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; }