1. 瀏覽器頁面有哪三層構(gòu)成？分別是什么冕杠？作用是什么微姊？
構(gòu)成：結(jié)構(gòu)層、表示層分预、行為層兢交。
分別是：HTML、CSS笼痹、JavaScript
作用：HTML實(shí)現(xiàn)頁面結(jié)構(gòu)配喳，CSS完成頁面的表現(xiàn)與風(fēng)格，JavaScript實(shí)現(xiàn)一些客戶端的功能與業(yè)務(wù)凳干。
2. HTML5的優(yōu)點(diǎn)與缺點(diǎn)
優(yōu)點(diǎn)：a. 網(wǎng)絡(luò)統(tǒng)一標(biāo)準(zhǔn)晴裹。HTML5本身是由W3C推薦的。
b. 多設(shè)備纺座、跨平臺(tái)息拜。
c. 即時(shí)更新
d. 提高可用性和改進(jìn)用戶的友好體驗(yàn)
e. 有幾個(gè)新的標(biāo)簽，這將有助于開發(fā)人員定義重要的內(nèi)容
f. 可以給站點(diǎn)帶來更多的多媒體元素
g. 可以很好的代替Flash和Silverlight
h. 涉及到網(wǎng)站的抓取和索引的時(shí)候，對于SEO很友好
i. 被大量應(yīng)用于移動(dòng)應(yīng)用程序和游戲
缺點(diǎn)：a. 安全：像之前Firefox4的web socket和透明代理的實(shí)現(xiàn)存在嚴(yán)重的安全問題少欺，同時(shí)web storage喳瓣、web socket這樣的功能很容易被黑客利用，來盜取用戶的信息和資料赞别。
b. 完善性：許多特性各瀏覽器的支持程度也不盡相同畏陕。
c. 指數(shù)門檻：HTML5簡化開發(fā)者工作的同時(shí)也代表了有許多新的屬性和API需要開發(fā)者學(xué)習(xí)，像web worker仿滔、web storage惠毁、web socket等新特性，后臺(tái)甚至瀏覽器原理的知識(shí)崎页，機(jī)遇的同時(shí)也是巨大的挑戰(zhàn)鞠绰。
d. 性能：某些平臺(tái)上的引擎問題導(dǎo)致HTML5性能低下。
e. 瀏覽器兼容性：最大缺點(diǎn)飒焦，IE9以下的瀏覽器幾乎全軍覆沒蜈膨。
3. 關(guān)于HTML文件開頭的doctype，以及嚴(yán)格模式與混雜（怪異）模式
(1). 每個(gè)HTML文件里開頭都有個(gè)重要的東西牺荠，Doctype翁巍，其作用是告知瀏覽器文檔使用哪種HTML或XHTML規(guī)范。（重點(diǎn)：告知瀏覽器按照何種規(guī)范解析頁面）
(2). 嚴(yán)格模式的排版和JS運(yùn)算是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行休雌。
(3). 在混雜模式中灶壶，頁面以寬松的向后兼容的方式顯示，模擬老式瀏覽器的行為以防止站點(diǎn)無法工作杈曲。
(4). Doctype不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)驰凛。
4. 常見的瀏覽器即其內(nèi)核
IE：trident內(nèi)核
Firefox：gecko內(nèi)核
Safari：webkit內(nèi)核
Opera：以前是presto內(nèi)核，現(xiàn)已改用Google Chrome的Blink內(nèi)核
Chrome：Blink（基于webkit担扑，Google與Opera Software共同開發(fā)）
5. 什么是瀏覽器內(nèi)核
瀏覽器內(nèi)核主要分成兩部分：渲染引擎（Layout Engineer或Rendering Engine）和JS引擎洒嗤。
渲染引擎：負(fù)責(zé)取得網(wǎng)頁內(nèi)容（HTML、XML魁亦、圖像等等）渔隶、整理訊息（例如加入CSS等），以及計(jì)算機(jī)網(wǎng)頁的顯示方式洁奈，然后會(huì)輸出至顯示器或打印機(jī)间唉。瀏覽器的內(nèi)核不同對于網(wǎng)頁的語法解釋會(huì)有所不同，所以渲染的效果也不相同利术。所有網(wǎng)頁瀏覽器呈野、電子郵件客戶端以及其他需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核印叁。
JS引擎：解釋和執(zhí)行JavaScript來實(shí)現(xiàn)網(wǎng)頁的動(dòng)態(tài)效果被冒。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確军掂，后來JS引擎越來越獨(dú)立，內(nèi)核就傾向于只指渲染引擎昨悼。
6. cookies蝗锥、sessionStorage與localStorage的區(qū)別
sessionStorage和localStorage是HTML5 Web Storage API提供的，可以方便的在web請求之間保存數(shù)據(jù)率触，有了本地?cái)?shù)據(jù)终议，就可以避免數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來回傳遞。
sessionStorage葱蝗、localStorage與cookies都是在瀏覽器端存儲(chǔ)的數(shù)據(jù)穴张，其中sessionStorage的概念很特別，引入了一個(gè)“瀏覽器窗口”的概念两曼。
sessionStorage是在同源的同窗口（或tab）中始終存在的數(shù)據(jù)皂甘。也就是說只要這個(gè)瀏覽器窗口沒有關(guān)閉，即使刷新頁面或進(jìn)入同源另一個(gè)頁面悼凑，數(shù)據(jù)仍然存在叮贩。關(guān)閉窗口后，sessionStorage即被銷毀佛析。同時(shí)“獨(dú)立”打開不同的窗口，即使是同一頁面彪蓬，寸莫，sessionStorage對象也是不同的。
cookies會(huì)發(fā)送到服務(wù)器端档冬，其余兩個(gè)不會(huì)膘茎。
主要區(qū)別：
(1) Cookies:

