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

答案:

label標簽來定義表單控制間的關系當用戶選擇該標簽時，瀏覽
器會自動將焦點轉到和標簽相關的表單控件上之众。

解析:兩種用法:一種是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)缺點蚂子？

（1）優(yōu)點

iframe 能夠原封不動的把嵌入的網頁展現出來燥透。
如果有多個網頁引用 iframe，那么你只需要修改 iframe 的內容币旧，就可以實現調用的每一個頁面內容的更改践险，方便快捷。
網頁如果為了統(tǒng)一風格吹菱，頭部和版本都是一樣的巍虫，就可以寫成一個頁面，用 iframe 來嵌套鳍刷，可以增加代碼的可重用占遥。
如果遇到加載緩慢的第三方內容如圖標和廣告，這些問題可以由 iframe 來解決输瓜。

（2）缺點

框架結構中出現各種滾動條
iframe 會阻塞主頁面的 Onload 事件
搜索引擎的檢索程序無法解讀這種頁面瓦胎，不利于 SEO
iframe 和主頁面共享連接池，而瀏覽器對相同域的連接有限制尤揣，所以會影響頁面的并行加載搔啊。

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

?!DOCTYPE? 聲明位于文檔中的最前面的位置负芋，處于 ?html? 標簽之前。

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

解析：

doctype 是一種標準通用標記語言的文檔類型聲明，目的是告訴標準通用標記語言解析器要使用什么樣的文檔類型定義（DTD）來解析文檔芝硬。
聲明是用來指示web瀏覽器關于頁面使用哪個HTML版本進行編寫的指令蚜点。 聲明必須是HTML文檔的第一行，位于html標簽之前拌阴。

瀏覽器本身分為兩種模式绍绘，一種是標準模式，一種是怪異模式迟赃，瀏覽器通過 doctype 來區(qū)分這兩種模式陪拘，doctype 在 html 中的作用就是觸發(fā)瀏覽器的標準模式，如果 html 中省略了 doctype纤壁，瀏覽器就會進入到 Quirks 模式的怪異狀態(tài)左刽，在這種模式下，有些樣式會和標準模式存在差異酌媒，而 html 標準和 dom 標準值規(guī)定了標準模式下的行為欠痴，沒有對怪異模式做出規(guī)定迄靠，因此不同瀏覽器在怪異模式下的處理也是不同的，所以一定要在 html 開頭使用 doctype喇辽。

嚴格模式與混雜模式

嚴格模式：以瀏覽器支持的最高標準運行
混雜模式：頁面以寬松向下兼容的方式顯示掌挚，模擬老式瀏覽器的行為

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

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

5.前端頁面有哪三層構成云茸，分別是什么摩钙？作用是什么？

分成：結構層查辩、表示層、行為層网持。

結構層（structural layer）

由 HTML 或 XHTML 之類的標記語言負責創(chuàng)建宜岛。標簽，也就是那些出現在尖括號里的單詞功舀，對網頁內容的語義含義做出了描述萍倡，但這些標簽不包含任何關于如何顯示有關內容的信息。例如辟汰，P 標簽表達了這樣一種語義：“這是一個文本段列敲。”

表示層（presentation layer）

由 CSS 負責創(chuàng)建帖汞。 CSS 對“如何顯示有關內容”的問題做出了回答戴而。

行為層（behaviorlayer）

負責回答“內容應該如何對事件做出反應”這一問題。這是 Javascript 語言和 DOM 主宰的領域翩蘸。

6.為什么用多個域名存儲網站資源更有效所意？

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

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

頁面可見性： 就是對于用戶來說舶治，頁面是顯示還是隱藏, 所謂顯示的頁面分井，就是我們正在看的頁面车猬；隱藏的頁面，就是我們沒有看的頁面杂抽。 因為诈唬，我們一次可以打開好多標簽頁面來回切換著，始終只有一個頁面在我們眼前缩麸，其他頁面就是隱藏的铸磅，還有一種就是.........，(把瀏覽器最小化杭朱，所有的頁面就都不可見了)阅仔。

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

我們打開這個頁面，然后再打開另一個頁面抖甘，來回點擊這兩個頁面热鞍，當我們看到這個頁面時，標題顯示 visiable ,當我們看另一個頁面時衔彻，標題顯示 hidden;
動畫薇宠，視頻，音頻都可以在頁面顯示時打開艰额，在頁面隱藏時關閉

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

分離 方便改版 快清晰簡潔 seo
(1).改版的時候更方便 只要改 css 文件澄港。
(2).頁面加載速度更快、結構化清晰悴晰、頁面顯示簡潔慢睡。
(3).表現與結構相分離。
(4).易于優(yōu)化（seo）搜索引擎更友好铡溪，排名更容易靠前漂辐。

9.html 常見兼容性問題？

（1）.雙邊距 BUG float 引起的棕硫，解決辦法: 使用 display解決
（2）.3 像素問題 使用 float 引起的髓涯，解決辦法: 使用 dislpay:inline -3px
（3）.超鏈接 hover 點擊后失效，解決辦法: 使用正確的書寫順序 link visited hover active
（4）.Ie z-index 問題哈扮，解決辦法: 給父級添加 position:relative
（5）.Png 透明 纬纪，解決辦法: 使用 js 代碼
（6）.Min-height 最小高度 蚓再，解決辦法: ！Important 解決
（7）.select 在 ie6 下遮蓋包各，解決辦法: 使用 iframe 嵌套
（8）.為什么沒有辦法定義 1px 左右的寬度容器摘仅，解決辦法: （IE6 默認的行高造成的，使用 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對 WEB 標準以及 W3C 的理解與認識

標簽閉合、標簽小寫护姆、不亂嵌套矾端、提高搜索機器人搜索幾率、使用外 鏈 css 和 js 腳本卵皂、結構行為表現的分離秩铆、文件下載與頁面速度更快、內容能被更多的用戶所訪問灯变、內容能被更廣泛的設備所訪問殴玛、更少的代碼和組件，容易維 護添祸、改版方便族阅，不需要變動頁面內容、提供打印版本而不需要復制內容膝捞、提高網站易用性。

11如何在頁面上實現一個圓形的可點擊區(qū)域愧沟？

答案：css3蔬咬、js、map 加 area

一.border-radius (css3)

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

二.通過事件坐標來實現（js）

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

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

// 對目標元素target的圓形區(qū)域進行一個點擊事件綁定
function bindClickOnCircleArea(target, callback) {
  target.onclick = function(e) {
e = e || window.event;

// target中心點的坐標
var x1 = 100;
var y1 = 100;

// 事件源坐標
var x2 = e.offsetX;
var y2 = e.offsetY;

// 校驗是否在圓形點擊區(qū)究孕，在的話就執(zhí)行callback回調
// 計算事件觸發(fā)點與target中心的位置
var len = Math.abs(Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));
// 通過半徑進行校驗
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'
href='http://www.baidu.com'
target='_blank'
/?
?/map?

12.前端需要注意哪些 SEO

1）.合理的 title、description微酬、keywords：搜索對著三項的權重逐個減小绘趋，title 值強調重點即可颤陶，重要關鍵詞出現不要超過 2 次，而且要靠前陷遮，不同頁面 title 要有所不同滓走；description 把頁面內容高度概括，長度合適帽馋，不可過分堆砌關鍵詞搅方，不同頁面 description 有所不同；keywords 列舉出重要關鍵詞即可
2）.語義化的 HTML 代碼茬斧，符合 W3C 規(guī)范：語義化代碼讓搜索引擎容易理解網頁
3）.重要內容 HTML 代碼放在最前：搜索引擎抓取 HTML 順序是從上到下腰懂，有的搜索引擎對抓取長度有限制，保證重要內容一定會被抓取
4).重要內容不要用 js 輸出：爬蟲不會執(zhí)行 js 獲取內容
5).少用 iframe：搜索引擎不會抓取 iframe 中的內容
6).非裝飾性圖片必須加 alt
7).提高網站速度：網站速度是搜索引擎排序的一個重要指標

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

新特性：

拖拽釋放(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]--?

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

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

?!DOCTYPE?聲明位于位于 HTML 文檔中的第一行兼贸，處于 ?html? 標簽之前段直。作用：告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE 不存在或格式不正確會導致文檔以怪異模式呈現溶诞。

15.對 web 標準鸯檬、可用性、可訪問性的理解

可用性（Usability）：
產品是否容易上手螺垢，用戶能否完成任務喧务，效率如何，以及這過程中用戶的主觀感受可好枉圃，是從用戶的角度來看產品的質量蹂楣。可用性好意味著產品質量高讯蒲，是企業(yè)的核心競爭力。

可訪問性（Accessibility）：
Web 內容對于殘障用戶的可閱讀和可理解性

可維護性（Maintainability）：
一般包含兩個層次肄扎，一是當系統(tǒng)出現問題時墨林，快速定位并解決問題的成本，成本低則可維護性好犯祠。二是代碼是否容易被人理解旭等，是否容易修改和增強功能。

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

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

把?script?標簽恰好放在?/body?之前
腳本在下載和執(zhí)行期間會阻止 HTML 解析箱舞。把?script?標簽放在底部，保證 HTML 首先完成解析拳亿，將頁面盡早呈現給用戶晴股。

例外情況是當你的腳本里包含document.write()時。但是現在肺魁，document.write()不推薦使用电湘。同時，將?script?標簽放在底部万搔，意味著瀏覽器不能開始下載腳本胡桨，直到整個文檔（document）被解析。也許瞬雹，對此比較好的做法是昧谊，?script?使用defer屬性，放在?head?中酗捌。

17.什么是漸進式渲染

漸進式渲染（progressive rendering）
漸進式渲染是用于提高網頁性能（尤其是提高用戶感知的加載速度）呢诬，以盡快呈現頁面的技術。
在以前互聯(lián)網帶寬較小的時期胖缤，這種技術更為普遍尚镰。如今，移動終端的盛行哪廓，而移動網絡往往不穩(wěn)定狗唉，漸進式渲染在現代前端開發(fā)中仍然有用武之地。

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

DOM

Document Object Model涡真，文檔對象模型
DOM 是為了操作文檔出現的 API分俯，document 是其的一個對象
DOM 和文檔有關，這里的文檔指的是網頁哆料，也就是 html 文檔缸剪。DOM 和瀏覽器無關，他關注的是網頁本身的內容东亦。

BOM

Browser Object Model杏节，瀏覽器對象模型
BOM 是為了操作瀏覽器出現的 API，window 是其的一個對象
window 對象既為 javascript 訪問瀏覽器提供 API，同時在 ECMAScript 中充當 Global 對象

19.img 上 title 與 alt

title 指圖片的信息奋渔、alt 指圖片不顯示時顯示的文字

20.介紹一下標準的 CSS 的盒子模型镊逝？低版本 IE 的盒

有兩種， IE 盒子模型卒稳、W3C 盒子模型蹋半；

盒模型： 內容(content)、填充(padding)充坑、邊界(margin)减江、 邊框(border)；

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

CSS 隱藏元素的幾種方法（至少說出三種）
Opacity:元素本身依然占據它自己的位置并對網頁的布局起作用捻爷。它也將響應用戶交互;
Visibility:與 opacity 唯一不同的是它不會響應任何用戶交互辈灼。此外，元素在讀屏軟件中也會被隱藏;
Display:display 設為 none 任何對該元素直接打用戶交互操作都不可能生效也榄。此外巡莹，讀屏軟件也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在;
Position:不會影響布局甜紫，能讓元素保持可以操作;
Clip-path:clip-path 屬性還沒有在 IE 或者 Edge 下被完全支持降宅。如果要在你的 clip-path 中使用外部的 SVG 文件，瀏覽器支持度還要低;
CSS 清除浮動的幾種方法（至少兩種）

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

1).使用額外標簽法（不推薦使用）
在浮動的盒子下面再放一個標簽囚霸，使用 clear:both;來清除浮動

a 內部標簽：會將父盒子的高度重新?lián)伍_

b 外部標簽：只能將浮動盒子的影響清除押蚤，但是不會撐開盒子

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_/
}

22.頁面導入樣式時压固，使用 link 和@import 有什么區(qū)別

Link 屬于 html 標簽球拦，而@import 是 CSS 中提供的
在頁面加載的時候，link 會同時被加載帐我，而@import 引用的 CSS 會在頁面加載完成后才會加載引用的 CSS

@import 只有在 ie5 以上才可以被識別坎炼，而 link 是 html 標簽，不存在瀏覽器兼容性問題

Link 引入樣式的權重大于@import 的引用（@import 是將引用的樣式導入到當前的頁面中）

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

偽元素使用 2 個冒號，
常見的有：::before扇调，::after矿咕，::first-line，::first-letter，::selection碳柱、::placeholder 等捡絮；

偽類使用1個冒號，
常見的有：:hover莲镣，:link福稳，:active，:target瑞侮，:not()的圆，:focus等。

偽元素添加了一個頁面中沒有的元素（只是從視覺效果上添加了半火，不是在文檔樹中添加）越妈；
偽類是給頁面中已經存在的元素添加一個類。

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且叁，單選框或復選框被選中。

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

塊級元素(block)特性：
總是獨占一行肄满，表現為另起一行開始谴古，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)稠歉、內邊距(padding)和外邊距(margin)都可控制;

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

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

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

rgba()和 opacity 都能實現透明效果阅羹，但最大的不同是 opacity 作用于元素勺疼，以及元素內的所有內容的透明度，

而 rgba()只作用于元素的顏色或其背景色捏鱼。（設置 rgba 透明的元素的子元素不會繼承透明效果Ｖ绰）

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

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

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

px 和 em 都是長度單位，區(qū)別是导梆，px 的值是固定的轨淌，指定是多少就是多少迂烁，計算比較容易。em 得值不是固定的递鹉，并且 em 會繼承父級元素的字體大小盟步。

