HTML+CSS

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

答案:

label標(biāo)簽來定義表單控制間的關(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>

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

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

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

缺點(diǎn)

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

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)于頁面使用哪個(gè)HTML版本進(jìn)行編寫的指令。 聲明必須是HTML文檔的第一行，位于html標(biāo)簽之前。

瀏覽器本身分為兩種模式，一種是標(biāo)準(zhǔn)模式，一種是怪異模式，瀏覽器通過 doctype 來區(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)模式下的行為，沒有對怪異模式做出規(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 等安全性問題沒有得到及時(shí)解決
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á)了這樣一種語義：“這是一個(gè)文本段。”

表示層（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)域。

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

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

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

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

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

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

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

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

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

1.改版的時(shí)候更方便 只要改 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)識(shí)

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

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

答案：css3、js、map 加 area

一.border-radius (css3)

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

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

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

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

// 對目標(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)));
    // 通過半徑進(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：搜索對著三項(xiàng)的權(quán)重逐個(gè)減小，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)容一定會(huì)被抓取
4.重要內(nèi)容不要用 js 輸出：爬蟲不會(huì)執(zhí)行 js 獲取內(nèi)容
5.少用 iframe：搜索引擎不會(huì)抓取 iframe 中的內(nèi)容
6.非裝飾性圖片必須加 alt
7.提高網(wǎng)站速度：網(wǎng)站速度是搜索引擎排序的一個(gè)重要指標(biāo)

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

新特性：

拖拽釋放(Drag and drop) API
語義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
音頻、視頻 API(audio,video)
畫布(Canvas) API
地理(Geolocation) API
本地離線存儲(chǔ) localStorage 長期存儲(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；
對可用性產(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)識(shí)，多個(gè)類名用空格分開，CSS 和 javascript 可通過 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)容的的語言
• spellcheck: 是否啟動(dòng)拼寫和語法檢查
• 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)解析這個(gè)文檔。DOCTYPE 不存在或格式不正確會(huì)導(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）：

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

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

HTML5文檔類型：?!doctype html?

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

css與js最好放在html哪個(gè)地方

把?link?放在?head?中

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

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

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

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

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

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

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

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

DOM

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

BOM

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

img 上 title 與 alt

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

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

• 有兩種， IE 盒子模型、W3C 盒子模型；
• 盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border)；
• 區(qū) 別： IE 的 content 部分把 border 和 padding 計(jì)算了進(jìn)去;

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

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

CSS 清除浮動(dòng)的幾種方法（至少兩種）

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

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

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

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

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

2.使用 overflow 清除浮動(dòng)（不推薦使用）

先找到浮動(dòng)盒子的父元素，給父元素添加一個(gè)屬性：overflow:hidden;就會(huì)清除子元素對頁面的影響

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

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

種類：
:after(在。。。之后)
:before(在。。。之前)

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

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

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

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

• 在頁面加載的時(shí)候，link 會(huì)同時(shí)被加載，而@import 引用的 CSS 會(huì)在頁面加載完成后才會(huì)加載引用的 CSS

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

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

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

偽元素使用 2 個(gè)冒號，

常見的有：::before，::after，::first-line，::first-letter，::selection、::placeholder 等；

偽類使用1個(gè)冒號，

常見的有：:hover，:link，:active，:target，:not()，:focus等。

偽元素添加了一個(gè)頁面中沒有的元素（只是從視覺效果上添加了，不是在文檔樹中添加）；
偽類是給頁面中已經(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ù)選框被選中。

行內(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 透明的元素的子元素不會(huì)繼承透明效果?。?/p>

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

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

px 和 em 的區(qū)別

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

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

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

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

.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; /*讓四個(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;
  }
}

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

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

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)生的文件極小，支持背景透明，動(dòng)畫，圖形漸進(jìn)，無損壓縮（適合線條，圖標(biāo)等），缺點(diǎn)只有 256 種顏色

jpg

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

png

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

webp

谷歌開發(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

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

多欄布局

?div class='mul-col'?
  ?div?
    ?h3?新手上路?/h3?
    ?p?新手專區(qū) 消費(fèi)警示 交易安全 24小時(shí)在線幫助 免費(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 動(dòng)畫

@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è)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/li>
• 引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個(gè)容器中的子元素進(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ù)正常文檔流計(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ā)事件
  是

文本超出部分顯示省略號

單行

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

多行

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

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

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

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

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

行內(nèi)元素

一個(gè)行內(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