• 每個(gè)域名存儲(chǔ)量比較小（各瀏覽器不同酷誓，大致4k）
• 所有域名的存儲(chǔ)量有限制（各瀏覽器不同披坏，大致4k）
• 有個(gè)數(shù)限制（各瀏覽器不同）
• 會(huì)隨請求發(fā)送到服務(wù)器
  (2) LocalStorage:
• 永久存儲(chǔ)
• 單個(gè)域名存儲(chǔ)量比較大（推薦5m，各瀏覽器不同）
• 總體數(shù)量無限制
  (3) SessionStorage:
• 只在Session內(nèi)有效
• 存儲(chǔ)量更大（推薦沒有限制盐数，但是實(shí)際上各瀏覽器也不同）
  7. iframe有哪些缺點(diǎn)
• iframe會(huì)阻塞主頁面的Onload事件棒拂；
• iframe和主頁面在、共享連接池玫氢，而瀏覽器對相同域的連接有限制帚屉，所以會(huì)影響頁面的并行加載；
  如果要使用iframe漾峡，最好是通過JavaScript動(dòng)態(tài)給iframe添加src屬性攻旦，這樣可以繞開以上兩個(gè)問題。
• 搜索引擎的檢索程序無法解讀這種頁面生逸，不利于SEO牢屋；
  8. Label的作用是什么且预，是怎么用的
  label標(biāo)簽是來定義表單控制間的關(guān)系，當(dāng)用戶選擇該標(biāo)簽時(shí)烙无，瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上锋谐。

<label for="Name">Number:</label>
<input type="text" name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>