瀏覽器的默認字體高都是 16px。所以未經調整的瀏覽器都符合: 1em=16px躏结。那么 12px=0.75em, 10px=0.625em却盘。

29.如何垂直居中一個元素？

方法一：絕對定位居中（原始版之已知元素的高寬）
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
position: absolute; /父元素需要相對定位/
top: 50%;
left: 50%;
margin-top: -100px; /設為高度的1/2/
margin-left: -100px; /設為寬度的1/2/
}
方法二：絕對定位居中（改進版之一未知元素的高寬）
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
position: absolute; /父元素需要相對定位/
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /在水平和垂直方向上各偏移-50%/
}
方法三：絕對定位居中（改進版之二未知元素的高寬）
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
margin: auto; /很關鍵的一步/
position: absolute; /父元素需要相對定位/
left: 0;
top: 0;
right: 0;
bottom: 0; /讓四個定位屬性都為0/
}
方法四：flex 布局居中
body {
display: flex; /設置外層盒子display為flex/
align-items: center; /設置內層盒子的垂直居中/
justify-content: center; /設置內層盒子的水平居中/
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
}
}
那么問題來了媳拴，如何垂直居中一個 img（用更簡便的方法黄橘。）
.content {
//img的容器設置如下
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;
}

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

display : 隱藏對應的元素但不擠占該元素原來的空間旬陡。
visibility: 隱藏對應的元素并且擠占該元素原來的空間。
即是语婴，使用 CSS display:none 屬性后描孟，HTML 元素（對象）的寬度、高度等各種屬性值都將“丟失”;而使用 visibility:hidden 屬性后砰左，HTML 元素（對象）僅僅是在視覺上看不見（完全透明）匿醒，而它所占據的空間位置仍然存在。

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

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

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

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

33.png僻造、jpg憋他、gif、webp這些圖片格式解釋一下髓削，分別什

gif
圖形交換格式竹挡，索引顏色格式，顏色少的情況下立膛，產生的文件極小揪罕，支持背景透明，動畫宝泵，圖形漸進好啰，無損壓縮（適合線條，圖標等）儿奶，缺點只有 256 種顏色

jpg
支持上百萬種顏色框往，有損壓縮，壓縮比可達 180：1闯捎，而且質量受損不明顯椰弊，不支持圖形漸進與背景透明嘁酿，不支持動畫

png
為替代 gif 產生的，位圖文件男应，支持透明，半透明娱仔，不透明沐飘。不支持動畫，無損圖像格式牲迫。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 匹配父元素的倒數第 n 個子元素 E饵婆。

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

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

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

/* 淘寶網字體使用 */

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

盒陰影
/* box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 擴展程度 顏色 是否具有內陰影 */
盒子大小
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），是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式紧卒。
引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列侥衬、對齊和分配空白空間。
CSS3 過渡
div {
transition: width 2s;
-moz-transition: width 2s; / Firefox 4 /
-webkit-transition: width 2s; / Safari 和 Chrome /
-o-transition: width 2s; / Opera */
}
CSS3 變換
rotate()旋轉
translate()平移
scale( )縮放
skew()扭曲/傾斜
變換基點
3d 轉換
position 的值跑芳， relative 和 absolute 分別是相對于誰定位
absolute :生成絕對定位的元素轴总， 相對于最近一級的 定位不是 static 的父元素來進行定位。
fixed （老 IE 不支持）生成絕對定位的元素博个，通常相對于瀏覽器窗口或 frame 進行定位怀樟。
relative 生成相對定位的元素，相對于其在普通流中的位置進行定位盆佣。
static 默認值往堡。沒有定位械荷，元素出現在正常的流中
sticky 生成粘性定位的元素，容器的位置根據正常文檔流計算得出
box-sizing:border-box會產生怎樣的效果虑灰？
元素默認應用了box-sizing: content-box吨瞎，元素的寬高只會決定內容（content）的大小。
box-sizing: border-box改變計算元素width和height的方式穆咐，border和padding的大小也將計算在內颤诀。
元素的height = 內容（content）的高度 + 垂直方向的padding + 垂直方向border的寬度
元素的width = 內容（content）的寬度 + 水平方向的padding + 水平方向border的寬度
你了解 CSS Flex
flex 容器中存在兩條軸， 橫軸和縱軸对湃， 容器中的每個單元稱為 flex item崖叫。
在容器上可以設置 6 個屬性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
注意：當設置 flex 布局之后，子元素的 float拍柒、clear心傀、vertical-align 的屬性將會失效。
Flex 項目屬性
有六種屬性可運用在 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;