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

答案:

label標(biāo)簽來定義表單控制間的關(guān)系當(dāng)用戶選擇該標(biāo)簽時矗晃，瀏覽
器會自動將焦點(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>

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

優(yōu)點(diǎn)

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

缺點(diǎn)

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

Doctype，知道這是干什么的么预厌？

?!DOCTYPE? 聲明位于文檔中的最前面的位置阿迈，處于 ?html? 標(biāo)簽之前。
1.告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范配乓。
2.告訴瀏覽器按照何種規(guī)范解析頁（如果你的頁面沒有 DOCTYPE 的聲明，那么 compatMode 默認(rèn)就是 BackCompat,瀏覽器按照自己的方式解析渲染頁面）

解析：

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

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

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

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

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

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

前端頁面有哪三層構(gòu)成，分別是什么呈野？作用是什么低矮？

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

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

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

表示層（presentation layer）

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

行為層（behaviorlayer）

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

為什么用多個域名存儲網(wǎng)站資源更有效玻驻？

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

頁面可見性（Page Visibility）API 可以有哪些用途？

頁面可見性： 就是對于用戶來說墓塌，頁面是顯示還是隱藏, 所謂顯示的頁面档冬，就是我們正在看的頁面；隱藏的頁面桃纯，就是我們沒有看的頁面酷誓。 因?yàn)椋覀円淮慰梢源蜷_好多標(biāo)簽頁面來回切換著态坦，始終只有一個頁面在我們眼前盐数，其他頁面就是隱藏的，還有一種就是.........伞梯，(把瀏覽器最小化玫氢，所有的頁面就都不可見了)。

API 很簡單谜诫，document.hidden 就返回一個布爾值漾峡，如果是 true, 表示頁面可見，false 則表示喻旷，頁面隱藏生逸。 不同頁面之間來回切換，觸發(fā) visibilitychange 事件。 還有一個 document.visibilityState, 表示頁面所處的狀態(tài)槽袄，取值：visible, hidden 等四個烙无。

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

我們打開這個頁面，然后再打開另一個頁面遍尺，來回點(diǎn)擊這兩個頁面截酷，當(dāng)我們看到這個頁面時，標(biāo)題顯示 visiable ,當(dāng)我們看另一個頁面時乾戏，標(biāo)題顯示 hidden;
動畫迂苛，視頻，音頻都可以在頁面顯示時打開鼓择，在頁面隱藏時關(guān)閉

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

分離 方便改版 快清晰簡潔 seo

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

html 常見兼容性問題夷野？

1.雙邊距 BUG float 引起的懊蒸，解決辦法: 使用 display解決
2.3 像素問題 使用 float 引起的，解決辦法: 使用 dislpay:inline -3px
3.超鏈接 hover 點(diǎn)擊后失效悯搔，解決辦法: 使用正確的書寫順序 link visited hover active
4.Ie z-index 問題骑丸，解決辦法: 給父級添加 position:relative
5.Png 透明 ，解決辦法: 使用 js 代碼
6.Min-height 最小高度 妒貌，解決辦法: 通危！Important 解決
7.select 在 ie6 下遮蓋，解決辦法: 使用 iframe 嵌套
8.為什么沒有辦法定義 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濾鏡

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

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

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

答案：css3胧弛、js、map 加 area

一.border-radius (css3)

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

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

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

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

// 對目標(biāo)元素target的圓形區(qū)域進(jìn)行一個點(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)
    // 計算事件觸發(fā)點(diǎn)與target中心的位置
    var len = Math.abs(Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));
    // 通過半徑進(jìn)行校驗(yàn)
    if (len ?= 100) {
      callback();
    } else {
      alert('死鬼茵宪，跑哪去啊，你老婆我是黃皮膚還是白皮膚都分不清了嗎');
    }
  };
}

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

三.通過 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'
    
    target='_blank'
  /?
?/map?

前端需要注意哪些 SEO

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

html5 有哪些新特性霸株、移除了那些元素？

新特性：

拖拽釋放(Drag and drop) API
語義化更好的內(nèi)容標(biāo)簽（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)生負(fù)面影響的元素：frame辛辨，frameset捕捂，noframes；

支持 HTML5 新標(biāo)簽：

