1.Label的作用是什么?是怎么用的

答案:

label標(biāo)簽來(lái)定義表單控制間的關(guān)系當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽
器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。

解析:兩種用法:一種是id綁定，-種是嵌套

<label for= "Name Number:/label>
<input type= "text "name= "Name' id="Name'/>
<label>Date:input type='text' name= 'B/></label>

2.iframe 框架有那些優(yōu)缺點(diǎn)？

（1）優(yōu)點(diǎn)

iframe 能夠原封不動(dòng)的把嵌入的網(wǎng)頁(yè)展現(xiàn)出來(lái)。
如果有多個(gè)網(wǎng)頁(yè)引用 iframe，那么你只需要修改 iframe 的內(nèi)容，就可以實(shí)現(xiàn)調(diào)用的每一個(gè)頁(yè)面內(nèi)容的更改，方便快捷。
網(wǎng)頁(yè)如果為了統(tǒng)一風(fēng)格，頭部和版本都是一樣的，就可以寫(xiě)成一個(gè)頁(yè)面，用 iframe 來(lái)嵌套，可以增加代碼的可重用。
如果遇到加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告，這些問(wèn)題可以由 iframe 來(lái)解決。

（2）缺點(diǎn)

框架結(jié)構(gòu)中出現(xiàn)各種滾動(dòng)條
iframe 會(huì)阻塞主頁(yè)面的 Onload 事件
搜索引擎的檢索程序無(wú)法解讀這種頁(yè)面，不利于 SEO
iframe 和主頁(yè)面共享連接池，而瀏覽器對(duì)相同域的連接有限制，所以會(huì)影響頁(yè)面的并行加載。

3.Doctype，這是干什么的么？

?!DOCTYPE? 聲明位于文檔中的最前面的位置，處于 ?html? 標(biāo)簽之前。

1.告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。
2.告訴瀏覽器按照何種規(guī)范解析頁(yè)（如果你的頁(yè)面沒(méi)有 DOCTYPE 的聲明，那么 compatMode 默認(rèn)就是 BackCompat,瀏覽器按照自己的方式解析渲染頁(yè)面）

解析：

doctype 是一種標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的文檔類型聲明，目的是告訴標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言解析器要使用什么樣的文檔類型定義（DTD）來(lái)解析文檔。
聲明是用來(lái)指示web瀏覽器關(guān)于頁(yè)面使用哪個(gè)HTML版本進(jìn)行編寫(xiě)的指令。 聲明必須是HTML文檔的第一行，位于html標(biāo)簽之前。

瀏覽器本身分為兩種模式，一種是標(biāo)準(zhǔn)模式，一種是怪異模式，瀏覽器通過(guò) doctype 來(lái)區(qū)分這兩種模式，doctype 在 html 中的作用就是觸發(fā)瀏覽器的標(biāo)準(zhǔn)模式，如果 html 中省略了 doctype，瀏覽器就會(huì)進(jìn)入到 Quirks 模式的怪異狀態(tài)，在這種模式下，有些樣式會(huì)和標(biāo)準(zhǔn)模式存在差異，而 html 標(biāo)準(zhǔn)和 dom 標(biāo)準(zhǔn)值規(guī)定了標(biāo)準(zhǔn)模式下的行為，沒(méi)有對(duì)怪異模式做出規(guī)定，因此不同瀏覽器在怪異模式下的處理也是不同的，所以一定要在 html 開(kāi)頭使用 doctype。

嚴(yán)格模式與混雜模式

嚴(yán)格模式：以瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行
混雜模式：頁(yè)面以寬松向下兼容的方式顯示，模擬老式瀏覽器的行為

4.列舉 IE 與其他瀏覽器不一樣的特性？

a. IE 的排版引擎是 Trident （又稱為 MSHTML）
b. Trident 內(nèi)核曾經(jīng)幾乎與 W3C 標(biāo)準(zhǔn)脫節(jié)（2005 年）
c. Trident 內(nèi)核的大量 Bug 等安全性問(wèn)題沒(méi)有得到及時(shí)解決
d. JS 方面，有很多獨(dú)立的方法，例如綁定事件的 attachEvent、創(chuàng)建事件的 createEventObject 等
e. CSS 方面，也有自己獨(dú)有的處理方式，例如設(shè)置透明，低版本 IE 中使用濾鏡的方式

5.前端頁(yè)面有哪三層構(gòu)成，分別是什么？作用是什么？

分成：結(jié)構(gòu)層、表示層、行為層。

結(jié)構(gòu)層（structural layer）

