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

答案:

label標(biāo)簽來定義表單控制間的關(guān)系當(dāng)用戶選擇該標(biāo)簽時酸钦，瀏覽

器會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上枚驻。

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

Date:input type='text' name= 'B/>

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

優(yōu)點

iframe 能夠原封不動的把嵌入的網(wǎng)頁展現(xiàn)出來摔蓝。

如果有多個網(wǎng)頁引用 iframe渣聚，那么你只需要修改 iframe 的內(nèi)容，就可以實現(xiàn)調(diào)用的每一個頁面內(nèi)容的更改蔬蕊，方便快捷结澄。

網(wǎng)頁如果為了統(tǒng)一風(fēng)格，頭部和版本都是一樣的岸夯，就可以寫成一個頁面麻献，用 iframe 來嵌套，可以增加代碼的可重用囱修。

如果遇到加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告赎瑰，這些問題可以由 iframe 來解決。

缺點

框架結(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)運行

混雜模式：頁面以寬松向下兼容的方式顯示津函，模擬老式瀏覽器的行為

列舉 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 方面孤页，有很多獨立的方法尔苦，例如綁定事件的 attachEvent、創(chuàng)建事件的 createEventObject 等

e. CSS 方面行施，也有自己獨有的處理方式允坚，例如設(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 可以有哪些用途伍绳？

頁面可見性： 就是對于用戶來說，頁面是顯示還是隱藏, 所謂顯示的頁面乍桂，就是我們正在看的頁面冲杀；隱藏的頁面效床，就是我們沒有看的頁面。 因為权谁，我們一次可以打開好多標(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';}});

我們打開這個頁面菠镇，然后再打開另一個頁面，來回點擊這兩個頁面承璃，當(dāng)我們看到這個頁面時利耍，標(biāo)題顯示 visiable ,當(dāng)我們看另一個頁面時，標(biāo)題顯示 hidden;

動畫盔粹，視頻隘梨，音頻都可以在頁面顯示時打開，在頁面隱藏時關(guān)閉

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

分離 方便改版 快清晰簡潔 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 點擊后失效矛渴，解決辦法: 使用正確的書寫順序 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)站易用性钟病。

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

答案：css3刚梭、js肠阱、map 加 area

一.border-radius (css3)

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

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

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

// 獲取目標(biāo)元素varbox=document.getElementById('box');// 對目標(biāo)元素target的圓形區(qū)域進(jìn)行一個點擊事件綁定functionbindClickOnCircleArea(target,callback){target.onclick=function(e){e=e||window.event;// target中心點的坐標(biāo)varx1=100;vary1=100;// 事件源坐標(biāo)varx2=e.offsetX;vary2=e.offsetY;// 校驗是否在圓形點擊區(qū)，在的話就執(zhí)行callback回調(diào)// 計算事件觸發(fā)點與target中心的位置varlen=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));// 通過半徑進(jì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'/??mapname='Map'id='Map'?? ?area? ? shape='circle'coords='100,100,100'/??/map?

前端需要注意哪些 SEO

1.合理的 title拙寡、description、keywords：搜索對著三項的權(quán)重逐個減小琳水，title 值強(qiáng)調(diào)重點即可肆糕，重要關(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 框架

?!--[ifltIE9]?? ?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)致元素不顯示著蛙，但是不能用這個屬性實現(xiàn)樣式效果

id: 元素 id删铃，文檔內(nèi)唯一

lang: 元素內(nèi)容的的語言

spellcheck: 是否啟動拼寫和語法檢查

style: 行內(nèi) css 樣式

tabindex: 設(shè)置元素可以獲得焦點，通過 tab 可以導(dǎo)航

title: 元素相關(guān)的建議信息

translate: 元素和子孫節(jié)點內(nèi)容是否需要本地化

HTML5 為什么只需要寫 !DOCTYPE

HTML 4.01 中的 doctype 需要對 DTD 進(jì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)，提高了用戶體驗。將樣式表放在文檔底部附近完丽，會使許多瀏覽器（包括 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)特性：

總是獨占一行，表現(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 都能實現(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)等）籽腕，缺點只有 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 的透明效果有什么不同喘蟆？

多欄布局

?divclass='mul-col'?? ?div?? ? ?h3?新手上路?/h3?? ? ?p?新手專區(qū) 消費警示 交易安全24小時在線幫助 免費開店?/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:5px2px6pxrgba(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

@keyframesabc{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ù)男袨榈牟季址绞健?/p>

引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進(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()扭曲/傾斜

變換基點

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 項目屬性

有六種屬性可運用在 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)實現(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,vara,bdo,br,img,map,object,q,script,span,sub,supbutton,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

作者：一只小丫丫

鏈接：http://www.reibang.com/p/07338ff2cc1b

來源：簡書

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)女仰，非商業(yè)轉(zhuǎn)載請注明出處猜年。