IE8/IE7/IE6 支持通過 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]--?

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

• accesskey:設(shè)置快捷鍵幽七，提供快速訪問元素如aaa在 windows 下的 firefox 中按 alt + shift + a 可激活元素
• class:為元素設(shè)置類標(biāo)識景殷，多個類名用空格分開溅呢，CSS 和 javascript 可通過 class 屬性獲取元素
• contenteditable: 指定元素內(nèi)容是否可編輯
• contextmenu: 自定義鼠標(biāo)右鍵彈出菜單內(nèi)容
• data-*: 為元素增加自定義屬性
• dir: 設(shè)置元素文本方向
• draggable: 設(shè)置元素是否可拖拽
• dropzone: 設(shè)置元素拖放類型： copy, move, link
• hidden: 表示一個元素是否與文檔。樣式上會導(dǎo)致元素不顯示猿挚，但是不能用這個屬性實(shí)現(xiàn)樣式效果
• id: 元素 id咐旧，文檔內(nèi)唯一
• lang: 元素內(nèi)容的的語言
• spellcheck: 是否啟動拼寫和語法檢查
• style: 行內(nèi) css 樣式
• tabindex: 設(shè)置元素可以獲得焦點(diǎn)，通過 tab 可以導(dǎo)航
• title: 元素相關(guān)的建議信息
• translate: 元素和子孫節(jié)點(diǎn)內(nèi)容是否需要本地化

HTML5 為什么只需要寫 !DOCTYPE

HTML 4.01 中的 doctype 需要對 DTD 進(jìn)行引用绩蜻，因?yàn)?HTML 4.01 基于 SGML铣墨。而 HTML 5 不基于 SGML，因此不需要對 DTD 進(jìn)行引用办绝，但是需要 doctype 來規(guī)范瀏覽器的行為伊约。其中，SGML 是標(biāo)準(zhǔn)通用標(biāo)記語言,簡單的說孕蝉，就是比 HTML,XML 更老的標(biāo)準(zhǔn)屡律，這兩者都是由 SGML 發(fā)展而來的。BUT降淮，HTML5 不是的超埋。

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

對 web 標(biāo)準(zhǔn)、可用性来庭、可訪問性的理解

可用性（Usability）：

產(chǎn)品是否容易上手妒蔚，用戶能否完成任務(wù)，效率如何月弛，以及這過程中用戶的主觀感受可好面睛，是從用戶的角度來看產(chǎn)品的質(zhì)量∽鸢幔可用性好意味著產(chǎn)品質(zhì)量高叁鉴，是企業(yè)的核心競爭力。

可訪問性（Accessibility）：

Web 內(nèi)容對于殘障用戶的可閱讀和可理解性

可維護(hù)性（Maintainability）：

一般包含兩個層次佛寿，一是當(dāng)系統(tǒng)出現(xiàn)問題時幌墓，快速定位并解決問題的成本，成本低則可維護(hù)性好冀泻。二是代碼是否容易被人理解常侣，是否容易修改和增強(qiáng)功能。

新的 HTML5 文檔類型和字符集是弹渔？

HTML5文檔類型：?!doctype html?

HTML5使用的編碼?meta charset='UTF-8'?

css與js最好放在html哪個地方

把?link?放在?head?中

把?link?標(biāo)簽放在?head??/head?之間是規(guī)范要求的內(nèi)容胳施。此外，這種做法可以讓頁面逐步呈現(xiàn)肢专，提高了用戶體驗(yàn)舞肆。將樣式表放在文檔底部附近，會使許多瀏覽器（包括 Internet Explorer）不能逐步呈現(xiàn)頁面博杖。一些瀏覽器會阻止渲染椿胯，以避免在頁面樣式發(fā)生變化時，重新繪制頁面中的元素剃根。這種做法可以防止呈現(xiàn)給用戶空白的頁面或沒有樣式的內(nèi)容哩盲。

把?script?標(biāo)簽恰好放在?/body?之前

腳本在下載和執(zhí)行期間會阻止 HTML 解析。把?script?標(biāo)簽放在底部狈醉，保證 HTML 首先完成解析廉油，將頁面盡早呈現(xiàn)給用戶。

