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

答案:

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

器會自動將焦點轉(zhuǎn)到和標簽相關(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)一風格，頭部和版本都是一樣的，就可以寫成一個頁面，用 iframe 來嵌套，可以增加代碼的可重用。

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

缺點

框架結(jié)構(gòu)中出現(xiàn)各種滾動條

iframe 會阻塞主頁面的 Onload 事件

搜索引擎的檢索程序無法解讀這種頁面，不利于 SEO

iframe 和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。

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

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

1.告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。

2.告訴瀏覽器按照何種規(guī)范解析頁（如果你的頁面沒有 DOCTYPE 的聲明，那么 compatMode 默認就是 BackCompat,瀏覽器按照自己的方式解析渲染頁面）

解析：

doctype 是一種標準通用標記語言的文檔類型聲明，目的是告訴標準通用標記語言解析器要使用什么樣的文檔類型定義（DTD）來解析文檔。

聲明是用來指示web瀏覽器關(guān)于頁面使用哪個HTML版本進行編寫的指令。 聲明必須是HTML文檔的第一行，位于html標簽之前。

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

嚴格模式與混雜模式

嚴格模式：以瀏覽器支持的最高標準運行

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

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

a. IE 的排版引擎是 Trident （又稱為 MSHTML）

b. Trident 內(nèi)核曾經(jīng)幾乎與 W3C 標準脫節(jié)（2005 年）

c. Trident 內(nèi)核的大量 Bug 等安全性問題沒有得到及時解決

d. JS 方面，有很多獨立的方法，例如綁定事件的 attachEvent、創(chuàng)建事件的 createEventObject 等

e. CSS 方面，也有自己獨有的處理方式，例如設置透明，低版本 IE 中使用濾鏡的方式

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

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

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

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

表示層（presentation layer）

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

行為層（behaviorlayer）

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

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

1、CDN 緩存更方便

2、突破瀏覽器并發(fā)限制

3、節(jié)約 cookie 帶寬

4、節(jié)約主域名的連接數(shù)，優(yōu)化頁面響應速度

5、防止不必要的安全問題

頁面可見性（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;

動畫，視頻，音頻都可以在頁面顯示時打開，在頁面隱藏時關(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 默認的行高造成的，使用 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 標準以及 W3C 的理解與認識

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

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

答案：css3、js、map 加 area

一.border-radius (css3)

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

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

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

// 獲取目標元素varbox=document.getElementById('box');// 對目標元素target的圓形區(qū)域進行一個點擊事件綁定functionbindClickOnCircleArea(target,callback){target.onclick=function(e){e=e||window.event;// target中心點的坐標varx1=100;vary1=100;// 事件源坐標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)));// 通過半徑進行校驗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 值強調(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)站速度是搜索引擎排序的一個重要指標

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

新特性：

拖拽釋放(Drag and drop) API

語義化更好的內(nèi)容標簽（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)生負面影響的元素：frame，frameset，noframes；

支持 HTML5 新標簽：

IE8/IE7/IE6 支持通過 document.createElement 方法產(chǎn)生的標簽， 可以利用這一特性讓這些瀏覽器支持 HTML5 新標簽， 瀏覽器支持新標簽后，還需要添加標簽默認的樣式：

當然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架

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

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

accesskey:設置快捷鍵，提供快速訪問元素如aaa在 windows 下的 firefox 中按 alt + shift + a 可激活元素

class:為元素設置類標識，多個類名用空格分開，CSS 和 javascript 可通過 class 屬性獲取元素

contenteditable: 指定元素內(nèi)容是否可編輯

contextmenu: 自定義鼠標右鍵彈出菜單內(nèi)容

data-*: 為元素增加自定義屬性

dir: 設置元素文本方向

draggable: 設置元素是否可拖拽

dropzone: 設置元素拖放類型： copy, move, link

hidden: 表示一個元素是否與文檔。樣式上會導致元素不顯示，但是不能用這個屬性實現(xiàn)樣式效果

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

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

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

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

tabindex: 設置元素可以獲得焦點，通過 tab 可以導航

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

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

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 不存在或格式不正確會導致文檔以怪異模式呈現(xiàn)。