注意：label的for屬性值要與后面對應(yīng)的input標(biāo)簽id屬性值相同。
9. title和h3的區(qū)別皱炉，b與strong的區(qū)別怀估，i與em的區(qū)別
title屬性沒有明確意義，只表示是個(gè)標(biāo)題合搅。h3則表示層次分明的標(biāo)題多搀，對頁面信息的抓取也有很大的影響；
strong是標(biāo)明重點(diǎn)內(nèi)容灾部，有語氣加強(qiáng)的含義康铭，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時(shí)，strong會(huì)重讀赌髓，而b則是展示強(qiáng)調(diào)內(nèi)容从藤。
i內(nèi)容展示位斜體，em則表示強(qiáng)調(diào)的文本锁蠕。
自然樣式標(biāo)簽（Physical Style Elements）: b, i, u, s, pre
語義樣式標(biāo)簽（Semantic Style Elements）: strong, em, ins, del, code
應(yīng)該準(zhǔn)確使用語義樣式標(biāo)簽夷野，但不能濫用。在不確定使用哪種樣式標(biāo)簽的時(shí)候荣倾，優(yōu)先使用自然樣式標(biāo)簽悯搔。
10. HTML5標(biāo)簽的用途？
a. 使Web頁面的內(nèi)容更加有序和規(guī)范
b. 使搜索引擎更加容易按照HTML5規(guī)則識(shí)別出有效的內(nèi)容
c. 使Web頁面更接近于一種數(shù)據(jù)字段和表
11. src和href的區(qū)別
src是source的縮寫舌仍，用于替換當(dāng)前元素妒貌，指向外部資源的位置，指向的內(nèi)容會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置铸豁；在請求src資源時(shí)灌曙，會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如JS腳本节芥、img圖片和frame等元素在刺。
<script src='js.js'></script>
當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的下載和處理头镊，直到該資源加載增炭、編譯、執(zhí)行完畢拧晕，圖片和框架等元素也如此隙姿，類似于將所指向資源嵌入到當(dāng)前標(biāo)簽內(nèi)。這也是為什么將JS腳本放在底部而不是頭部厂捞。
href時(shí)Hypertext Reference的縮寫输玷，指向網(wǎng)絡(luò)資源所在位置队丝，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接，如果我們在文檔中添加
<link href='common.css rel='stylesheet'/>
那么瀏覽器會(huì)識(shí)別該文檔為css文件欲鹏，就會(huì)并行下載資源并且不會(huì)停止對當(dāng)前文檔的處理机久。這也是為什么建議使用link方式來加載css，而不是使用@import方式赔嚎。
12. 表單的基本組成部分有哪些膘盖，表單的主要用途是什么？
組成：表單標(biāo)簽尤误、表單域侠畔、表單按鈕
a. 表單標(biāo)簽：這里面包含了處理表單數(shù)據(jù)所用CGI程序的URL，以及數(shù)據(jù)提交到服務(wù)器的方法损晤；
b. 表單域：包含了文本框软棺、密碼框、隱藏域尤勋、多行文本框喘落、復(fù)選框、單選框最冰、下拉選擇框瘦棋、文件上傳框等；
c. 表單按鈕：包括提交按鈕暖哨，復(fù)位按鈕和一般按鈕赌朋；用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作鹿蜀。
主要用途：表單在網(wǎng)頁中主要負(fù)責(zé)數(shù)據(jù)采集的功能，向服務(wù)器傳送數(shù)據(jù)服球。
13. 表單提交中Get和Post方法的區(qū)別茴恰？
(1) get是從服務(wù)器上獲取數(shù)據(jù)，post是向服務(wù)器傳送數(shù)據(jù)斩熊。
(2) get是把參數(shù)數(shù)據(jù)隊(duì)列加到提交表單的ACTION屬性所指的URL中往枣，值和表單內(nèi)各個(gè)字段一一對應(yīng)，粉渠，在URL中可以看到分冈。post是通過HTTP post機(jī)制，將表單內(nèi)各個(gè)字段與內(nèi)容放置在HTML HEADER內(nèi)一起傳送到ACTION屬性所指的URL地址霸株，用戶看不到這個(gè)過程雕沉。
(3) 對于get方法，服務(wù)器端用Request.QueryString獲取變量的值去件。對于post方法坡椒，服務(wù)器端用Request.Form獲取提交的數(shù)據(jù)扰路。
(4) get傳送的數(shù)據(jù)量較小，不能大于2KB倔叼。post傳送的數(shù)據(jù)量較大汗唱，一般被默認(rèn)為不受限制，但理論上丈攒，IIS4中最大兩位80KB哩罪，IIS5中為100KB。
(5) get安全性低（因?yàn)閭鬟f參數(shù)值能在鏈接中看到）巡验，post安全性較高际插。
14. HTML5中如何嵌入音頻？
HTML5支持mp3深碱、wav和ogg格式的音頻腹鹉，下面是在網(wǎng)頁中嵌入音頻的簡單示例：