例外情況是當(dāng)你的腳本里包含document.write()時苗傅。但是現(xiàn)在抒线，document.write()不推薦使用。同時金吗，將?script?標(biāo)簽放在底部十兢，意味著瀏覽器不能開始下載腳本趣竣，直到整個文檔（document）被解析。也許旱物，對此比較好的做法是遥缕，?script?使用defer屬性，放在?head?中宵呛。

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

漸進(jìn)式渲染（progressive rendering）

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

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

DOM

Document Object Model须鼎，文檔對象模型
DOM 是為了操作文檔出現(xiàn)的 API鲸伴，document 是其的一個對象
DOM 和文檔有關(guān)，這里的文檔指的是網(wǎng)頁晋控，也就是 html 文檔汞窗。DOM 和瀏覽器無關(guān)，他關(guān)注的是網(wǎng)頁本身的內(nèi)容赡译。

BOM

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

img 上 title 與 alt

title 指圖片的信息裹唆、alt 指圖片不顯示時顯示的文字

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

• 有兩種综看， IE 盒子模型品腹、W3C 盒子模型岖食；
• 盒模型： 內(nèi)容(content)红碑、填充(padding)、邊界(margin)泡垃、 邊框(border)析珊；
• 區(qū) 別： IE 的 content 部分把 border 和 padding 計算了進(jìn)去;

CSS 隱藏元素的幾種方法（至少說出三種）

• Opacity:元素本身依然占據(jù)它自己的位置并對網(wǎng)頁的布局起作用。它也將響應(yīng)用戶交互;
• Visibility:與 opacity 唯一不同的是它不會響應(yīng)任何用戶交互蔑穴。此外忠寻，元素在讀屏軟件中也會被隱藏;
• Display:display 設(shè)為 none 任何對該元素直接打用戶交互操作都不可能生效。此外存和，讀屏軟件也不會讀到元素的內(nèi)容奕剃。這種方式產(chǎn)生的效果就像元素完全不存在;
• Position:不會影響布局衷旅，能讓元素保持可以操作;
• Clip-path:clip-path 屬性還沒有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件纵朋，瀏覽器支持度還要低;

CSS 清除浮動的幾種方法（至少兩種）

清除浮動： 核心：clear:both;

1.使用額外標(biāo)簽法（不推薦使用）

在浮動的盒子下面再放一個標(biāo)簽柿顶，使用 clear:both;來清除浮動

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

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

2.使用 overflow 清除浮動（不推薦使用）

先找到浮動盒子的父元素操软，給父元素添加一個屬性：overflow:hidden;就會清除子元素對頁面的影響

3.使用偽元素清除浮動(用的最多)

偽元素：在頁面上不存在的元素嘁锯，但是可以通過 css 添加上去

種類：
:after(在。聂薪。家乘。之后)
:before(在。藏澳。仁锯。之前)

注意：每個元素都有自己的偽元素

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

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

Link 屬于 html 標(biāo)簽翔悠，而@import 是 CSS 中提供的

• 在頁面加載的時候扑馁，link 會同時被加載，而@import 引用的 CSS 會在頁面加載完成后才會加載引用的 CSS

• @import 只有在 ie5 以上才可以被識別凉驻，而 link 是 html 標(biāo)簽腻要，不存在瀏覽器兼容性問題

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

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

偽元素使用 2 個冒號涝登，

常見的有：::before雄家，::after，::first-line胀滚，::first-letter趟济，::selection、::placeholder 等咽笼；

偽類使用1個冒號顷编，

常見的有：:hover，:link剑刑，:active媳纬，:target，:not()施掏，:focus等钮惠。

偽元素添加了一個頁面中沒有的元素（只是從視覺效果上添加了，不是在文檔樹中添加）七芭；
偽類是給頁面中已經(jīng)存在的元素添加一個類素挽。

CSS3新增偽類舉例：

• :first-of-type 選擇屬于其父元素的首個 ?p? 元素的每個 ?p? 元素。
• :last-of-type 選擇屬于其父元素的最后 ?p? 元素的每個 ?p? 元素狸驳。
• :only-of-type 選擇屬于其父元素唯一的 ?p? 元素的每個 ?p? 元素预明。
• :only-child 選擇屬于其父元素的唯一子元素的每個 ?p? 元素缩赛。
• :nth-child(2) 選擇屬于其父元素的第二個子元素的每個 ?p? 元素。
• :enabled撰糠、:disabled 控制表單控件的禁用狀態(tài)峦筒。
• :checked，單選框或復(fù)選框被選中窗慎。

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

