一、position有幾種取值，分別是什么意思？?
????css中的position有4種取值，分別是static、fixed、relative、absolute。
詳細(xì)解釋：
????static：相當(dāng)于沒有定位，元素會(huì)出現(xiàn)在正常的文檔流中。
????fixed：元素框的表現(xiàn)類似于absolute，但是fixed是相對于視窗本身，也就是瀏覽器窗口而定位的。所以，采用該定位的元素在頁面下拉的時(shí)候，其位置并不會(huì)發(fā)生變化。
????relative：生成相對定位的元素，相對于元素本身的位置進(jìn)行定位，它原本所占的空間仍然會(huì)保留。
????absolute：生成絕對定位的元素，相對于static定位以外的第一個(gè)有定位的祖先元素進(jìn)行定位。由于static定位相當(dāng)于沒有定位，所以absolute定位實(shí)際上就是相對于有定位的第一個(gè)祖先元素定位，如果所有的祖先元素都沒有定位，則相對于初始包含塊或者畫布，一般就是body元素定位。
二、px、em、rem的區(qū)別
????1、px是固定的像素，一旦設(shè)置了就無法因?yàn)檫m應(yīng)頁面大小而改變。
????2、em和rem相對于px更具有靈活性，他們是相對長度單位，意思是長度不是定死了的，更適用于響應(yīng)式布局。
????3、em是相對于其父元素來設(shè)置字體大小的，一般都是以的“font-size”為基準(zhǔn)。這樣就會(huì)存在一個(gè)問題，進(jìn)行任何元素設(shè)置，都有可能需要知道他父元素的大小。而Rem是相對于根元素，這樣就意味著，我們只需要在根元素確定一個(gè)參考值。
????總之：對于em和rem的區(qū)別一句話概括：em相對于父元素，rem相對于根元素。
三、清除浮動(dòng)的方式有哪些？最優(yōu)的事哪一種？
????（1）給父級元素單獨(dú)定義高度（height）
? ? ? ? ? 原理：如果父級元素沒有定義高度，父元素的高度完全由子元素?fù)伍_時(shí)，父級div手動(dòng)定義height，就解決了父級div無法自動(dòng)獲取到高度的問題。
? ? ? ? ?優(yōu)點(diǎn)：簡單、代碼少、容易掌握。
? ? ? ? ?缺點(diǎn)：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時(shí)，會(huì)產(chǎn)生問題。對于響應(yīng)式布局會(huì)有很大影響。
（2）在標(biāo)簽結(jié)尾處加空div標(biāo)簽 clear:both
????????原理：添加一個(gè)空div，利用css提高的clear:both清除浮動(dòng)，讓父級div能自動(dòng)獲取到高度。
????????優(yōu)點(diǎn)：簡單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問題
????????缺點(diǎn)：不少初學(xué)者不理解原理；如果頁面浮動(dòng)布局多，就要增加很多空div，不利于頁面的優(yōu)化。
（3）父級div定義 偽類:after 和 zoom ?? ------------比較支持
????????原理：元素生成偽類的作用和效果相當(dāng)于方法2中的原理，但是IE8以上和非IE瀏覽器才支持:after，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動(dòng)問題
????????優(yōu)點(diǎn)：瀏覽器支持好、不容易出現(xiàn)怪問題，寫法是固定的，不理解也可以直接復(fù)制使用；（小編大力推薦使用此種方法，簡單便捷，只需添加一個(gè)class即可解決問題）
????????缺點(diǎn)：css代碼多、不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持。
? ? （4）父級div定義 overflow:hidden
????????優(yōu)點(diǎn)：簡單、代碼少、瀏覽器支持好
????????缺點(diǎn)：不能和position配合使用，因?yàn)槌龅某叽绲臅?huì)被隱藏。（不建議使用此種方式，可能會(huì)影響頁面元素布局）
????（5）父級div定義 overflow:auto
????????原理：必須定義width或zoom:1，同時(shí)不能定義height，使用overflow:auto時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度
????????優(yōu)點(diǎn)：簡單、代碼少、瀏覽器支持好
????????缺點(diǎn)：內(nèi)部寬高超過父級div時(shí)，會(huì)出現(xiàn)滾動(dòng)條。
????????建議：不推薦使用，如果你需要出現(xiàn)滾動(dòng)條或者確保你的代碼不會(huì)出現(xiàn)滾動(dòng)條就使用吧。
四、readonly和disabled的區(qū)別
? ? ? ? 兩個(gè)屬性都可以作用于input等表單元素上，都使得元素成為“不可用”的狀態(tài)；
? ? ? ?1、字面意義上的區(qū)別：
? ??????????readonly表示“只讀”，一般表示對于文字內(nèi)容只讀，即不可更改內(nèi)容，對于非文字的表單“只讀”與“不只讀”似乎沒有啥區(qū)別；
????????????disabled表示“使殘廢，使無效”，都?xì)垙U了，那還管你有沒有文字內(nèi)容，都得殘掉
? ? ? ? 2、兩者的作用范圍區(qū)別在哪呢？。
? ? ? ? ? ??disabled屬性可以作用于所有的表單元素。
? ??????????readonly屬性只對可以輸入的表單元素有效，如：（text、password、文本框等）
? ? ? ? 3、作用程度的區(qū)別：
? ? ? ? ????disabled屬性阻止對元素的一切操作，例如獲取焦點(diǎn)，點(diǎn)擊事件等等。
? ? ? ? ? ??readonly屬性只是將元素設(shè)置為只讀，其他操作正常。
? ? ? ? 4、readonly和disabled對表單提交的作用不同
? ?????????disabled屬性可以讓表單元素的值無法被提交。
? ?????????readonly屬性則不影響提交問題。
? ? ?總結(jié)一下子：
? ??????????readonly 屬性規(guī)定輸入字段為只讀。
? ? ? ? ? ? ? ? ?只讀字段是不能修改的。不過，用戶仍然可以使用 tab 鍵切換到該字段，還可以選中或拷貝其文本。readonly 屬性可以防止用戶對值進(jìn)行修改，直到滿足某些條件為止（比如選中了一個(gè)復(fù)選框）。然后，需要使用 JavaScript 消除 readonly 值，將輸入字段切換到可編輯狀態(tài)。readonly 屬性可與?<input type="text"> 或 <input type="password"> 配合使用。
? ??????????disabled 屬性規(guī)定應(yīng)該禁用 input 元素。
????????????被禁用的 input 元素既不可用，也不可點(diǎn)擊?？梢栽O(shè)置 disabled 屬性，直到滿足某些其他的條件為止（比如選擇了一個(gè)復(fù)選框等等）。然后，就需要通過 JavaScript 來刪除 disabled 值，將 input 元素的值切換為可用。注釋：disabled 屬性無法與 <input type="hidden"> 一起使用。
五、什么是瀏覽器重繪和重排？什么情況下會(huì)觸發(fā)重排？
? ? ? ?1、 什么是瀏覽器重繪和重排？
? ??????重繪：當(dāng)我們對?DOM?的修改導(dǎo)致了樣式的變化、卻并未影響其幾何屬性（比如修改了顏色或背景色）時(shí)，瀏覽器不需重新計(jì)算元素的幾何屬性、直接為該元素繪制新的樣式（跳過了上圖所示的回流環(huán)節(jié)）。
? ??????回流：當(dāng)我們對?DOM?的修改引發(fā)了?DOM?幾何尺寸的變化（比如修改元素的寬、高或隱藏元素等）時(shí)，瀏覽器需要重新計(jì)算元素的幾何屬性（其他元素的幾何屬性和位置也會(huì)因此受到影響），然后再將計(jì)算的結(jié)果繪制出來。這個(gè)過程就是回流（也叫重排）
????????通過上訴我們知道：回流必定引發(fā)重繪，重繪不一定引發(fā)回流。回流的代價(jià)比重繪高。
? ? ? ?2、什么情況下會(huì)觸發(fā)重排？
? ? ? ? ? ?（1）哪些屬性的修改會(huì)引起回流：
????????????????????DOM的添加和刪除；
? ? ? ? ? ? ? ? ? ? 頁面的加載；
????????????????????元素尺寸改變——邊距、填充、邊框、寬度和高度；
????????????????????元素位置的改變；
????????????????????內(nèi)容變化，比如用戶在input框中輸入文字；
????????????????????瀏覽器窗口尺寸改變——resize事件發(fā)生時(shí)；
????????????????????獲取某些屬性：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight。（瀏覽器為了返回最精確的值，需要flush隊(duì)列，因?yàn)殛?duì)列中可能會(huì)有影響到這些值的操作）
? ? ? ? ? ? （2）常見引起重繪的屬性：
六、css優(yōu)先級算法如何計(jì)算？有什么不同？
? ? ? ? 通過CSS的specificity來計(jì)算優(yōu)先級，specificity的規(guī)則用一個(gè)四位數(shù)來表示，更像四級從左到右，左的最大級，一級大于一級，數(shù)位之間沒有進(jìn)制，多個(gè)選擇符用到同一個(gè)元素上時(shí)那么specificity上值高的最終獲得優(yōu)先級。
????????優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);載入樣式以最后載入的定位為準(zhǔn);優(yōu)先級為:!important > id > class > tagimportant比內(nèi)聯(lián)優(yōu)先級高(style)
? ? ? ?1、行內(nèi)樣式優(yōu)先級specificity值為1,0,0,0 高于外部定義
????????2、按CSS代碼中出現(xiàn)的順序決定，后者CSS樣式居上；
????????3、!important聲明specificity值優(yōu)先級最高
????????4、由繼續(xù)而得到的樣式?jīng)]有specificity的計(jì)算，它低于一切其他規(guī)則（比如全局選擇符*定義規(guī)則）