對 web 標準、可用性、可訪問性的理解

可用性（Usability）：

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

可訪問性（Accessibility）：

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

可維護性（Maintainability）：

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

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

HTML5文檔類型：?!doctype html?

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

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

把?link?放在?head?中

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

把?script?標簽恰好放在?/body?之前

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

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

什么是漸進式渲染

漸進式渲染（progressive rendering）

漸進式渲染是用于提高網(wǎng)頁性能（尤其是提高用戶感知的加載速度），以盡快呈現(xiàn)頁面的技術(shù)。

在以前互聯(lián)網(wǎng)帶寬較小的時期，這種技術(shù)更為普遍。如今，移動終端的盛行，而移動網(wǎng)絡往往不穩(wě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 中充當 Global 對象

img 上 title 與 alt

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

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

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

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

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

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

Opacity:元素本身依然占據(jù)它自己的位置并對網(wǎng)頁的布局起作用。它也將響應用戶交互;

Visibility:與 opacity 唯一不同的是它不會響應任何用戶交互。此外，元素在讀屏軟件中也會被隱藏;

Display:display 設為 none 任何對該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會讀到元素的內(nèi)容。這種方式產(chǎn)生的效果就像元素完全不存在;

Position:不會影響布局，能讓元素保持可以操作;

Clip-path:clip-path 屬性還沒有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，瀏覽器支持度還要低;

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

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

1.使用額外標簽法（不推薦使用）

在浮動的盒子下面再放一個標簽，使用 clear:both;來清除浮動

a 內(nèi)部標簽：會將父盒子的高度重新?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_/}

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

Link 屬于 html 標簽，而@import 是 CSS 中提供的

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

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

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

偽元素和偽類的區(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，單選框或復選框被選中。

行內(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 是可以設置的），就是里面文字或圖片的大小。

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

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

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

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

垂直方向：line-height

水平方向：letter-spacing

px 和 em 的區(qū)別

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

瀏覽器的默認字體高都是 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;/*設為高度的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;/*很關(guān)鍵的一步*/position:absolute;/*父元素需要相對定位*/left:0;top:0;right:0;bottom:0;/*讓四個定位屬性都為0*/}

方法四：flex 布局居中

body{display:flex;/*設置外層盒子display為flex*/align-items:center;/*設置內(nèi)層盒子的垂直居中*/justify-content:center;/*設置內(nèi)層盒子的水平居中*/.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;}

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

display : 隱藏對應的元素但不擠占該元素原來的空間。

visibility: 隱藏對應的元素并且擠占該元素原來的空間。

即是，使用 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 屬性，設置值為 scale(x,y) 定義 2D 縮放轉(zhuǎn)換

示例：

-webkit-transform: scale(0.50);

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

gif

圖形交換格式，索引顏色格式，顏色少的情況下，產(chǎn)生的文件極小，支持背景透明，動畫，圖形漸進，無損壓縮（適合線條，圖標等），缺點只有 256 種顏色

jpg

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

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?手機淘寶 旺信 大眾評審 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 可以用來加載字體樣式，而且它還能夠加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。

@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: 水平方向的偏移量 垂直方向的偏移量 模糊程度 擴展程度 顏色 是否具有內(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），是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當?shù)男袨榈牟季址绞健?/p>

引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

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 的父元素來進行定位。

fixed （老 IE 不支持）生成絕對定位的元素，通常相對于瀏覽器窗口或 frame 進行定位。

relative 生成相對定位的元素，相對于其在普通流中的位置進行定位。

static 默認值。沒有定位，元素出現(xiàn)在正常的流中

sticky 生成粘性定位的元素，容器的位置根據(jù)正常文檔流計算得出

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

元素默認應用了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。

在容器上可以設置 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;

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

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

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

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

行內(nèi)元素

一個行內(nèi)元素只占據(jù)它對應標簽的邊框所包含的空間

一般情況下，行內(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)邊距和外邊距都可以改變，可以容納塊級標簽和其他行內(nèi)標簽

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

作者：一只小丫丫

鏈接：http://www.itdecent.cn/p/07338ff2cc1b

來源：簡書

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