塊級元素(block)特性：

總是獨(dú)占一行物喷，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示;
寬度(width)遮斥、高度(height)峦失、內(nèi)邊距(padding)和外邊距(margin)都可控制;

內(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è)置的）尉辑，就是里面文字或圖片的大小。

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

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

而 rgba()只作用于元素的顏色或其背景色购啄。（設(shè)置 rgba 透明的元素的子元素不會繼承透明效果！）

css 中可以讓文字在垂直和水平方向上重疊的兩個

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

px 和 em 的區(qū)別

px 和 em 都是長度單位嘱么，區(qū)別是狮含，px 的值是固定的，指定是多少就是多少曼振，計算比較容易几迄。em 得值不是固定的，并且 em 會繼承父級元素的字體大小冰评。

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

如何垂直居中一個元素解孙？

方法一：絕對定位居中（原始版之已知元素的高寬）

.content {
  width: 200px;
  height: 200px;
  background-color: #6699ff;
  position: absolute; /*父元素需要相對定位*/
  top: 50%;
  left: 50%;
  margin-top: -100px; /*設(shè)為高度的1/2*/
  margin-left: -100px; /*設(shè)為寬度的1/2*/
}

方法二：絕對定位居中（改進(jìn)版之一未知元素的高寬）

.content {
  width: 200px;
  height: 200px;
  background-color: #6699ff;
  position: absolute; /*父元素需要相對定位*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /*在水平和垂直方向上各偏移-50%*/
}

方法三：絕對定位居中（改進(jìn)版之二未知元素的高寬）