由 HTML 或 XHTML 之類的標(biāo)記語(yǔ)言負(fù)責(zé)創(chuàng)建。標(biāo)簽，也就是那些出現(xiàn)在尖括號(hào)里的單詞，對(duì)網(wǎng)頁(yè)內(nèi)容的語(yǔ)義含義做出了描述，但這些標(biāo)簽不包含任何關(guān)于如何顯示有關(guān)內(nèi)容的信息。例如，P 標(biāo)簽表達(dá)了這樣一種語(yǔ)義：“這是一個(gè)文本段?！?/p>

表示層（presentation layer）

由 CSS 負(fù)責(zé)創(chuàng)建。 CSS 對(duì)“如何顯示有關(guān)內(nèi)容”的問(wèn)題做出了回答。

行為層（behaviorlayer）

負(fù)責(zé)回答“內(nèi)容應(yīng)該如何對(duì)事件做出反應(yīng)”這一問(wèn)題。這是 Javascript 語(yǔ)言和 DOM 主宰的領(lǐng)域。

6.為什么用多個(gè)域名存儲(chǔ)網(wǎng)站資源更有效？

1、CDN 緩存更方便
2、突破瀏覽器并發(fā)限制
3、節(jié)約 cookie 帶寬
4、節(jié)約主域名的連接數(shù)，優(yōu)化頁(yè)面響應(yīng)速度
5、防止不必要的安全問(wèn)題

7.頁(yè)面可見(jiàn)性（Page Visibility）API 可以有哪些用途？

頁(yè)面可見(jiàn)性： 就是對(duì)于用戶來(lái)說(shuō)，頁(yè)面是顯示還是隱藏, 所謂顯示的頁(yè)面，就是我們正在看的頁(yè)面；隱藏的頁(yè)面，就是我們沒(méi)有看的頁(yè)面。 因?yàn)?，我們一次可以打開(kāi)好多標(biāo)簽頁(yè)面來(lái)回切換著，始終只有一個(gè)頁(yè)面在我們眼前，其他頁(yè)面就是隱藏的，還有一種就是.........，(把瀏覽器最小化，所有的頁(yè)面就都不可見(jiàn)了)。

API 很簡(jiǎn)單，document.hidden 就返回一個(gè)布爾值，如果是 true, 表示頁(yè)面可見(jiàn)，false 則表示，頁(yè)面隱藏。 不同頁(yè)面之間來(lái)回切換，觸發(fā) visibilitychange 事件。 還有一個(gè) document.visibilityState, 表示頁(yè)面所處的狀態(tài)，取值：visible, hidden 等四個(gè)。

   document.addEventListener('visibilitychange', function() {
      if (document.hidden) {
        document.title = 'hidden';
      } else {
        document.title = 'visibile';
      }
  });

我們打開(kāi)這個(gè)頁(yè)面，然后再打開(kāi)另一個(gè)頁(yè)面，來(lái)回點(diǎn)擊這兩個(gè)頁(yè)面，當(dāng)我們看到這個(gè)頁(yè)面時(shí)，標(biāo)題顯示 visiable ,當(dāng)我們看另一個(gè)頁(yè)面時(shí)，標(biāo)題顯示 hidden;
動(dòng)畫(huà)，視頻，音頻都可以在頁(yè)面顯示時(shí)打開(kāi)，在頁(yè)面隱藏時(shí)關(guān)閉

8.div+css 的布局較 table 布局有什么優(yōu)點(diǎn)

分離 方便改版 快清晰簡(jiǎn)潔 seo
(1).改版的時(shí)候更方便 只要改 css 文件。
(2).頁(yè)面加載速度更快、結(jié)構(gòu)化清晰、頁(yè)面顯示簡(jiǎn)潔。
(3).表現(xiàn)與結(jié)構(gòu)相分離。
(4).易于優(yōu)化（seo）搜索引擎更友好，排名更容易靠前。

9.html 常見(jiàn)兼容性問(wèn)題？

（1）.雙邊距 BUG float 引起的，解決辦法: 使用 display解決
（2）.3 像素問(wèn)題 使用 float 引起的，解決辦法: 使用 dislpay:inline -3px
（3）.超鏈接 hover 點(diǎn)擊后失效，解決辦法: 使用正確的書(shū)寫(xiě)順序 link visited hover active
（4）.Ie z-index 問(wèn)題，解決辦法: 給父級(jí)添加 position:relative
（5）.Png 透明 ，解決辦法: 使用 js 代碼
（6）.Min-height 最小高度 ，解決辦法: ！Important 解決
（7）.select 在 ie6 下遮蓋，解決辦法: 使用 iframe 嵌套
（8）.為什么沒(méi)有辦法定義 1px 左右的寬度容器，解決辦法: （IE6 默認(rèn)的行高造成的，使用 over:hidden,zoom:0.08 line-height:1px）
（9).IE5-8 不支持 opacity，解決辦法：

.opacity {
    opacity: 0.4;
    filter: alpha(opacity=60); /_ for IE5-7 _/
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)'; /_ for IE 8_/
}

(10).IE6 不支持 PNG 透明背景，解決辦法: IE6 下使用 gif 圖片 或者filter濾鏡

10對(duì) WEB 標(biāo)準(zhǔn)以及 W3C 的理解與認(rèn)識(shí)

標(biāo)簽閉合、標(biāo)簽小寫(xiě)、不亂嵌套、提高搜索機(jī)器人搜索幾率、使用外 鏈 css 和 js 腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁(yè)面速度更快、內(nèi)容能被更多的用戶所訪問(wèn)、內(nèi)容能被更廣泛的設(shè)備所訪問(wèn)、更少的代碼和組件，容易維 護(hù)、改版方便，不需要變動(dòng)頁(yè)面內(nèi)容、提供打印版本而不需要復(fù)制內(nèi)容、提高網(wǎng)站易用性。

11如何在頁(yè)面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域？

答案：css3、js、map 加 area

一.border-radius (css3)

對(duì)于圓形，最直接的方法想到的就是 css3 的圓角屬性，這個(gè)屬性可以將 html 元素的形狀設(shè)置為圓形，這之后你想對(duì)該圓形區(qū)域設(shè)置什么事件就設(shè)置什么事件(當(dāng)然包括點(diǎn)擊)。（這里就不做具體的 test 了）

二.通過(guò)事件坐標(biāo)來(lái)實(shí)現(xiàn)（js）

也就是通過(guò) js 來(lái)進(jìn)行一個(gè)區(qū)域判斷，進(jìn)而簡(jiǎn)介地的形成可點(diǎn)區(qū)域，以下給出主要的 js 測(cè)試代碼：

// 獲取目標(biāo)元素
var box = document.getElementById('box');

// 對(duì)目標(biāo)元素target的圓形區(qū)域進(jìn)行一個(gè)點(diǎn)擊事件綁定
function bindClickOnCircleArea(target, callback) {
  target.onclick = function(e) {
e = e || window.event;

// target中心點(diǎn)的坐標(biāo)
var x1 = 100;
var y1 = 100;

// 事件源坐標(biāo)
var x2 = e.offsetX;
var y2 = e.offsetY;

// 校驗(yàn)是否在圓形點(diǎn)擊區(qū)，在的話就執(zhí)行callback回調(diào)
// 計(jì)算事件觸發(fā)點(diǎn)與target中心的位置
var len = Math.abs(Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));
// 通過(guò)半徑進(jìn)行校驗(yàn)
if (len ?= 100) {
  callback();
} else {
  alert('死鬼，跑哪去啊，你老婆我是黃皮膚還是白皮膚都分不清了嗎');
  }
  };
}

// 執(zhí)行
bindClickOnCircleArea(box, function() {
    alert('老婆，你讓我好找啊，嗚嗚嗚');
 });

三.通過(guò) map 加 area

?img src='../imgs/test.jpg' width='200' border='0' usemap='#Map' /?
?map name='Map' id='Map'?
?area
shape='circle'
coords='100,100,100'
href='http://www.baidu.com'
target='_blank'
/?
?/map?

12.前端需要注意哪些 SEO

1）.合理的 title、description、keywords：搜索對(duì)著三項(xiàng)的權(quán)重逐個(gè)減小，title 值強(qiáng)調(diào)重點(diǎn)即可，重要關(guān)鍵詞出現(xiàn)不要超過(guò) 2 次，而且要靠前，不同頁(yè)面 title 要有所不同；description 把頁(yè)面內(nèi)容高度概括，長(zhǎng)度合適，不可過(guò)分堆砌關(guān)鍵詞，不同頁(yè)面 description 有所不同；keywords 列舉出重要關(guān)鍵詞即可
2）.語(yǔ)義化的 HTML 代碼，符合 W3C 規(guī)范：語(yǔ)義化代碼讓搜索引擎容易理解網(wǎng)頁(yè)
3）.重要內(nèi)容 HTML 代碼放在最前：搜索引擎抓取 HTML 順序是從上到下，有的搜索引擎對(duì)抓取長(zhǎng)度有限制，保證重要內(nèi)容一定會(huì)被抓取
4).重要內(nèi)容不要用 js 輸出：爬蟲(chóng)不會(huì)執(zhí)行 js 獲取內(nèi)容
5).少用 iframe：搜索引擎不會(huì)抓取 iframe 中的內(nèi)容
6).非裝飾性圖片必須加 alt
7).提高網(wǎng)站速度：網(wǎng)站速度是搜索引擎排序的一個(gè)重要指標(biāo)

13.html5 有哪些新特性、移除了那些元素？

新特性：

拖拽釋放(Drag and drop) API
語(yǔ)義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
音頻、視頻 API(audio,video)
畫(huà)布(Canvas) API
地理(Geolocation) API
本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
表單控件，calendar、date、time、email、url、search
新的技術(shù) webworker, websocket, Geolocation

移除的元素：
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；
對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；

支持 HTML5 新標(biāo)簽：
IE8/IE7/IE6 支持通過(guò) document.createElement 方法產(chǎn)生的標(biāo)簽， 可以利用這一特性讓這些瀏覽器支持 HTML5 新標(biāo)簽， 瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式：
當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架

?!--[if lt IE 9]?
?script?
src = 'http://html5shim.googlecode.com/svn/trunk/html5.js';
?/script?
?![endif]--?

14.HTML 全局屬性(global attribute)有哪些

accesskey:設(shè)置快捷鍵，提供快速訪問(wèn)元素如aaa在 windows 下的 firefox 中按 alt + shift + a 可激活元素
class:為元素設(shè)置類標(biāo)識(shí)，多個(gè)類名用空格分開(kāi)，CSS 和 javascript 可通過(guò) class 屬性獲取元素
contenteditable: 指定元素內(nèi)容是否可編輯
contextmenu: 自定義鼠標(biāo)右鍵彈出菜單內(nèi)容
data-*: 為元素增加自定義屬性
dir: 設(shè)置元素文本方向
draggable: 設(shè)置元素是否可拖拽
dropzone: 設(shè)置元素拖放類型： copy, move, link
hidden: 表示一個(gè)元素是否與文檔。樣式上會(huì)導(dǎo)致元素不顯示，但是不能用這個(gè)屬性實(shí)現(xiàn)樣式效果
id: 元素 id，文檔內(nèi)唯一
lang: 元素內(nèi)容的的語(yǔ)言
spellcheck: 是否啟動(dòng)拼寫(xiě)和語(yǔ)法檢查
style: 行內(nèi) css 樣式
tabindex: 設(shè)置元素可以獲得焦點(diǎn)，通過(guò) tab 可以導(dǎo)航
title: 元素相關(guān)的建議信息
translate: 元素和子孫節(jié)點(diǎn)內(nèi)容是否需要本地化
HTML5 為什么只需要寫(xiě) !DOCTYPE
HTML 4.01 中的 doctype 需要對(duì) DTD 進(jìn)行引用，因?yàn)?HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要對(duì) DTD 進(jìn)行引用，但是需要 doctype 來(lái)規(guī)范瀏覽器的行為。其中，SGML 是標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言,簡(jiǎn)單的說(shuō)，就是比 HTML,XML 更老的標(biāo)準(zhǔn)，這兩者都是由 SGML 發(fā)展而來(lái)的。BUT，HTML5 不是的。

?!DOCTYPE?聲明位于位于 HTML 文檔中的第一行，處于 ?html? 標(biāo)簽之前。作用：告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE 不存在或格式不正確會(huì)導(dǎo)致文檔以怪異模式呈現(xiàn)。

15.對(duì) web 標(biāo)準(zhǔn)、可用性、可訪問(wèn)性的理解

可用性（Usability）：
產(chǎn)品是否容易上手，用戶能否完成任務(wù)，效率如何，以及這過(guò)程中用戶的主觀感受可好，是從用戶的角度來(lái)看產(chǎn)品的質(zhì)量?？捎眯院靡馕吨a(chǎn)品質(zhì)量高，是企業(yè)的核心競(jìng)爭(zhēng)力。

可訪問(wèn)性（Accessibility）：
Web 內(nèi)容對(duì)于殘障用戶的可閱讀和可理解性

可維護(hù)性（Maintainability）：
一般包含兩個(gè)層次，一是當(dāng)系統(tǒng)出現(xiàn)問(wèn)題時(shí)，快速定位并解決問(wèn)題的成本，成本低則可維護(hù)性好。二是代碼是否容易被人理解，是否容易修改和增強(qiáng)功能。

16.新的 HTML5 文檔類型和字符集是？

HTML5文檔類型：?!doctype html?
HTML5使用的編碼?meta charset='UTF-8'?
css與js最好放在html哪個(gè)地方
把?link?放在?head?中
把?link?標(biāo)簽放在?head??/head?之間是規(guī)范要求的內(nèi)容。此外，這種做法可以讓頁(yè)面逐步呈現(xiàn)，提高了用戶體驗(yàn)。將樣式表放在文檔底部附近，會(huì)使許多瀏覽器（包括 Internet Explorer）不能逐步呈現(xiàn)頁(yè)面。一些瀏覽器會(huì)阻止渲染，以避免在頁(yè)面樣式發(fā)生變化時(shí)，重新繪制頁(yè)面中的元素。這種做法可以防止呈現(xiàn)給用戶空白的頁(yè)面或沒(méi)有樣式的內(nèi)容。

把?script?標(biāo)簽恰好放在?/body?之前
腳本在下載和執(zhí)行期間會(huì)阻止 HTML 解析。把?script?標(biāo)簽放在底部，保證 HTML 首先完成解析，將頁(yè)面盡早呈現(xiàn)給用戶。

例外情況是當(dāng)你的腳本里包含document.write()時(shí)。但是現(xiàn)在，document.write()不推薦使用。同時(shí)，將?script?標(biāo)簽放在底部，意味著瀏覽器不能開(kāi)始下載腳本，直到整個(gè)文檔（document）被解析。也許，對(duì)此比較好的做法是，?script?使用defer屬性，放在?head?中。

17.什么是漸進(jìn)式渲染

漸進(jìn)式渲染（progressive rendering）
漸進(jìn)式渲染是用于提高網(wǎng)頁(yè)性能（尤其是提高用戶感知的加載速度），以盡快呈現(xiàn)頁(yè)面的技術(shù)。
在以前互聯(lián)網(wǎng)帶寬較小的時(shí)期，這種技術(shù)更為普遍。如今，移動(dòng)終端的盛行，而移動(dòng)網(wǎng)絡(luò)往往不穩(wěn)定，漸進(jìn)式渲染在現(xiàn)代前端開(kāi)發(fā)中仍然有用武之地。

18.DOM 和 BOM 有什么區(qū)別

DOM

Document Object Model，文檔對(duì)象模型
DOM 是為了操作文檔出現(xiàn)的 API，document 是其的一個(gè)對(duì)象
DOM 和文檔有關(guān)，這里的文檔指的是網(wǎng)頁(yè)，也就是 html 文檔。DOM 和瀏覽器無(wú)關(guān)，他關(guān)注的是網(wǎng)頁(yè)本身的內(nèi)容。

BOM

Browser Object Model，瀏覽器對(duì)象模型
BOM 是為了操作瀏覽器出現(xiàn)的 API，window 是其的一個(gè)對(duì)象
window 對(duì)象既為 javascript 訪問(wèn)瀏覽器提供 API，同時(shí)在 ECMAScript 中充當(dāng) Global 對(duì)象

19.img 上 title 與 alt

title 指圖片的信息、alt 指圖片不顯示時(shí)顯示的文字

20.介紹一下標(biāo)準(zhǔn)的 CSS 的盒子模型？低版本 IE 的盒

有兩種， IE 盒子模型、W3C 盒子模型；

盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border)；

區(qū) 別： IE 的 content 部分把 border 和 padding 計(jì)算了進(jìn)去;

CSS 隱藏元素的幾種方法（至少說(shuō)出三種）
Opacity:元素本身依然占據(jù)它自己的位置并對(duì)網(wǎng)頁(yè)的布局起作用。它也將響應(yīng)用戶交互;
Visibility:與 opacity 唯一不同的是它不會(huì)響應(yīng)任何用戶交互。此外，元素在讀屏軟件中也會(huì)被隱藏;
Display:display 設(shè)為 none 任何對(duì)該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會(huì)讀到元素的內(nèi)容。這種方式產(chǎn)生的效果就像元素完全不存在;
Position:不會(huì)影響布局，能讓元素保持可以操作;
Clip-path:clip-path 屬性還沒(méi)有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，瀏覽器支持度還要低;
CSS 清除浮動(dòng)的幾種方法（至少兩種）

21.清除浮動(dòng)： 核心：clear:both;

1).使用額外標(biāo)簽法（不推薦使用）
在浮動(dòng)的盒子下面再放一個(gè)標(biāo)簽，使用 clear:both;來(lái)清除浮動(dòng)

a 內(nèi)部標(biāo)簽：會(huì)將父盒子的高度重新?lián)伍_(kāi)

b 外部標(biāo)簽：只能將浮動(dòng)盒子的影響清除，但是不會(huì)撐開(kāi)盒子

2).使用 overflow 清除浮動(dòng)（不推薦使用）
先找到浮動(dòng)盒子的父元素，給父元素添加一個(gè)屬性：overflow:hidden;就會(huì)清除子元素對(duì)頁(yè)面的影響

3).使用偽元素清除浮動(dòng)(用的最多)
偽元素：在頁(yè)面上不存在的元素，但是可以通過(guò) css 添加上去
種類：
:after(在。。。之后)
:before(在。。。之前)

注意：每個(gè)元素都有自己的偽元素

.clearfix:after {
content:'';
height:0;
line-height:0;
display:block;
clear:both;
visibility:hidden;  /_將元素隱藏起來(lái)_/ 
  在頁(yè)面的 clearfix 元素后面添加了一個(gè)空的塊級(jí)元素
 （這個(gè)元素的高為 0 行高也為 0   并且這個(gè)元素清除了浮動(dòng)）
}
.clearfix {
  zoom:1;/_為了兼容 IE6_/
}

22.頁(yè)面導(dǎo)入樣式時(shí)，使用 link 和@import 有什么區(qū)別

Link 屬于 html 標(biāo)簽，而@import 是 CSS 中提供的
在頁(yè)面加載的時(shí)候，link 會(huì)同時(shí)被加載，而@import 引用的 CSS 會(huì)在頁(yè)面加載完成后才會(huì)加載引用的 CSS

@import 只有在 ie5 以上才可以被識(shí)別，而 link 是 html 標(biāo)簽，不存在瀏覽器兼容性問(wèn)題

Link 引入樣式的權(quán)重大于@import 的引用（@import 是將引用的樣式導(dǎo)入到當(dāng)前的頁(yè)面中）

23.偽元素和偽類的區(qū)別？

偽元素使用 2 個(gè)冒號(hào)，
常見(jiàn)的有：::before，::after，::first-line，::first-letter，::selection、::placeholder 等；

偽類使用1個(gè)冒號(hào)，
常見(jiàn)的有：:hover，:link，:active，:target，:not()，:focus等。

偽元素添加了一個(gè)頁(yè)面中沒(méi)有的元素（只是從視覺(jué)效果上添加了，不是在文檔樹(shù)中添加）；
偽類是給頁(yè)面中已經(jīng)存在的元素添加一個(gè)類。

CSS3新增偽類舉例：
:first-of-type 選擇屬于其父元素的首個(gè) ?p? 元素的每個(gè) ?p? 元素。
:last-of-type 選擇屬于其父元素的最后 ?p? 元素的每個(gè) ?p? 元素。
:only-of-type 選擇屬于其父元素唯一的 ?p? 元素的每個(gè) ?p? 元素。
:only-child 選擇屬于其父元素的唯一子元素的每個(gè) ?p? 元素。
:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè) ?p? 元素。
:enabled、:disabled 控制表單控件的禁用狀態(tài)。
:checked，單選框或復(fù)選框被選中。

24.行內(nèi)元素和塊級(jí)元素的具體區(qū)別是什么

塊級(jí)元素(block)特性：
總是獨(dú)占一行，表現(xiàn)為另起一行開(kāi)始，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;

25.內(nèi)聯(lián)元素(inline)特性：

和相鄰的內(nèi)聯(lián)元素在同一行;
寬度(width)、高度(height)、內(nèi)邊距的 top/bottom(padding-top/padding-bottom)和外邊距的 top/bottom(margin-top/margin-bottom)都不可改變（也就是 padding 和 margin 的 left 和 right 是可以設(shè)置的），就是里面文字或圖片的大小。

26.rgba()和 opacity 的透明效果有什么不同？

rgba()和 opacity 都能實(shí)現(xiàn)透明效果，但最大的不同是 opacity 作用于元素，以及元素內(nèi)的所有內(nèi)容的透明度，

而 rgba()只作用于元素的顏色或其背景色。（設(shè)置 rgba 透明的元素的子元素不會(huì)繼承透明效果?。?/p>

27.css 中可以讓文字在垂直和水平方向上重疊的兩個(gè)

垂直方向：line-height
水平方向：letter-spacing

28.px 和 em 的區(qū)別

px 和 em 都是長(zhǎng)度單位，區(qū)別是，px 的值是固定的，指定是多少就是多少，計(jì)算比較容易。em 得值不是固定的，并且 em 會(huì)繼承父級(jí)元素的字體大小。

瀏覽器的默認(rèn)字體高都是 16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么 12px=0.75em, 10px=0.625em。

29.如何垂直居中一個(gè)元素？

方法一：絕對(duì)定位居中（原始版之已知元素的高寬）
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
position: absolute; /父元素需要相對(duì)定位/
top: 50%;
left: 50%;
margin-top: -100px; /設(shè)為高度的1/2/
margin-left: -100px; /設(shè)為寬度的1/2/
}
方法二：絕對(duì)定位居中（改進(jìn)版之一未知元素的高寬）
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
position: absolute; /父元素需要相對(duì)定位/
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /在水平和垂直方向上各偏移-50%/
}
方法三：絕對(duì)定位居中（改進(jìn)版之二未知元素的高寬）
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
margin: auto; /很關(guān)鍵的一步/
position: absolute; /父元素需要相對(duì)定位/
left: 0;
top: 0;
right: 0;
bottom: 0; /讓四個(gè)定位屬性都為0/
}
方法四：flex 布局居中
body {
display: flex; /設(shè)置外層盒子display為flex/
align-items: center; /設(shè)置內(nèi)層盒子的垂直居中/
justify-content: center; /設(shè)置內(nèi)層盒子的水平居中/
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
}
}
那么問(wèn)題來(lái)了，如何垂直居中一個(gè) img（用更簡(jiǎn)便的方法。）
.content {
//img的容器設(shè)置如下
display: table-cell;
text-align: center;
vertical-align: middle;
}
用純 CSS 創(chuàng)建一個(gè)三角形的原理是什么？
span {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}

30.display:none 與 visibility:hidden 的區(qū)別是什么？

display : 隱藏對(duì)應(yīng)的元素但不擠占該元素原來(lái)的空間。
visibility: 隱藏對(duì)應(yīng)的元素并且擠占該元素原來(lái)的空間。
即是，使用 CSS display:none 屬性后，HTML 元素（對(duì)象）的寬度、高度等各種屬性值都將“丟失”;而使用 visibility:hidden 屬性后，HTML 元素（對(duì)象）僅僅是在視覺(jué)上看不見(jiàn)（完全透明），而它所占據(jù)的空間位置仍然存在。

31.哪些 css 屬性可以繼承？

可繼承： font-size font-family color, ul li dl dd dt;
不可繼承 ：border padding margin width height ;

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

css3 的 transform 屬性，設(shè)置值為 scale(x,y) 定義 2D 縮放轉(zhuǎn)換
示例：
-webkit-transform: scale(0.50);

33.png、jpg、gif、webp這些圖片格式解釋一下，分別什

gif
圖形交換格式，索引顏色格式，顏色少的情況下，產(chǎn)生的文件極小，支持背景透明，動(dòng)畫(huà)，圖形漸進(jìn)，無(wú)損壓縮（適合線條，圖標(biāo)等），缺點(diǎn)只有 256 種顏色

jpg
支持上百萬(wàn)種顏色，有損壓縮，壓縮比可達(dá) 180：1，而且質(zhì)量受損不明顯，不支持圖形漸進(jìn)與背景透明，不支持動(dòng)畫(huà)

png
為替代 gif 產(chǎn)生的，位圖文件，支持透明，半透明，不透明。不支持動(dòng)畫(huà)，無(wú)損圖像格式。Png8 簡(jiǎn)單說(shuō)是靜態(tài) gif，也只有 256 色，png24 不透明，但不止 256 色。

webp
谷歌開(kāi)發(fā)的旨在加快圖片加載速度的圖片格式，圖片壓縮體積是 jpeg 的 2/3，有損壓縮。高版本的 W3C 瀏覽器才支持，google39+，safari7+

css3 有哪些新特性
選擇器
E:last-child 匹配父元素的最后一個(gè)子元素 E。
E:nth-child(n)匹配父元素的第 n 個(gè)子元素 E。
E:nth-last-child(n) CSS3 匹配父元素的倒數(shù)第 n 個(gè)子元素 E。

RGBA
回答此問(wèn)題，可能繼續(xù)問(wèn)：rgba()和 opacity 的透明效果有什么不同？

多欄布局
?div class='mul-col'?
?div?
?h3?新手上路?/h3?
?p?新手專區(qū) 消費(fèi)警示 交易安全 24小時(shí)在線幫助 免費(fèi)開(kāi)店?/p?
?/div?
?div?
?h3?付款方式?/h3?
?p?快捷支付 信用卡 余額寶 螞蟻花唄 貨到付款?/p?
?/div?
?div?
?h3?淘寶特色?/h3?
?p?手機(jī)淘寶 旺信 大眾評(píng)審 B格指南?/p?
?/div?
?/div?