<audio controls>
    <source src="Ola Strandh - Amherst.mp3" type="audio/mp3">
    Your browser does'nt support audio embedding feature.
</audio>

14. 關(guān)于CSS的盒子模型

image.png

a. 標(biāo)準(zhǔn)的css盒子模型：寬度=內(nèi)容的寬度+邊框的寬度+內(nèi)邊框的寬度
b. 網(wǎng)頁設(shè)計(jì)中常見的屬性名：內(nèi)容(content)、內(nèi)邊距(padding)敷硅、邊框(border)功咒、外邊距(margin)，css盒子模型都具備這些屬性绞蹦。
c. 這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶?箱子)上來理解力奋，日常生活中所見的盒子也就是能裝東西的一種箱子，也具備這些屬性幽七，所以叫他盒子模型景殷。css盒子模型就是在網(wǎng)頁設(shè)計(jì)中經(jīng)常使用到的css技術(shù)所使用的一種思維模型。
舉個(gè)例子：
<div style="width: 300px; height: 100px; border: 25px solid green; padding: 25px; margin: 25px"></div>
則總寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距=300(width)+2 x 25(左右padding)+2 x 25(左右border)+2 x 25(左右margin)=450px澡屡，同理猿挚，總高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距=100(width)+2 x 25(上下padding)+2 x 25(上下border)+2 x 25(上下margin)=250px
15. CSS選擇器的類型，舉幾個(gè)各自例子
類型：基礎(chǔ)選擇器驶鹉、組合選擇器绩蜻、屬性選擇器、偽類室埋、偽元素办绝。
同一元素引用了多個(gè)樣式時(shí)，排在后面的樣式屬性的優(yōu)先級更高姚淆。
樣式選擇器的類型不同時(shí)孕蝉，優(yōu)先級順序?yàn)椋篿d選擇器>class選擇器>標(biāo)簽選擇器。
標(biāo)簽之間存在層級包含關(guān)系時(shí)腌逢，后代元素會(huì)繼承祖先元素的樣式降淮。如果后代元素定義了與祖先元素相同的樣式，則祖先元素的相同的樣式屬性會(huì)被覆蓋搏讶。繼承的樣式的優(yōu)先級比較低骤肛，至少比標(biāo)簽選擇器的優(yōu)先級低纳本。
基礎(chǔ)選擇器：

組合選擇器：

屬性選擇器：

偽類：

偽元素