.content {
  width: 200px;
  height: 200px;
  background-color: #6699ff;
  margin: auto; /*很關(guān)鍵的一步*/
  position: absolute; /*父元素需要相對定位*/
  left: 0;
  top: 0;
  right: 0;
  bottom: 0; /*讓四個定位屬性都為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;
  }
}

那么問題來了，如何垂直居中一個 img（用更簡便的方法务荆。）

.content {
  //img的容器設(shè)置如下
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

用純 CSS 創(chuàng)建一個三角形的原理是什么妆距？

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

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

display : 隱藏對應(yīng)的元素但不擠占該元素原來的空間函匕。

visibility: 隱藏對應(yīng)的元素并且擠占該元素原來的空間。

即是蚪黑，使用 CSS display:none 屬性后盅惜，HTML 元素（對象）的寬度中剩、高度等各種屬性值都將“丟失”;而使用 visibility:hidden 屬性后，HTML 元素（對象）僅僅是在視覺上看不見（完全透明）抒寂，而它所占據(jù)的空間位置仍然存在结啼。

哪些 css 屬性可以繼承？

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

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

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

png、jpg井佑、gif属铁、webp這些圖片格式解釋一下，分別什

gif

圖形交換格式躬翁，索引顏色格式焦蘑，顏色少的情況下，產(chǎn)生的文件極小盒发，支持背景透明例嘱，動畫，圖形漸進(jìn)宁舰，無損壓縮（適合線條拼卵，圖標(biāo)等），缺點(diǎn)只有 256 種顏色

jpg

支持上百萬種顏色蛮艰，有損壓縮间学，壓縮比可達(dá) 180：1，而且質(zhì)量受損不明顯印荔，不支持圖形漸進(jìn)與背景透明低葫，不支持動畫

png

為替代 gif 產(chǎn)生的，位圖文件仍律，支持透明嘿悬，半透明，不透明水泉。不支持動畫善涨，無損圖像格式。Png8 簡單說是靜態(tài) gif草则，也只有 256 色钢拧，png24 不透明，但不止 256 色炕横。

webp

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

css3 有哪些新特性

選擇器

E:last-child 匹配父元素的最后一個子元素 E。
E:nth-child(n)匹配父元素的第 n 個子元素 E颂斜。
E:nth-last-child(n) CSS3 匹配父元素的倒數(shù)第 n 個子元素 E夫壁。

RGBA

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

多欄布局

?div class='mul-col'?
  ?div?
    ?h3?新手上路?/h3?
    ?p?新手專區(qū) 消費(fèi)警示 交易安全 24小時在線幫助 免費(fèi)開店?/p?
  ?/div?
  ?div?
    ?h3?付款方式?/h3?
    ?p?快捷支付 信用卡 余額寶 螞蟻花唄 貨到付款?/p?
  ?/div?
  ?div?
    ?h3?淘寶特色?/h3?
    ?p?手機(jī)淘寶 旺信 大眾評審 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 可以用來加載字體樣式盒让，而且它還能夠加載服務(wù)器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體司蔬。

@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 動畫

@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īng)不同的屏幕大小以及設(shè)備類型時確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/li>
• 引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進(jìn)行排列葱她、對齊和分配空白空間撩扒。

CSS3 過渡

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 分別是相對于誰定位

• absolute :生成絕對定位的元素吨些， 相對于最近一級的 定位不是 static 的父元素來進(jìn)行定位搓谆。
• fixed （老 IE 不支持）生成絕對定位的元素，通常相對于瀏覽器窗口或 frame 進(jìn)行定位豪墅。
• relative 生成相對定位的元素泉手，相對于其在普通流中的位置進(jìn)行定位。
• static 默認(rèn)值偶器。沒有定位斩萌，元素出現(xiàn)在正常的流中
• sticky 生成粘性定位的元素，容器的位置根據(jù)正常文檔流計算得出

box-sizing:border-box會產(chǎn)生怎樣的效果屏轰？

• 元素默認(rèn)應(yīng)用了box-sizing: content-box颊郎，元素的寬高只會決定內(nèi)容（content）的大小。
• box-sizing: border-box改變計算元素width和height的方式霎苗，border和padding的大小也將計算在內(nèi)姆吭。
• 元素的height = 內(nèi)容（content）的高度 + 垂直方向的padding + 垂直方向border的寬度
• 元素的width = 內(nèi)容（content）的寬度 + 水平方向的padding + 水平方向border的寬度

你了解 CSS Flex

flex 容器中存在兩條軸， 橫軸和縱軸唁盏， 容器中的每個單元稱為 flex item内狸。

在容器上可以設(shè)置 6 個屬性：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

注意：當(dāng)設(shè)置 flex 布局之后，子元素的 float厘擂、clear昆淡、vertical-align 的屬性將會失效。

Flex 項目屬性

有六種屬性可運(yùn)用在 item 項目上:

• order
• flex-basis
• flex-grow
• flex-shrink
• flex
• align-self

display:none刽严、visibile:hidden昂灵、opacity:0 的區(qū)別

display: none

• 是否隱藏
  是
• 是否在文檔中占用空間
  否
• 是否會觸發(fā)事件
  否

visibile: hidden

• 是否隱藏
  是
• 是否在文檔中占用空間
  是
• 是否會觸發(fā)事件
  否

opacity: 0

• 是否隱藏
  是
• 是否在文檔中占用空間
  是
• 是否會觸發(fā)事件
  是

文本超出部分顯示省略號

單行

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 最多顯示幾行
overflow: hidden;

過渡與動畫的區(qū)別是什么

transition 可以在一定的時間內(nèi)實(shí)現(xiàn)元素的狀態(tài)過渡為最終狀態(tài)宗收，用于模擬以一種過渡動畫效果殉疼，但是功能有限设联，只能用于制作簡單的動畫效果而動畫屬性

animation 可以制作類似 Flash 動畫切心，通過關(guān)鍵幀控制動畫的每一步鹏氧，控制更為精確渤涌，從而可以制作更為復(fù)雜的動畫。

行內(nèi)元素和塊級元素有哪些

行內(nèi)元素

一個行內(nèi)元素只占據(jù)它對應(yīng)標(biāo)簽的邊框所包含的空間
一般情況下把还，行內(nèi)元素只能包含數(shù)據(jù)和其他行內(nèi)元素

b, big, i, small, tt,
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

塊級元素

占據(jù)一整行实蓬，高度、行高吊履、內(nèi)邊距和外邊距都可以改變安皱，可以容納塊級標(biāo)簽和其他行內(nèi)標(biāo)簽

header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer