整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
覽器兼容性問題著實讓人頭疼，從最初的IE6瀏覽器到現在HTML5+CSS3的興起，依然會存在兼容性問題，這里分享幾個小技巧來避免這個問題。
如果你正在使用最新的 CSS 代碼，比如 box-sizing，或者 background-clip等，確保你使用了合適的供應商前綴。
大家可以從網上下載寫好的樣式模板，也可以自己去寫，當然建議下載一個完整版，自行保存，這樣每次使用的時候可以直接拿來。
當你給一個包含 width 的元素加 padding，那它實際顯示的要比本應顯示的大。因為 width 和 padding 會加到一起。比如一個元素 width 是 100px，又給它加了一個 10px 的 padding。那某些瀏覽器會將該元素顯示成 120px。
為了解決這個問題，可以用如下代碼：
在寫頁面的時候要確保我們把浮動都清理掉了，如果不清理掉，可能會出現很奇怪的情況。
可以用下面 CSS 代碼清理浮動：
如果要把你大部分代碼都包起來，有個更簡單的方法就是把它添加到我們的 wrap 類里面：
這樣的話浮動就沒清理掉了，想學習更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干貨。
掌握這幾個小技巧，讓它成為日常開發的習慣，會避免90%的跨瀏覽器不兼容問題，拿走不謝。
.行內元素和塊級元素?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屬性?？梢宰屪釉匕凑崭冈氐膶挾冗M行一定比例的分占空間。 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會識別)
* 漸進識別的方式，從總體中逐漸排除局部。 首先，巧妙的使用“”這一標記，將IE游覽器從所有情況中分離出來。 接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
css// .bb{ background-color:#f1ee18; .background-color:#00deff; +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新添加的方式
1、盡量減少HTTP請求次數2、減少DNS查找次數
3、避免跳轉
4、可緩存的AJAX
5、推遲加載內容
6、預加載
7、減少DOM元素數量
8、根據域名劃分頁面內容
9、使iframe的數量最小
10、不要出現404錯誤
11、使用內容分發網絡
12、為文件頭指定Expires或Cache-Control 13、Gzip壓縮文件內容
14、配置ETag
15、盡早刷新輸出緩沖
16、使用GET來完成AJAX請求
17、把樣式表置于頂部
18、避免使用CSS表達式（Expression）
19、使用外部JavaScript和CSS
20、削減JavaScript和CSS
21、用<link>代替@import
22、避免使用濾鏡
23、把腳本置于頁面底部
24、剔除重復腳本
19.jquery版本?1.11兼容?
Query 2.x系列和 jQuery 1.x擁有同樣的API，但是不再支持IE6、7、8。推薦使用 1.x version，除非你確定IE6、7、8用戶不再訪問網站。
jquery1.11屬于1.x 版本，其兼容IE6、7、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%
相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。1、em的值并不是固定的；
2、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。1、npm install --global gulp
2、其次局部安裝gulp。npm install gulp --save-dev
3、在項目根目錄下創建一個名為 gulpfile.js 的文件
var gulp = require('gulp');
gulp.task('default', function() {
// 將你的默認的任務代碼放在這});
4、運行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-1、MPEG-2和MPEG4 、AVI 、RM、ASF和WMV格式視頻編碼格式：H.264、MPEG-4、MPEG-2、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)”策略的原因所在。
那么問題來了?，F在產品經理看到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新特性？
1、繪畫的 canvas 元素2、用于媒介回放的 video 和 audio 元素
3、對本地離線存儲的更好的支持
4、新的特殊內容元素，比如 article、footer、header、nav、section 5、新的表單控件，比如 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清除浮動的幾種方式？
1、父級div定義 height2、結尾處加空div標簽 clear:both
3、父級div定義 偽類:after 和 zoom
4、父級div定義 overflow:hidden
5、父級div定義 overflow:auto
6、父級div 也一起浮動
7、父級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點擊出現框，解決方法:
見瀏覽器兼容性問題與解決方案？
參考答案
(1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補丁和內補丁不同
問題癥狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。
碰到頻率:100%
解決方案：CSS里 {margin:0;padding:0;}
備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符來設置各個標簽的內外補丁是0。
(2)瀏覽器兼容問題二：塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大
問題癥狀:常見癥狀是IE6中后面的一塊被頂到下一行
碰到頻率：90%（稍微復雜點的頁面都會碰到，float布局最常見的瀏覽器兼容問題）
解決方案：在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性
備注：我們最常用的就是div+CSS布局了，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用div float實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼容性問題。
(3)瀏覽器兼容問題三：設置較小高度標簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設置高度
問題癥狀：IE6、7和遨游里這個標簽的高度不受控制，超出自己設置的高度
碰到頻率：60%
解決方案：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小于你設置的高度。
備注：這種情況一般出現在我們設置小圓角背景的標簽里。出現這個問題的原因是IE8之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使你的標簽是空的，這個標簽的高度還是會達到默認的行高。
(4)瀏覽器兼容問題四：行內屬性標簽，設置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug
問題癥狀：IE6里的間距比超過設置的間距
碰到幾率：20%
解決方案 ： 在display:block;后面加入display:inline;display:table;
備注：行內屬性標簽，為了設置寬高，我們需要設置display:block;(除了input標簽比較特殊)。在用float布局并有橫向的margin后，在IE6下，他就具有了塊屬性float后的橫向margin的bug。不過因為它本身就是行內屬性標簽，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline后面加入display:talbe。
(5) 瀏覽器兼容問題五：圖片默認有間距
問題癥狀：幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起作用。
碰到幾率：20%
解決方案：使用float屬性為img布局
備注 ： 因為img標簽是行內屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距。去掉這個間距使用float是正道。（我的一個學生使用負margin，雖然能解決，但負margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）
(6) 瀏覽器兼容問題六：標簽最低高度設置min-height不兼容
問題癥狀：因為min-height本身就是一個不兼容的CSS屬性，所以設置min-height時不能很好的被各個瀏覽器兼容
碰到幾率：5%
解決方案：如果我們要設置一個標簽的最小高度200px，需要進行的設置為：{min-height:200px; height:auto !important;
height:200px; overflow:visible;}
備注：在B/S系統前端開時，有很多情況下我們又這種需求。當內容小于一個值（如300px）時。容器的高度為300px；當內容高度大于這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個兼容性問題。
(7)瀏覽器兼容問題七：透明度的兼容CSS設置
一般在ie中用的是filter:alpha(opacity=0);這個屬性來設置div或者是塊級元素的透明度，而在firefox中，一般就是直接使用opacity:0,對于兼容的，一般的做法就是在書寫css樣式的將2個都寫上就行，就能實現兼容
列出display的值并說明他們的作用？
參考答案
display： none | inline | block |
list-item | inline-block | table | inline-table |
table-caption | table-cell | table-row | table-row-group | table-column |
table-column-group | table-footer-group | table-header-group | run-in | box |
inline-box | flexbox | inline-flexbox | flex | inline-flex
默認值：inline
none： 隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間
inline： 指定對象為內聯元素。
block： 指定對象為塊元素。
list-item：指定對象為列表項目。
inline-block： 指定對象為內聯塊元素。（CSS2）
table： 指定對象作為塊元素級的表格。類同于html標簽<table>（CSS2）
inline-table：指定對象作為內聯元素級的表格。類同于html標簽<table>（CSS2）
table-caption：指定對象作為表格標題。類同于html標簽<caption>（CSS2）
table-cell：指定對象作為表格單元格。類同于html標簽<td>（CSS2）
table-row：指定對象作為表格行。類同于html標簽<tr>（CSS2）
table-row-group：指定對象作為表格行組。類同于html標簽<tbody>（CSS2）
table-column：指定對象作為表格列。類同于html標簽<col>（CSS2）
table-column-group： 指定對象作為表格列組顯示。類同于html標簽<colgroup>（CSS2）
table-header-group： 指定對象作為表格標題組。類同于html標簽<thead>（CSS2）
table-footer-group： 指定對象作為表格腳注組。類同于html標簽<tfoot>（CSS2）
run-in：根據上下文決定對象是內聯對象還是塊級對象。（CSS3）
box：將對象作為彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
inline-box：將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
flexbox：將對象作為彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
inline-flexbox：將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
flex：將對象作為彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
inline-flex：將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
如何居中div, 如何居中一個浮動元素?
參考答案
(1)、非浮動元素居中：可以設置margin:0 auto 令其居中, 定位 ,父級元素text-algin:center等等
(2)、浮動元素居中:
方法一:設置當前div的寬度，然后設置margin-left:50%; position:relative; left:-250px;其中的left是寬度的一半。
方法二:父元素和子元素同時左浮動，然后父元素相對左移動50%，再然后子元素相對左移動-50%。
方法三:position定位等等。
CSS中link 和@import 的區別是？
參考答案
(1)、link屬于HTML標簽，而@import是CSS提供的;
(2)、頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
(3)、import只在IE5以上才能識別，而link是HTML標簽，無兼容問題;
(4)、link方式的樣式的權重高于@import的權重.
請列舉幾種清除浮動的方法(至少兩種)?
參考答案
(1)、父級div定義 height
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優點：簡單、代碼少、容易掌握
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
建議：不推薦使用，只建議高度固定的布局時使用
(2)、結尾處加空div標簽 clear:both
原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法
(3)、父級div定義
偽類:after 和 zoom
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
優點：瀏覽器支持好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
缺點：代碼多、不少初學者不理解原理，要兩句代碼結合使用才能讓主流瀏覽器都支持。
建議：推薦使用，建議定義公共類，以減少CSS代碼。
(4)、父級div定義 overflow:hidden
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、代碼少、瀏覽器支持好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。
建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。
(5)、父級div定義 overflow:auto
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、代碼少、瀏覽器支持好
缺點：內部寬高超過父級div時，會出現滾動條。
建議：不推薦使用，如果你需要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。
block，inline和inlinke-block細節對比？
參考答案
?
display:block
a、block元素會獨占一行，多個block元素會各自新起一行。默認情況下，block元素寬度自動填滿其父元素寬度。
b、block元素可以設置width,height屬性。塊級元素即使設置了寬度,仍然是獨占一行。
c、block元素可以設置margin和padding屬性。
? display:inline
a、inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。
b、inline元素設置width,height屬性無效。
c、inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left,
margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top,
margin-bottom不會產生邊距效果。
? display:inline-block
a、簡單來說就是將對象呈現為inline對象，但是對象的內容作為block對象呈現。之后的內聯對象會被排列在同一行內。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
補充說明
a、一般我們會用display:block，display:inline或者display:inline-block來調整元素的布局級別，其實display的參數遠遠不止這三種，僅僅是比較常用而已。
b、IE（低版本IE）本來是不支持inline-block的，所以在IE中對內聯元素使用display:inline-block，理論上IE是不識別的，但使用display:inline-block在IE下會觸發layout，從而使內聯元素擁有了display:inline-block屬性的表象。
什么叫優雅降級和漸進增強？
參考答案
優雅降級： Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效.
漸進增強： 從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來并發揮作用。
說說浮動元素會引起的問題和你的解決辦法
參考答案
問題：
（1）父元素的高度無法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其后
（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構
解決方法：
使用CSS中的clear:both;屬性來清除元素的浮動可解決問題(2)、(3)，對于問題(1)，添加如下樣式，給父元素添加clearfix樣式：
.clearfix:after{content: ".";display: block;height: 0;clear:
both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
清除浮動的幾種方法：
(1)、額外標簽法，<div
style="clear:both;"></div>（缺點：不過這個辦法會增加額外的標簽使HTML結構看起來不夠簡潔。）
(2)、使用after偽類
content:" ";
height:0;
visibility:hidden;
display:block;
clear:both;
}
(3)、浮動外部元素
(4)、設置overflow為hidden或者auto
你有哪些性能優化的方法？
參考答案
回答一：
（1）、減少http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN托管，data緩存
，圖片服務器。
（2）、前端模板 JS+數據，減少由于HTML標簽導致的帶寬浪費，前端用變量保存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數
（3）、用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。
（4）、當需要設置的樣式很多時設置className而不是直接操作style。
（5）、少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作。
（6）、避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。
（7）、圖片預加載，將樣式表放在頂部，將腳本放在底部加上時間戳。
回答二：
(1)、減少HTTP請求次數
(2)、使用CDN
(3)、避免空的src和href
(4)、為文件頭指定Expires
(5)、使用gzip壓縮內容
(6)、把CSS放到頂部
(7)、把JS放到底部
(8)、避免使用CSS表達式
(9)、將CSS和JS放到外部文件中
(10)、避免跳轉
(11)、可緩存的AJAX
(12)、使用GET來完成AJAX請求
為什么要初始化CSS樣式？
參考答案
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
最簡單的初始化方法就是： {padding: 0; margin: 0;} （不建議）
解釋下浮動和它的工作原理？清除浮動的技巧？
參考答案
浮動元素脫離文檔流，不占據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
(1)、使用空標簽清除浮動。
這種方法是在所有浮動標簽后面添加一個空標簽 定義css clear:both. 弊端就是增加了無意義標簽。
(2)、使用overflow。
給包含浮動元素的父標簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
(3)、使用after偽對象清除浮動。
該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設置height:0，否則該元素會比實際高出若干像素；
CSS樣式表根據所在網頁的位置，可分為哪幾種樣式表？
參考答案
行內樣式表，內嵌樣式表，外部樣式表
談談你對CSS中刻度的認識？
參考答案
在CSS中刻度是用于設置元素尺寸的單位。
a、特殊值0可以省略單位。例如：margin:0px可以寫成margin:0
b、一些屬性可能允許有負長度值，或者有一定的范圍限制。如果不支持負長度值，那應該變換到能夠被支持的最近的一個長度值。
c、長度單位包括：相對單位和絕對單位。
相對長度單位有： em, ex, ch, rem, vw, vh, vmax,
vmin
絕對長度單位有： cm, mm, q, in, pt, pc, px
絕對長度單位：1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
文本相對長度單位：em
相對長度單位是相對于當前對象內文本的字體尺寸，如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。(相對父元素的字體大小倍數)
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 1em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }
文本相對長度單位：rem
rem是CSS3新增的一個相對單位（root em，根em），相對于根元素(即html元素)font-size計算值的倍數
只相對于根元素的大小
瀏覽器的默認字體大小為16像素，瀏覽器默認樣式也稱為user agent stylesheet，就是所有瀏覽器內置的默認樣式，多數是可以被修改的，但chrome不能直接修改，可以被用戶樣式覆蓋。
請你說說em與rem的區別？
參考答案
rem
rem是CSS3新增的一個相對單位（root em，根em），相對于根元素(即html元素)font-size計算值的倍數
只相對于根元素的大小
rem（font size of the root element）是指相對于根元素的字體大小的單位。簡單的說它就是一個相對單位。
作用：利用rem可以實現簡單的響應式布局，可以利用html元素中字體的大小與屏幕間的比值設置font-size的值實現當屏幕分辨率變化時讓元素也變化，以前的天貓tmall就使用這種辦法
em
文本相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸(默認16px)。(相對父元素的字體大小倍數)
em（font size of the element）是指相對于父元素的字體大小的單位。它與rem之間其實很相似，區別在。（相對是的HTML元素的字體大，默認16px）
em與rem的重要區別： 它們計算的規則一個是依賴父元素另一個是依賴根元素計算
請你說說box-sizing屬性的的用法？
參考答案
設置或檢索對象的盒模型組成模式
a、box-sizing:content-box： padding和border不被包含在定義的width和height之內。對象的實際寬度等于設置的width值和border、padding之和，即( Element width = width + border + padding，但占有頁面位置還要加上margin ) 此屬性表現為標準模式下的盒模型。
b、box-sizing:border-box： padding和border被包含在定義的width和height之內。對象的實際寬度就等于設置的width值，即使定義有border和padding也不會改變對象的實際寬度，即( Element width = width ) 此屬性表現為怪異模式下的盒模型。
瀏覽器標準模式和怪異模式之間的區別是什么？
參考答案
在“標準模式”(Standards Mode) 頁面按照 HTML 與 CSS 的定義渲染，而在“怪異模式”(Quirks Mode)就是瀏覽器為了兼容很早之前針對舊版本瀏覽器設計、并未嚴格遵循W3C 標準的網頁而產生的一種頁面渲染模式。瀏覽器基于頁面中文件類型描述的存在以決定采用哪種渲染模式；如果存在一個完整的DOCTYPE則瀏覽器將會采用標準模式，而如果它缺失則瀏覽器將會采用怪異模式。
強烈建議閱讀加深理解：怪異模式（Quirks Mode）對 HTML 頁面的影響，這里列下瀏覽器標準模式和怪異模式的區別：
（1）盒模型：
在怪異模式下，盒模型為IE盒模型而非標準模式下的W3C 盒模型：在 IE 盒模型中，
box width = content width + padding left + padding right + border left + border
right，
box height = content height + padding top + padding bottom + border top +
border bottom。
而在 W3C 標準的盒模型中，box 的大小就是 content 的大小。
（2）圖片元素的垂直對齊方式:
對于inline元素和table-cell元素，在 IE Standards Mode 下 vertical-align 屬性默認取值為baseline。而當inline元素的內容只有圖片時，如table的單元格table-cell。在 IE Quirks Mode 下，table單元格中的圖片的 vertical-align 屬性默認為bottom，因此，在圖片底部會有幾像素的空間。
（3）<table>元素中的字體:
CSS 中，描述font的屬性有font-family，font-size，font-style，font-weigh,上述屬性都是可以繼承的。而在IE Quirks Mode 下，對于table 元素，字體的某些屬性將不會從body或其他封閉元素繼承到table中，特別是 font-size屬性。
（4）
內聯元素的尺寸:
在 IE Standards Mode 下，non-replaced inline 元素無法自定義大小，而在IE Quirks Mode 下，定義這些元素的width和height 屬性，能夠影響該元素顯示的大小尺寸。
（5）
元素的百分比高度:
a、CSS 中對于元素的百分比高度規定如下，百分比為元素包含塊的高度，不可為負值。如果包含塊的高度沒有顯式給出，該值等同于“auto”（即取決于內容的高度）。所以百分比的高度必須在父元素有聲明高度時使用。
b、當一個元素使用百分比高度時，在IE Standards Mode 下，高度取決于內容的變化，而在Quirks Mode 下，百分比高度則被正確應用。
（6）
元素溢出的處理：
在 IE Standard Mode 下，overflow取默認值 visible，即溢出可見，這種情況下，溢出內容不會被裁剪，呈現在元素框外。而在Quirks Mode 下，該溢出被當做擴展box來對待，即元素的大小由其內容決定，溢出不會被裁剪，元素框自動調整，包含溢出內容。
怪異Quirks模式是什么，它和標準Standards模式有什么區別？
參考答案
從IE6開始，引入了Standards模式，標準模式中，瀏覽器嘗試給符合標準的文檔在規范上的正確處理達到在指定瀏覽器中的程度。
在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對CSS的支持很差， IE6將對CSS提供更好的支持，然而這時的問題就來了，因為有很多頁面是基于舊的布局方式寫的，而如果IE6 支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現有頁面，又提供新的渲染機制呢？
在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。遇到這種問題時的一個常見做法是增加參數和分支，即當某個參數為真時，我們就使用新功能，而如果這個參數 不為真時，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是類似這樣做的，它將DTD當成了這個“參數”，因為以前的頁面大家都不會去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。
區別：總體會有布局、樣式解析和腳本執行三個方面的區別。
盒模型： 在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
設置行內元素的高寬： 在Standards模式下，給<span>等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。
設置百分比的高度： 在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用margin:0 auto設置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。
（還有很多，答出什么不重要，關鍵是看他答出的這些是不是自己經驗遇到的，還是說都是看文章看的，甚至完全不知道。）
說說你對邊距折疊的理解?
參考答案
外邊距折疊： 相鄰的兩個或多個外邊距 (margin) 在垂直方向會合并成一個外邊距（margin）
相鄰： 沒有被非空內容、padding、border 或 clear 分隔開的margin特性. 非空內容就是說這元素之間要么是兄弟關系或者父子關系
垂直方向外邊距合并計算:
a、參加折疊的margin都是正值：取其中 margin 較大的值為最終 margin 值。
b、參與折疊的margin 都是負值：取的是其中絕對值較大的，然后，從0 位置，負向位移。
c、參與折疊的margin 中有正值，有負值：先取出負 margin 中絕對值中最大的，然后，和正margin 值中最大的 margin 相加。
內聯與塊級標簽有何區別？
參考答案
Html中的標簽默認主要分為兩大類型，一類為塊級元素，另一類是行內元素，許多人也把行內稱為內聯，所以叫內聯元素，其實就是一個意思。為了很好的布局，必須理解它們間的區別。
說說隱藏元素的方式有哪些？
參考答案
a、使用CSS的display:none，不會占有原來的位置
b、使用CSS的visibility:hidden，會占有原來的位置
c、使用HTML5中的新增屬性hidden="hidden"，不會占有原來的位置
為什么重置瀏覽器默認樣式，如何重置默瀏覽器認樣式？
參考答案
每種瀏覽器都有一套默認的樣式表，即user agent stylesheet，網頁在沒有指定的樣式時，按瀏覽器內置的樣式表來渲染。這是合理的，像word中也有一些預留樣式，可以讓我們的排版更美觀整齊。不同瀏覽器甚至同一瀏覽器不同版本的默認樣式是不同的。但這樣會有很多兼容問題。
a、最簡單的辦法：（不推薦使用）*{margin: 0;padding: 0;}。
b、使用CSSReset可以將所有瀏覽器默認樣式設置成一樣。
c、normalize：也許有些cssreset過于簡單粗暴，有點傷及無辜，normalize是另一個選擇。bootstrap已經引用該css來重置瀏覽器默認樣式，比普通的cssreset要精細一些，保留瀏覽器有用的默認樣式，支持包括手機瀏覽器在內的超多瀏覽器，同時對HTML5元素、排版、列表、嵌入的內容、表單和表格都進行了一般化。
天貓 使用的css reset重置瀏覽器默認樣式：
@charset
"gb2312";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 "microsoft yahei";line-height: 1.5;-ms-overflow-style: scrollbar}h1,
h2, h3, h4, h5, h6 {font-size: 100%}ul, ol {list-style: none}a
{text-decoration: none;cursor:pointer}a:hover
{text-decoration: underline}img {border: 0}button, input, select,
textarea {font-size: 100%}table {border-collapse: collapse;border-spacing: 0}.clear
{clear:both}.fr {float:right}.fl {float:left}.block
{display:block;text-indent:-999em}
談談你對BFC與IFC的理解？(是什么，如何產生，作用)
參考答案
(1)、什么是BFC與IFC
a、BFC（Block Formatting Context）即“塊級格式化上下文”， IFC（Inline Formatting Context）即行內格式化上下文。常規流（也稱標準流、普通流）是一個文檔在被顯示時最常見的布局形態。一個框在常規流中必須屬于一個格式化上下文，你可以把BFC想象成一個大箱子，箱子外邊的元素將不與箱子內的元素產生作用。
b、BFC是W3C CSS 2.1 規范中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。當涉及到可視化布局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照一定規則進行布局。一個環境中的元素不會影響到其它環境中的布局。比如浮動元素會形成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。也可以說BFC就是一個作用范圍。
c、在普通流中的Box(框) 屬于一種 formatting context(格式化上下文) ，類型可以是 block ，或者是 inline ，但不能同時屬于這兩者。并且，Block boxes(塊框) 在 block formatting context(塊格式化上下文) 里格式化， Inline boxes(塊內框) 則在 Inline Formatting Context(行內格式化上下文) 里格式化。
(2)、如何產生BFC
當一個HTML元素滿足下面條件的任何一點，都可以產生Block Formatting Context：
a、float的值不為none
b、overflow的值不為visible
c、display的值為table-cell, table-caption, inline-block中的任何一個
d、position的值不為relative和static
CSS3觸發BFC方式則可以簡單描述為：在元素定位非static，relative的情況下觸發，float也是一種定位方式。
(3)、BFC的作用與特點
a、不和浮動元素重疊，清除外部浮動，阻止浮動元素覆蓋
如果一個浮動元素后面跟著一個非浮動的元素，那么就會產生一個重疊的現象。常規流（也稱標準流、普通流）是一個文檔在被顯示時最常見的布局形態，當float不為none時，position為absolute、fixed時元素將脫離標準流。
說說你對頁面中使用定位(position)的理解？
參考答案
使用css布局position非常重要，語法如下：
position：static | relative | absolute | fixed |
center | page | sticky
默認值：static，center、page、sticky是CSS3中新增加的值。
(1)、static
可以認為靜態的，默認元素都是靜態的定位，對象遵循常規流。此時4個定位偏移屬性不會被應用，也就是使用left，right，bottom，top將不會生效。
(2)、relative
相對定位，對象遵循常規流，并且參照自身在常規流中的位置通過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素。
(3)、absolute
a、絕對定位，對象脫離常規流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規流中的任何元素，其margin不與其他任何margin折疊。
b、元素定位參考的是離自身最近的定位祖先元素，要滿足兩個條件，第一個是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果沒有則選擇body為對照對象。第二個條件是要求祖先元素必須定位，通俗說就是position的屬性值為非static都行。
(4)、fixed
固定定位，與absolute一致，但偏移定位是以窗口為參考。當出現滾動條時，對象不會隨著滾動。
(5)、center
與absolute一致，但偏移定位是以定位祖先元素的中心點為參考。盒子在其包含容器垂直水平居中。（CSS3）
(6)、page
與absolute一致。元素在分頁媒體或者區域塊內，元素的包含塊始終是初始包含塊，否則取決于每個absolute模式。（CSS3）
(7)、sticky
對象在常態時遵循常規流。它就像是relative和fixed的合體，當在屏幕中時按常規流排版，當卷動到屏幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。（CSS3）
如何解決多個元素重疊問題？
參考答案
使用z-index屬性可以設置元素的層疊順序
z-index屬性
語法：z-index: auto | <integer>
默認值：auto
適用于：定位元素。即定義了position為非static的元素
取值：
auto：元素在當前層疊上下文中的層疊級別是0。元素不會創建新的局部層疊上下文，除非它是根元素。
整數： 用整數值來定義堆疊級別。可以為負值。 說明：
檢索或設置對象的層疊順序。
z-index用于確定元素在當前層疊上下文中的層疊級別，并確定該元素是否創建新的局部層疊上下文。
當多個元素層疊在一起時，數字大者將顯示在上面。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