.mul-col {
column-count: 3;
column-gap: 5px;
column-rule: 1px solid gray;
border-radius: 5px;
border: 1px solid gray;
padding: 10px;
}
多背景圖
/* backgroundimage:url('1.jpg),url('2.jpg') */
CSS3 word-wrap 屬性
p.test {
word-wrap: break-word;
}
文字陰影
text-shadow: 5px 2px 6px rgba(64, 64, 64, 0.5);
@font-face 屬性
Font-face 可以用來(lái)加載字體樣式，而且它還能夠加載服務(wù)器端的字體文件，讓客戶端顯示客戶端所沒(méi)有安裝的字體。

@font-face {
font-family: BorderWeb;
src: url(BORDERW0.eot);
}
@font-face {
font-family: Runic;
src: url(RUNICMT0.eot);
}
.border {
font-size: 35px;
color: black;
font-family: 'BorderWeb';
}
.event {
font-size: 110px;
color: black;
font-family: 'Runic';
}

/* 淘寶網(wǎng)字體使用 */

@font-face {
font-family: iconfont;
src: url(//at.alicdn.com/t/font_1465189805_4518812.eot);
}
圓角
border-radius: 15px;
邊框圖片
CSS3 border-image 屬性

盒陰影
/* box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 擴(kuò)展程度 顏色 是否具有內(nèi)陰影 */
盒子大小
CSS3 box-sizing 屬性

媒體查詢
CSS3 @media 查詢

CSS3 動(dòng)畫(huà)
@keyframes

@keyframes abc {
from {
transform: rotate(0);
}
50% {
transform: rotate(90deg);
}
to {
transform: rotate(360deg);
}
}
animation 屬性
/* animation ： name duration timing-function delay interation-count direction play-state /
漸變效果
background-image: -webkit-gradient(
linear,
0% 0%,
100% 0%,
from(#2a8bbe),
to(#fe280e)
);
CSS3 彈性盒子模型
彈性盒子是 CSS3 的一種新的布局模式。
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?br> 引入彈性盒布局模型的目的是提供一種更加有效的方式來(lái)對(duì)一個(gè)容器中的子元素進(jìn)行排列、對(duì)齊和分配空白空間。
CSS3 過(guò)渡
div {
transition: width 2s;
-moz-transition: width 2s; / Firefox 4 /
-webkit-transition: width 2s; / Safari 和 Chrome /
-o-transition: width 2s; / Opera */
}
CSS3 變換
rotate()旋轉(zhuǎn)
translate()平移
scale( )縮放
skew()扭曲/傾斜
變換基點(diǎn)
3d 轉(zhuǎn)換
position 的值， relative 和 absolute 分別是相對(duì)于誰(shuí)定位
absolute :生成絕對(duì)定位的元素， 相對(duì)于最近一級(jí)的 定位不是 static 的父元素來(lái)進(jìn)行定位。
fixed （老 IE 不支持）生成絕對(duì)定位的元素，通常相對(duì)于瀏覽器窗口或 frame 進(jìn)行定位。
relative 生成相對(duì)定位的元素，相對(duì)于其在普通流中的位置進(jìn)行定位。
static 默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中
sticky 生成粘性定位的元素，容器的位置根據(jù)正常文檔流計(jì)算得出
box-sizing:border-box會(huì)產(chǎn)生怎樣的效果？
元素默認(rèn)應(yīng)用了box-sizing: content-box，元素的寬高只會(huì)決定內(nèi)容（content）的大小。
box-sizing: border-box改變計(jì)算元素width和height的方式，border和padding的大小也將計(jì)算在內(nèi)。
元素的height = 內(nèi)容（content）的高度 + 垂直方向的padding + 垂直方向border的寬度
元素的width = 內(nèi)容（content）的寬度 + 水平方向的padding + 水平方向border的寬度
你了解 CSS Flex
flex 容器中存在兩條軸， 橫軸和縱軸， 容器中的每個(gè)單元稱為 flex item。
在容器上可以設(shè)置 6 個(gè)屬性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
注意：當(dāng)設(shè)置 flex 布局之后，子元素的 float、clear、vertical-align 的屬性將會(huì)失效。
Flex 項(xiàng)目屬性
有六種屬性可運(yùn)用在 item 項(xiàng)目上:

order
flex-basis
flex-grow
flex-shrink
flex
align-self
display:none、visibile:hidden、opacity:0 的區(qū)別
display: none
是否隱藏
是
是否在文檔中占用空間
否
是否會(huì)觸發(fā)事件
否
visibile: hidden
是否隱藏
是
是否在文檔中占用空間
是
是否會(huì)觸發(fā)事件
否
opacity: 0
是否隱藏
是
是否在文檔中占用空間
是
是否會(huì)觸發(fā)事件
是
文本超出部分顯示省略號(hào)
單行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 最多顯示幾行
overflow: hidden;