16. 列出display的值并說明他們的作用焦辅？
inline(默認(rèn)值)：內(nèi)聯(lián)元素博杖；
none：隱藏對象。與visibility屬性的hidden值不同筷登，其不為被隱藏的對象保留其物理空間剃根；
block：塊元素；
list-item：列表項(xiàng)目仆抵；
inline-block：內(nèi)聯(lián)塊元素（CSS2）跟继；
table：塊元素級的表格（CSS2）种冬；
inline-table：內(nèi)聯(lián)元素級的表格镣丑，類同于html標(biāo)簽<table>（CSS2）；
table-caption：表格標(biāo)題娱两，類同于html標(biāo)簽<caption>（CSS2）莺匠；
table-cell：表格單元格，類同于html標(biāo)簽<td>（CSS2）十兢；
table-row：表格行趣竣。類同于html標(biāo)簽<tr>（CSS2）摇庙；
table-row-group：表格行組，類同于html標(biāo)簽<tbody>（CSS2）遥缕；
table-column：表格列卫袒，類同于html標(biāo)簽<col>（CSS2）；
table-column-group：表格列組顯示单匣，類同于html標(biāo)簽<colgroup>（CSS2）夕凝；
table-header-group：表格標(biāo)題組，類同于html標(biāo)簽<thead>（CSS2）户秤；
table-footer-group：表格腳注組码秉，類同于html標(biāo)簽<tfoot>（CSS2）；
run-in：根據(jù)上下文決定對象是內(nèi)聯(lián)對象還是塊級對象鸡号。（CSS3）转砖；
box：將對象作為彈性伸縮盒顯示（伸縮盒最老版本）（CSS3）；
inline-box：將對象作為內(nèi)聯(lián)彈性伸縮盒顯示（伸縮盒最老版本）（CSS3）鲸伴；
flexbox：將對象作為彈性伸縮盒顯示（伸縮盒過渡版本）（CSS3）府蔗；
inline-flexbox：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示（伸縮盒過渡版本）（CSS3）；
flex：將對象作為彈性伸縮盒顯示（伸縮盒最新版本）（CSS3）挑围；
inline-flex：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示（伸縮盒最新版本）（CSS3）礁竞；
17. 如何居中div，如何居中一個(gè)浮動(dòng)元素杉辙？
(1). 非浮動(dòng)元素居中：可以設(shè)置margin:0 auto令其居中模捂，定位，父級元素text-align:center等等蜘矢；
(2). 浮動(dòng)元素居中：
方法a：設(shè)置當(dāng)前div的寬度狂男，然后設(shè)置margin-left:50%; position:relative; left:-250px;其中的left是寬度的一半；
方法b：父元素和子元素同時(shí)左浮動(dòng)品腹，然后父元素相對左移動(dòng)50%岖食，再然后子元素相對左移動(dòng)-50%；
方法c：position定位等等舞吭。
18. CSS中l(wèi)ink和@import的區(qū)別泡垃？
(1). link屬于HTML標(biāo)簽，而@import是CSS提供的羡鸥；
(2). 頁面被加載時(shí)蔑穴，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁面被加載完后再加載惧浴；
(3). @import只在IE5以上才能被識(shí)別存和，而link是HTML標(biāo)簽，無兼容問題；
(4). link方法的樣式權(quán)重高于@import的權(quán)重捐腿。
19. block纵朋、inline释树、inline-block的細(xì)節(jié)對比
display:block
a容燕、block元素會(huì)獨(dú)占一行，多個(gè)block元素會(huì)各自新起一行请毛。默認(rèn)情況下宪祥，block元素寬度自動(dòng)填滿其父元素寬度寺鸥。
b、block元素可以設(shè)置width品山，height屬性胆建，塊級元素即使設(shè)置了寬度，仍然是獨(dú)占一行肘交。
c笆载、block元素可以設(shè)置margin和padding屬性。
display：inline
a涯呻、inline元素不會(huì)獨(dú)占一行凉驻，多個(gè)相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排列不下复罐，才會(huì)新?lián)Q一行涝登，其寬度隨元素的內(nèi)容而變化。
b效诅、inline元素設(shè)置width胀滚、height屬性無效。
c乱投、inline元素的margin和padding屬性咽笼，水平方向的padding-left、padding-right戚炫、margin-left剑刑、margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top双肤、padding-bottom施掏、margin-top、margin-bottom都不會(huì)產(chǎn)生邊距效果茅糜。
display：inline-block
a七芭、簡單來說就是將對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)限匣，之后的內(nèi)聯(lián)對象會(huì)被排列在同一行內(nèi)抖苦。比如我們可以給一個(gè)link(a元素)inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性米死。
補(bǔ)充說明
a锌历、一般我們會(huì)用display:block、display:inline或者display:inline-block來調(diào)整元素的布局級別峦筒，其實(shí)display的參數(shù)遠(yuǎn)遠(yuǎn)不止這三種究西，僅僅是比較常用而已。
b物喷、IE（低版本IE）本來是不支持inline-block的卤材，所以在IE中對內(nèi)聯(lián)元素使用display:inline-block，理論上IE是不識(shí)別的峦失，但使用display:inline-block在IE下會(huì)觸發(fā)layout扇丛，從而使內(nèi)聯(lián)元素?fù)碛辛薲isplay:inline-block屬性的表象。
20. 浮動(dòng)元素會(huì)引起的問題以及解決辦法
問題：
(1). 父元素的高度無法被撐開尉辑，影響與父元素同級的元素帆精；
(2). 與浮動(dòng)元素同級的非浮動(dòng)元素會(huì)跟隨其后；
(3). 若非第一給元素浮動(dòng)隧魄，則該元素之前的元素也需要浮動(dòng)卓练，否則會(huì)影響頁面顯示的結(jié)構(gòu)。
解決辦法：
使用CSS中的clear:both;屬性來清楚元素的浮動(dòng)可解決問題(2)(3)购啄，對于問題(1)襟企，添加如下樣式，給父元素添加clearfix樣式：

.clearfix:after{content:" "; display:block; height:0; clear:both; visibility:hidden; }
.clearfix{display:inline-block;} /* for IE/Mac */

清除浮動(dòng)的幾種方法：
(1). 額外標(biāo)簽法：在元素最后添加：`<div style="clear:both;"></div>（缺點(diǎn)：該方法會(huì)增加額外的標(biāo)簽狮含，使HTML結(jié)構(gòu)看起來不夠簡潔顽悼。）；
(2). 使用after偽類：

#parent:after{
??content:" ";
??height:0;
??visibility:hidden;
??display:block;
??clear:both;
}

(3). 浮動(dòng)外部元素
(4). 設(shè)置'overflow'為hidden或者auto
21. box-sizing屬性的用法
用法：設(shè)置或檢索對象的盒模型組成模式
a几迄、boxsizing:content-box：padding和border不被包含在定義的width和height之內(nèi)表蝙。對象的實(shí)際寬度等于設(shè)置的width、border乓旗、padding之和府蛇，即Element width = width+border+padding，但占有頁面位置還要加上margin屿愚，此屬性表現(xiàn)為標(biāo)準(zhǔn)模式下的盒模型汇跨。
b、box-sizing:border-box：padding和border被包含在定義的width和heigth之內(nèi)妆距，對象的實(shí)際寬度等于設(shè)置的width值穷遂，即使定義有border和padding也不會(huì)改變對象的實(shí)際寬度，即Element width = width娱据，此屬性表現(xiàn)為怪異模式下的盒模型蚪黑。
22. 什么是邊距折疊？
外邊距折疊：相鄰的兩個(gè)或多個(gè)外邊距(margin)在垂直方向會(huì)合并成一個(gè)外邊距(margin)
相鄰：沒有被非空內(nèi)容、padding忌穿、border或clear分隔開的margin特性抒寂，非空內(nèi)容就是說元素之間是兄弟關(guān)系或者父子關(guān)系。
垂直方向外邊距合并計(jì)算：
a掠剑、參加折疊的margin都是正值：取其中margin較大的值作為最終margin值屈芜。
b、參與折疊的margin都是負(fù)值：取其中絕對值較大的朴译，然后從0位置負(fù)向位移井佑。
c、參與折疊的margin中有正有負(fù)：先取出負(fù)margin中絕對值最大的眠寿，然后和正margin值中最大的margin相加躬翁。
23. 隱藏元素的方式有哪些？
a盯拱、使用CSS的display:none姆另，不會(huì)占有原來的位置；
b坟乾、使用CSS的visibility:hidden迹辐，會(huì)占有原來的位置；
c甚侣、使用HTML5中的新增屬性hidden='hidden'明吩，不會(huì)占有原來的位置。
24. 頁面中如何使用定位(position)
position有如下屬性：
(1). static(默認(rèn)值)：可以認(rèn)為靜態(tài)的殷费，默認(rèn)元素都是靜態(tài)的定位印荔，對象遵循常規(guī)流。此時(shí)4個(gè)定位偏移屬性不會(huì)被應(yīng)用详羡，也就是使用left仍律、right、top实柠、bottom將不會(huì)生效水泉；
(2). relative：相對定位，對象遵循常規(guī)流窒盐，并且參照自身在常規(guī)流中的位置通過top草则、right、left蟹漓、right這4個(gè)定位偏移屬性進(jìn)行偏移時(shí)不會(huì)影響常規(guī)流中的任何元素炕横。
(3). absolute：a、絕對定位葡粒，對象脫離常規(guī)流份殿，此時(shí)偏移屬性參照的是離自身最近的定位祖先元素膜钓，如果沒有定位的祖先元素，則一直回溯到body元素卿嘲，盒子的偏移位置不影響常規(guī)流中的任何元素颂斜，其margin不與其他任何margin折疊；
b腔寡、元素定位參考的是離自身最近的定位祖先元素，要滿足兩個(gè)條件：第一個(gè)是自己的祖先元素掌唾，可以是父元素也可以是父元素的父元素放前，一直找，如果沒有則選擇body為對照對象糯彬。第二個(gè)條件是要求祖先元素必須定位凭语，通俗說就是position的屬性值非static就行。
(4). fixed：固定定位撩扒，與absolute一致似扔，但偏移定位是以窗口為參考。當(dāng)出現(xiàn)滾動(dòng)條時(shí)搓谆，對象不會(huì)隨著滾動(dòng)炒辉。
(5). center：與absolute一致，但偏移定位是以定位祖先元素的中心點(diǎn)為參考泉手。盒子在其包含容器垂直水平居中黔寇。（CSS3）
(6). page：與absolute一致，元素在分頁媒體或者區(qū)域塊內(nèi)斩萌，元素的包含塊始終是初始包含塊缝裤，否則取決于每個(gè)absolute模式（CSS3）
(7). sticky：對象在常態(tài)時(shí)遵循常規(guī)流。他就像是relative和fixed的結(jié)合體颊郎，當(dāng)在屏幕中時(shí)按照常規(guī)流排版憋飞，當(dāng)卷動(dòng)到屏幕外時(shí)則表現(xiàn)如fixed/該屬性的表現(xiàn)是現(xiàn)實(shí)中你見到的吸附效果（CSS3）
25. 垂直居中的方法
(1) margin:auto法。定位為上下左右為0姆吭，margin:0可以實(shí)現(xiàn)脫離文檔流的居中榛做。

css:
div{
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
html:
<div>
<img src="mm.jpg">
</div>

(2) margin負(fù)值法。

        .container {
            width: 500px;
            height: 400px;
            position: relative;
            border: 2px solid #379;
        }
        .inner {
            width: 480px;
            height: 380px;
            background-color: #746;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -190px; /* height的一半 */
            margin-left: -240px; /* width的一半 */
        }

補(bǔ)充：其實(shí)這里也可以將margin-top和margin-left負(fù)值替換成transform:translateX(-50%)和transform:translateY(-50%)
(3) table-cell（未脫離文檔流的）
設(shè)置父元素的display:table-cell内狸，并且vertical-align=middle瘤睹，這樣子元素可以實(shí)現(xiàn)垂直居中。

        div {
            width: 500px;
            height: 500px;
            border: 3px solid #555;
            display: table-cell;  /* 表格單元格 */
            vertical-align: middle;
            text-align: center;
        }
        img {
            vertical-align: middle;
        }

(4) 利用flex
將父元素設(shè)置為display:flex答倡，并且設(shè)置align-items:center; justify-content:center轰传。

        .container {
            width: 300px;
            height: 200px;
            border: 3px solid #546461;
            display: -webkit-flex;
            display: flex;  /* 將對象作為彈性伸縮盒顯示（伸縮盒過渡版本） */
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
        }
        .inner {
            border: 3px solid #458761;
            padding: 20px;
        }

26. visibility=hidden，opacity=0瘪撇；display:none的區(qū)別
(1) visibility=hidden：該元素隱藏起來了获茬，但不會(huì)改變頁面布局港庄，但是不會(huì)觸發(fā)該元素已經(jīng)綁定的事件。
(2) opacity=0：該元素隱藏起來了恕曲，但不會(huì)改變頁面布局鹏氧，而且如果該元素綁定了一些事件（如click），那么點(diǎn)擊該區(qū)域佩谣，也能出發(fā)相應(yīng)事件把还。
(3) display:none；把元素隱藏起來茸俭，并且會(huì)改變頁面布局吊履，可以理解成在頁面中把該元素刪除掉一樣。
27. 關(guān)于JS動(dòng)畫和CSS3動(dòng)畫的差異
渲染線程分為main thread和compositor thread调鬓，如果css動(dòng)畫只改變transform和opacity艇炎，這時(shí)整個(gè)css動(dòng)畫得以在compositor thread完成（而js動(dòng)畫則會(huì)在main thread執(zhí)行，然后出發(fā)compositor thread進(jìn)行下一步操作）腾窝。特別注意的是如果改變transform和opacity是不會(huì)layout或者paint的缀踪。
區(qū)別：
功能涵蓋面，js比css大虹脯；
實(shí)現(xiàn)/重構(gòu)難度不一驴娃，css比js更簡單，性能調(diào)優(yōu)方面固定循集；
對幀速表現(xiàn)不好的低版本瀏覽器托慨，css3可以做到自然降級；
css動(dòng)畫有天然事件支持暇榴；
css3有兼容性問題厚棵。
28. position屬性比較
fixed（固定定位）：元素的位置相對于瀏覽器窗口是固定位置，即使窗口是滾動(dòng)的它也不會(huì)移動(dòng)蔼紧。fixed定位使元素的位置與文檔流無關(guān)婆硬，因此不占據(jù)空間。fixed定位的元素和其他元素重疊奸例。
relative（相對定位）：如果對一個(gè)元素進(jìn)行相對定位彬犯，它將出現(xiàn)在它所在的位置上，然后可以通過設(shè)置垂直或水平位置查吊，讓這個(gè)元素“相對于”它的起點(diǎn)進(jìn)行移動(dòng)谐区。在使用相對定位時(shí)，無論是否進(jìn)行移動(dòng)逻卖，元素仍然占據(jù)原來的空間宋列。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其他框评也。
absolute（絕對定位）：絕對定位的元素的位置相對于最近的已定位父元素炼杖，如果元素沒有已定位的父元素灭返，那么它的位置相對于<html>。absolute定位使元素的位置與文檔流無關(guān)坤邪，因此不占據(jù)空間熙含。absolute定位的元素和其他元素重疊。
sticky（粘性定位）：元素先按照普通文檔流定位艇纺，然后相對于該元素在流中的flow root（BFC）和containing block（最近的塊級祖先元素）定位怎静。而后，元素定位表現(xiàn)為在跨越特定閾值前為相對定位黔衡，之后為固定定位蚓聘。
static（默認(rèn)定位）：默認(rèn)值，沒有定位员帮，元素出現(xiàn)在正常的流中（忽略top或粮，bottom导饲，left捞高，right或者z-index聲明）。
inherit：規(guī)定應(yīng)該從父元素繼承position屬性的值渣锦。
29. 什么是BFC
BFC就是常說的塊格式化上下文硝岗，這是一個(gè)獨(dú)立的渲染區(qū)域，規(guī)定了內(nèi)部如何布局袋毙，并且這個(gè)區(qū)域的子元素不會(huì)影響到外面的元素型檀，其中比較重要的布局規(guī)則有內(nèi)部box垂直放置，計(jì)算BFC的高度的時(shí)候听盖，浮動(dòng)元素也參與其中胀溺，觸發(fā)BFC的規(guī)則有根元素、浮動(dòng)元素皆看、pisition為absolute或fixed的元素仓坞、display為inline-block，table-cell腰吟，table-caption无埃，flex，inline-flex以及overflow不為visible的元素毛雇。
30. line-height和height的區(qū)別
line-height一般是指布局里面一段文字上下行之間的高度嫉称，是針對字體來設(shè)置的。height一般是指容器的整體高度灵疮。