【完整詳細】CSS面試知識點總結(jié)

1、CSS面試知識點總結(jié)fl? 1.介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？低版本 IE的盒子模型有什么不同的？? 2.CSS選擇符有哪些？? 3.:before和:after中雙冒號和單冒號有什么區(qū)別？解釋一下這2個偽元素的作用。? 4.偽類與偽元素的區(qū)別? 5.CSS中哪些屬性可以繼承？? 6.CSS優(yōu)先級算法如何計算？?7.關(guān)于偽類LVHA的解釋？? 8.CSS3新增偽類有那些？?9.如何居中 div ? 10.display有哪些值？說明他們的作用。? 11.position 的值 relative 和 absolute 定位原點是？?12.CSS3有哪些新特性？（根據(jù)項目回答）? 13.請解釋一

2、下 CSS3的Flexbox （彈性盒布局模型），以及適用場景？?14.用純CSS創(chuàng)建一個三角形的原理是什么？?15.一個滿屏品字布局如何設(shè)計 ？? 16.CSS多列等高如何實現(xiàn)？? 17.經(jīng)常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧？?18.li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？?19.為什么要初始化 CSS樣式？? 20.什么是包含塊，對于包含塊的理解？? 21.CSS里的visibility 屬性有個 collapse屬性值是干嘛用的？在不同瀏覽器下以 后什么區(qū)別？? 22.width:auto 和 width:100x 的區(qū)別?2

3、3.絕對定位元素與非絕對定位元素的百分比計算的區(qū)別? 24.簡單介紹使用圖片base64編碼的優(yōu)點和缺點。? 25.'display'、'position'和'float'的相互關(guān)系？? 26.margin重疊問題的理解。? 27.對BFC規(guī)范（塊級格式化上下文：blockformattingcontext ）的理解？? 28.IFC是什么？?29.請解釋一下為什么需要清除浮動？清除浮動的方式?30.使用clear屬性清除浮動的原理？?31.zoom:1的清除浮動原理？? 32.移動端的布局用過媒體查詢嗎? 33.使用CSS預(yù)處理器嗎？喜歡哪個？

4、? 34.CSS優(yōu)化、提高性能的方法有哪些？? 35.瀏覽器是怎樣解析 CSS選擇器的？?36.在網(wǎng)頁中應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢？? 37.margin和padding 分別適合什么場景使用？? 38.抽離樣式模塊怎么寫，說出思路，有無實踐經(jīng)驗？阿里航旅的面試題?39.簡單說一下 css3的all屬性。? 40.為什么不建議使用統(tǒng)配符初始化css樣式。? 41.absolute 的containingblock （包含塊）計算方式跟正常流有什么不同？?42.對于hasLayout的理解？? 43.元素豎向的百分比設(shè)定是相對于容器的高度嗎？? 44.全屏滾動的原理是彳f么？用到了 C

5、SS的哪些屬性？（待深入實踐）? 45.什么是響應(yīng)式設(shè)計？響應(yīng)式設(shè)計的基本原理是什么？如何兼容低版本的IE?（待深入了解）? 46.視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現(xiàn)， 和只出現(xiàn)一次分別怎么做？）? 47.如何修改chrome記住密碼后自動填充表單的黃色背景？? 48.怎么讓 Chrome 支持小于 12Px的文字？? 49.讓頁面里的字體變清晰，變細用 CSS怎么做？? 50.font-style 屬性中 italic 和 oblique 的區(qū)別？? 51.設(shè)備像素、css像素、設(shè)備獨立像素、dpr、ppi之間的區(qū)別？? 52.layoutviewport

6、、 visualviewport 和 idealviewport 的區(qū)另U? 53.position:fixed;在 android 下無效怎么處理？? 54.如果需要手動寫動畫，你認(rèn)為最小時間間隔是多久，為什么？（阿里）?55.如何讓去除 inline-block 元素間間距？? 56.overflow:scroll時不能平滑滾動的問題怎么處理？? 57.有一個高度自適應(yīng)的div,里面有兩個 div, 一個高度100Px，希望另一個填滿剩下的高度。? 58.png、jpg、gif這些圖片格式解釋一下，分別什么時候用。有沒有了解過 webp ? 59.瀏覽器如何判斷是否支持webp格式圖片?

7、60.什么是Cookie隔離？（或者說：請求資源的時候不要讓它帶cookie怎么做）? 61.style標(biāo)簽寫在 body后與body前有什么區(qū)別？?62.什么是 CSS預(yù)處理器/后處理器？?63.闡述一下 CSSSprites?64.使用rem布局的優(yōu)缺點？?65.幾種常見的 CSS布局?66.畫一條0.5px的線? 67.transition 和 animation 的區(qū)別?68.什么是首選最小寬度？?69.為什么 height:100x 會無效？屬性間的覆蓋規(guī)則? 70.min-width/max-width 和 min-height/max-height?71.內(nèi)聯(lián)盒模型基本概念?72

8、.什么是幽靈空白節(jié)點？?73.什么是替換元素？?74.替換元素的計算規(guī)則？?75.content與替換元素的關(guān)系？?76.margin:auto 的填充規(guī)則？?77.margin 無效的情形?78.border 的特殊性？?79.什么是基線和 x-height?80.line-height 的特殊性？?81.vertical-align 的特殊性？?82.overflow 的特殊性？?83.無依賴絕對定位是什么？?84.absolute 與 overflow的關(guān)系？?85.clip 裁剪是什么？?86.relative 的特殊性？?87.什么是層疊上下文？?88.什么是層疊水平？?89.元素的

9、層疊順序？?90.層疊準(zhǔn)則？? 91.font-weight的特殊性？? 92.text-indent的特殊性？?93.letter-spacing與字符間距？?94.word-spacing與單詞間距？? 95.white-space 與換行和空格的控制？?96.隱藏元素的 background-image到底加不加載?97.如何實現(xiàn)單行/多行文本溢出的省略（）？?98.常見的元素隱藏方式？? 99.css實現(xiàn)上下固定中間自適應(yīng)布局？?100.CSS兩欄布局的實現(xiàn)？?101.CSS三欄布局的實現(xiàn)？?102.實現(xiàn)一個寬高自適應(yīng)的正方形?103.實現(xiàn)一個三角形2:1?104.一個自適應(yīng)矩形，水平

10、垂直居中，且寬高比為1 .介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？低版本 IE的盒子模型有什么不同的？相關(guān)知識點：(1)有兩種盒子模型：IE盒模型(border-box )、W3c標(biāo)準(zhǔn)盒模型(content-box )(2)盒模型：分為內(nèi)容( content )、填充(padding )、邊界(margin )、邊框(border ) 四個部分IE盒模型和 W3c標(biāo)準(zhǔn)盒模型的區(qū)別：(1) W3c標(biāo)準(zhǔn)盒模型：屬性 width , height 只包含內(nèi)容 content ,不包含border 和padding(2) IE 盒模型：屬性 width , height包含 content 、border 和

11、 padding ,指的是 content+padding+border 。在ie8+瀏覽器中使用哪個盒模型可以由box-sizing (CSS新增的屬性)控制，默認(rèn)值為content-box ,即標(biāo)準(zhǔn)盒模型；如果將box-sizing 設(shè)為border-box 則用的是IE盒模型。如果在 ie6 , 7, 8中DOCTYP聯(lián) 失會將盒子模型解釋為IE盒子模型。若在頁面中聲明了DOCTYPE類型，所有的瀏覽器都會把盒模型解釋為W3c盒模型?；卮穑汉心Ｐ投际怯伤膫€部分組成的，分別是 margin、border、padding 和content 。標(biāo)準(zhǔn)盒模型和IE盒模型的區(qū)別在于設(shè)置width和h

12、eight 時，所對應(yīng)的范圍不同。標(biāo)準(zhǔn)盒模型的width 和height 屬性的范圍只包含了 content ,而IE盒模型的 width 和height 屬性的范圍包含了border、padding和 content 。一般來說，我們可以通過修改元素的box-sizing屬性來改變元素的盒模型。詳細的資料可以參考：CSS盒模型詳解2 .CSS選擇符有哪些？(1) id 選擇器(#myid )(2)類選擇器(.myclassname )(3)標(biāo)簽選擇器(div,h1,p )(4)后代選擇器(hl p )(5)相鄰后代選擇器(子)選擇器( ul>li )(6)兄弟選擇器(lia )(7)相

13、鄰兄弟選擇器(li+a )(8)屬性選擇器(arel="externa門)(9)偽類選擇器(a:hover,li:nth-child)(10)偽元素選擇器(二before 、二after )(11)通配符選擇器(* )3 .:before 和:after中雙冒號和單冒號有什么區(qū)別？解釋一下這2個偽元素的作用。相關(guān)知識點：單冒號(：)用于CSS3偽類，雙冒號(：)用于CSS3偽元素。(偽元素由雙冒號和偽元素名 稱組成)雙冒號是在當(dāng)前規(guī)范中引入的，用于區(qū)分偽類和偽元素。不過瀏覽器需要同時支持舊的已經(jīng)存在的偽元素寫法，比如：first-line、 ：first-letter、 ：befor

14、e 、 ：after 等，而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號的寫法。想讓插入的內(nèi)容出現(xiàn)在其它內(nèi)容前，使用 二before ,否者，使用二after ；在代碼順序上，二after生成的內(nèi)容也比二before生成的內(nèi)容靠后。如果按堆棧視角，二after 生成的內(nèi)容會在二before生成的內(nèi)容之上?；卮穑涸赾ss3中使用單冒號來表示偽類，用雙冒號來表示偽元素。但是為了兼容已有的偽元素的寫法,在一些瀏覽器中也可以使用單冒號來表示偽元素。偽類一般匹配的是元素的一些特殊狀態(tài)，如hover、link 等，而偽元素一般匹配的特殊的位置，比如 after 、before 等。4 .偽類與偽元

15、素的區(qū)別css引入偽類和偽元素概念是為了格式化文檔樹以外的信息。也就是說，偽類和偽元素是用來修飾不在文檔樹中的部分，比如，一句話中的第一個字母，或者是列表中的第一個元素。偽類用于當(dāng)已有的元素處于某個狀態(tài)時，為其添加對應(yīng)的樣式， 這個狀態(tài)是根據(jù)用戶行為而動態(tài)變化的。比如說，當(dāng)用戶懸停在指定的元素時，我們可以通過：hover 來描述這個元素的狀態(tài)。偽元素用于創(chuàng)建一些不在文檔樹中的元素，并為其添加樣式。它們允許我們?yōu)樵氐哪承┎糠衷O(shè)置樣式。比如說，我們可以通過二before來在一個元素前增加一些文本，并為這些文本添加樣式。雖然用戶可以看到這些文本，但 是這些文本實際上不在文檔樹中。有時你會發(fā)現(xiàn)偽元素

16、使用了兩個冒號（二）而不是一個冒號（：）。這是CSS3的一部分，并嘗試區(qū)分偽類和偽元素。大多數(shù)瀏覽器都支持這兩個值。按照規(guī)則應(yīng)該使用（：）而不是（：），從而區(qū)分偽類和偽元素。但是，由于在舊版本的W3c規(guī)范并未對此進行特別區(qū)分，因此目前絕大多數(shù)的瀏覽器都支持使用這兩種方式表示偽元素。詳細資料可以參考：總結(jié)偽類與偽元素5 .CSS中哪些屬性可以繼承？相關(guān)資料：每個CSS屬性定義的概述都指出了這個屬性是默認(rèn)繼承的，還是默認(rèn)不繼承的。這決定了當(dāng)你 沒有為元素的屬性指定值時該如何計算值。當(dāng)元素的一個繼承屬性沒有指定值時，則取父元素的同屬性的計算值。只有文檔根元素取該屬性的概述中給定的初始值（這里的意思應(yīng)

17、該是在該屬性本身的定義中的默認(rèn)值）。當(dāng)元素的一個非繼承屬性(在Mozillacode里有時稱之為resetproperty )沒有指定值時，則取屬性的初始值initialvalue(該值在該屬性的概述里被指定)。有繼承性的屬性：(1)字體系列屬性font >font-family 、font-weight 、font-size 、font-style >font-variant 、font-stretch 、 font-size-adjust(2)文本系列屬性text-indent 、text-align 、text-shadow 、line-height 、word-spacin

18、g > letter-spacing 、text-transform 、direction 、color(3)表格布局屬性caption-sideborder-collapseempty-cells(4)列表屬性list-style-type 、list-style-image 、list-style-position、list-style6 5 )光標(biāo)屬性cursor(6)元素可見性visibility(7)還有一些不常用的；speak , page ,設(shè)置嵌套引用的引號類型quotes等屬性注意：當(dāng)一個屬性不是繼承屬性時，可以使用inherit關(guān)鍵字指定一個屬性應(yīng)從父元素繼承它的值，

19、inherit關(guān)鍵字用于顯式地指定繼承性，可用于任何繼承性/非繼承性屬性?；卮穑好恳粋€屬性在定義中都給出了這個屬性是否具有繼承性，一個具有繼承性的屬性會在沒有指定值的時候，會使用父元素的同屬性的值來作為自己的值。一般具有繼承性的屬性有，字體相關(guān)的屬性，font-size 和font-weight 等。文本相關(guān)的屬性,color 和 text-align 等。表格的一些布局屬性、列表屬性如 list-style 等。還有光標(biāo)屬性 cursor 、元素可見性visibility 。當(dāng)一個屬性不是繼承屬性的時候，我們也可以通過將它的值設(shè)置為inherit來使它從父元素那獲取同名的屬性值來繼承。詳細的

20、資料可以參考：繼承屬性CSS有哪些屬性可以繼承？7 .CSS優(yōu)先級算法如何計算？相關(guān)知識點：CSS的優(yōu)先級是根據(jù)樣式聲明的特殊性值來判斷的。選擇器的特殊性值分為四個等級，如下：(1)標(biāo)簽內(nèi)選擇符x,0,0,0(2) ID 選擇符 0,x,0,0(3) class選擇符/屬性選擇符/偽類選擇符0,0,x,0(4)元素和偽元素選擇符0,0,0,x計算方法:(1)每個等級的初始值為0(2)每個等級的疊加為選擇器出現(xiàn)的次數(shù)相加(3)不可進位，比如 0,99,99,99(4)依次表示為：0,0,0,0(5)每個等級計數(shù)之間沒關(guān)聯(lián)(6)等級判斷從左向右，如果某一位數(shù)值相同，則判斷下一位數(shù)值(7)如果兩個優(yōu)

21、先級相同，則最后出現(xiàn)的優(yōu)先級高，important 也適用(8)通配符選擇器的特殊性值為：0,0,0,0(9)繼承樣式優(yōu)先級最低，通配符樣式優(yōu)先級高于繼承樣式(10) important (權(quán)重)，它沒有特殊性值，但它的優(yōu)先級是最高的，為了方便記憶，可以認(rèn)為它的特殊性值為1,0,0,0,0 o計算實例：(1) #demoacolor:orange;/*特殊性值：0,1,0,1*/(2) div#demoacolor:red;/*特殊性值：0,1,0,2*/注意：(1)樣式應(yīng)用時，css會先查看規(guī)則的權(quán)重(important ),加了權(quán)重的優(yōu)先級最高，當(dāng)權(quán)重 相同的時候，會比較規(guī)則的特殊性。(2

22、)特殊性值越大的聲明優(yōu)先級越高。(3)相同特殊性值的聲明，根據(jù)樣式引入的順序，后聲明的規(guī)則優(yōu)先級高(距離元素出現(xiàn)最近的)(4) 部分瀏覽器由于字節(jié)溢出問題出現(xiàn)的進位表現(xiàn)不做考慮回答：判斷優(yōu)先級時，首先我們會判斷一條屬性聲明是否有權(quán)重，也就是是否在聲明后面加上了!important。一條聲明如果加上了權(quán)重，那么它的優(yōu)先級就是最高的，前提是它之后不再出現(xiàn)相同權(quán)重的聲明。如果權(quán)重相同，我們則需要去比較匹配規(guī)則的特殊性。一條匹配規(guī)則一般由多個選擇器組成，一條規(guī)則的特殊性由組成它的選擇器的特殊性累加而成。選擇器的特殊性可以分為四個等級，第一個等級是行內(nèi)樣式，為 1000,第二個等級是id選擇器，為010

23、0,第三個等級是類選擇器、偽類選擇器和屬性選擇器，為0010,第四個等級是元素選擇器和偽元素選擇器，為 0001 o規(guī)則中每出現(xiàn)一個選擇器，就將它的特殊 性進行疊加，這個疊加只限于對應(yīng)的等級的疊加，不會產(chǎn)生進位。選擇器特殊性值的比較是從左向右排序的，也就是說以1開頭的特殊性值比所有以0開頭的特殊性值要大。比如說特殊性值為 1000的的規(guī)則優(yōu)先級就要比特殊性值為0999的規(guī)則高。如果兩個規(guī)則的特殊性值相等的時候，那么就會根據(jù)它們引入的順序，后出現(xiàn)的規(guī)則的優(yōu)先級最高。對于組合聲明的特殊性值計算可以參考：CSS優(yōu)先級計算及應(yīng)用CSS優(yōu)先級計算規(guī)則 有趣：256個class選擇器可以干掉1個id選擇器

24、7 .關(guān)于偽類 LVHA的解釋？a標(biāo)簽有四種狀態(tài)：鏈接訪問前、鏈接訪問后、鼠標(biāo)滑過、激活，分別對應(yīng)四種偽類:link 、：visited、：hover 、：active ；當(dāng)鏈接未訪問過時:(1)當(dāng)鼠標(biāo)滑過a鏈接時，滿足:link 和:hover兩種狀態(tài)，要改變 a標(biāo)簽的顏色，就必須將:hover 偽類在:link 偽類后面聲明；(2)當(dāng)鼠標(biāo)點擊激活 a鏈接時，同時滿足：link 、：hover 、：active三種狀態(tài)，要顯示 a標(biāo)簽激活時的樣式(：active ),必須將：active 聲明放到:link 和:hover 之后。因此得出 LVHA這個順序。當(dāng)鏈接訪問過時，情況基本同上，只不

25、過需要將：link換成：visited這個順序能不能變？可以，但也只有：link 和:visited可以交換位置，因為一個鏈接要么訪問過要么沒訪問過，不可能同時滿足，也就不存在覆蓋的問題。8 .CSS3新增偽類有那些？(1) elem:nth-child(n)選中父元素下的第 n個子元素，并且這個子元素的標(biāo)簽名為elem可以接受具體的數(shù)值，也可以接受函數(shù)。(2) elem:nth-last-child(n)作用同上，不過是從后開始查找。(3) elem:last-child選中最后一個子元素(4) elem:only-child如果elem是父元素下唯一的子元素，則選中之(5) elem:nt

26、h-of-type(n)選中父元素下第 n個elem類型元素，n可以接受具體的數(shù)值，也可以接受函數(shù)。(6) elem:first-of-type選中父元素下第一個elem類型元素(7) elem:last-of-type選中父元素下最后一個elem類型元素。(8) elem:only-of-type如果父元素下的子元素只有一個elem 類型元素，則選中該元素(9) elem:empty 選中不包含子元素和內(nèi)容的elem類型元素。(10) elem:target選擇當(dāng)前7S動的elem元素(11 ) :not(elem)選擇非 elem 元素的每個元素。(12) :enabled控制表單控件的禁

27、用狀態(tài)。(13) disabled控制表單控件的禁用狀態(tài)。(14):checked單選框或復(fù)選框被選中。詳細的資料可以參考：CSS3新特性總結(jié)(偽類)淺談 CSS偽類和偽元素及CSS3新增偽類9 .如何居中 div ?- 水平居中：給 div設(shè)置一個寬度，然后添加 margin:0auto 屬性div width : 200 px;margin : 0auto;- 水平居中，利用 text-align:center 實現(xiàn).container background : rgba (0, 0, 0, 0.5 );text-align : center;font-size : 0;.box disp

28、lay : inline-block;width : 500 px;height : 400 px;background-color : pink;- 讓絕對定位的 div居中div position : absolute;width : 300 px;height : 300 px;margin : auto;top : 0;left : 0;bottom : 0;right : 0;background-color : pink; /* 方便看效果 */- 水平垂直居中一/*確定容器的寬高寬500高300的層設(shè)置層的外邊距div*/ position :absolute; /*絕對定位-

29、/ width : 500 px; height : 300 px; top : 50%;left : 50%;margin :-150px00-250px;/* 外邊距為自身寬高的一半 */ background-color :pink; /*方便看效果*/- 水平垂直居中二/*未知容器的寬高，利用 'transform'屬性*/ div position : absolute; /*相對定位或絕對定位均可*/width : 500 px;height : 300 px;top : 50 %;left : 50%;transform : translate (-50 %, -

30、50 %);background-color : pink; /* 方便看效果 */- 水平垂直居中三/*利用flex布局實際使用時應(yīng)考慮兼容性*/.container display : flex;align-items : center; /* 垂直居中 */justify-content : center; /* 水平居中 */.containerdiv width : 100 px;height : 100 px;background-color : pink; /* 方便看效果 */屬性*/- 水平垂直居中四/* 利用 text-align:center 和 vertical-ali

31、gn:middle.container position : fixed;top : 0;right : 0;bottom : 0;left : 0;background : rgba (0, 0, 0, 0.5 );text-align : center;font-size : 0;white-space : nowrap;overflow : auto;.container 二 after content :""display : inline-block;height : 100%;vertical-align : middle;.box display : inli

32、ne-block;width : 500 px;height : 400 px;background-color : pink;white-space : normal;vertical-align : middle;回答：一般常見的幾種居中的方法有：對于寬高固定的元素(1)我們可以利用 margin:0auto來實現(xiàn)元素的水平居中。(2)利用絕對定位，設(shè)置四個方向的值都為0,并將margin設(shè)置為auto ,由于寬高固定，因此對應(yīng)方向?qū)崿F(xiàn)平分，可以實現(xiàn)水平和垂直方向上的居中。(3)利用絕對定位，先將元素的左上角通過top:50%和left:50%定位到頁面的中心，然后再通過margin負值來

33、調(diào)整元素的中心點到頁面的中心。(4)利用絕對定位，先將元素的左上角通過top:50%和left:50% 定位到頁面的中心，然后再通過translate 來調(diào)整元素的中心點到頁面的中心。(5)使用 flex 布局，通過 align-items:center 和 justify-content:center設(shè)置容器的垂直和水平方向上為居中對齊，然后它的子元素也可以實現(xiàn)垂直和水平的居中。對于寬高不定的元素，上面的后面兩種方法，可以實現(xiàn)元素的垂直和水平的居中。10 .display有哪些值？說明他們的作用。block塊類型。默認(rèn)寬度為父元素寬度，可設(shè)置寬高，換行顯示。none元素不顯示，并從文檔流中移

34、除。inline行內(nèi)元素類型。默認(rèn)寬度為內(nèi)容寬度，不可設(shè)置寬高，同行顯示。inline-block默認(rèn)寬度為內(nèi)容寬度，可以設(shè)置寬高，同行顯示。list-item像塊類型元素一樣顯示，并添加樣式列表標(biāo)記。table此元素會作為塊級表格來顯示。inherit規(guī)定應(yīng)該從父元素繼承 display屬性的值。詳細資料可以參考：CSSdisplay屬性11 .position 的值 relative 和 absolute定位原點是？相關(guān)知識點：absolute生成絕對定位的元素，相對于值不為static的第一個父元素的paddingbox 進行定位，也可以理解為離自己這一級元素最近的一級position

35、設(shè)置為absolute 或者relative 的父元素的 paddingbox的左上角為原點的。fixed (老IE不支持)生成絕對定位的元素，相對于瀏覽器窗口進行定位。relative生成相對定位的元素，相對于其元素本身所在正常位置進行定位。static默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中(忽略 top,bottom,left,right,z-index聲明)。inherit規(guī)定從父元素繼承position 屬性的值。回答：relative定位的元素，是相對于元素本身的正常位置來進行定位的。absolute定位的元素，是相對于它的第一個position 值不為static 的祖先元素的pa

36、ddingbox 來進行定位的。這句話我們可以這樣來理解，我們首先需要找到絕對定位元素的一個position的值不為static 的祖先元素，然后相對于這個祖先元素的paddingbox來定位，也就是說在計算定位距離的時候，padding 的值也要算進去。12 .CSS3有哪些新特性？(根據(jù)項目回答)新增各種CSS選擇器(:not(.input) :所有class 不是"input ”的節(jié)點)圓角(border-radius:8px )多歹1J布局(multi-columnlayout )陰影和反射(ShadowReflect)文字特效(text-shadow )文字渲染(Text-

37、decoration)線性漸變(gradient )旋轉(zhuǎn)t transform )縮放，定位，傾斜，動畫，多背景例如：transform:scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg)Animation13 .請解釋一下 CSS3的Flexbox (彈性盒布局模型)，以及適用場景？相關(guān)知識點：Flex是FlexibleBox 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。行內(nèi)元素也可以使用Flex布局。注意，設(shè)為 Flex布局以后，子元素的float 、clear和v

38、ertical-align屬性將失效。采用Flex布局的元素，稱為 Flex容器(flexcontainer ),簡稱"容器"。它的所有子元素自 動成為容器成員，稱為Flex項目(flexitem ),簡稱"項目"。容器默認(rèn)存在兩根軸：水平的主軸( mainaxis )和垂直的交叉軸(crossaxis ),項目默認(rèn)沿 主軸排列。以下6個屬性設(shè)置在容器上。flex-direction屬性決定主軸的方向(即項目的排列方向)。flex-wrap 屬性定義，如果一條軸線排不下，如何換行。flex-flow 屬性是flex-direction 屬性和flex-w

39、rap屬性的簡寫形式，默認(rèn)值為rownowrapjustify-content屬性定義了項目在主軸上的對齊方式。align-items屬性定義項目在交叉軸上如何對齊。align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。以下6個屬性設(shè)置在項目上。order屬性定義項目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為 0。flex-grow屬性定義項目的放大比例，默認(rèn)為 0,即如果存在剩余空間，也不放大。flex-shrink屬性定義了項目的縮小比例，默認(rèn)為1,即如果空間不足，該項目將縮小。flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間。瀏覽

40、器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認(rèn)值為auto ,即項目的本來大小。flex 屬性是 flex-grow , flex-shrink 和 flex-basis 的簡寫，默認(rèn)值為 01auto。align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋 align-items 屬性默認(rèn)值為auto ,表示繼承父元素的align-items 屬性，如果沒有父元素，則等同于stretch 。回答：flex 布局是CSS3新增的一種布局方式，我們可以通過將一個元素的display屬性值設(shè)置為flex 從而使它成為一個 flex容器，它的所有子元素都會成為它的項目。一個容器默

41、認(rèn)有兩條軸，一個是水平的主軸，一個是與主軸垂直的交叉軸。我們可以使用flex-direction來指定主軸的方向。align-items 來指定我們可以使用justify-content來指定元素在主軸上的排列方式，使用元素在交叉軸上的排列方式。還可以使用flex-wrap來規(guī)定當(dāng)一行排列不下時的換行方式。對于容器中的項目，我們可以使用order屬性來指定項目的排列順序，還可以使用 flex-grow來指定當(dāng)排列空間有剩余的時候，項目的放大比例。還可以使用flex-shrink來指定當(dāng)排列空間不足時，項目的縮小比例。詳細資料可以參考：Flex布局教程：語法篇Flex布局教程：實例篇14 .用純

42、CSS創(chuàng)建一個三角形的原理是什么？采用的是相鄰邊框連接處的均分原理。將元素的寬高設(shè)為0,只設(shè)置b or der,把任意三條邊隱藏掉（顏色設(shè)為transparent ）,剩下的就是一個三角形。# demo width : 0;height : 0;border-width: 20px;border-style:solid;border-color:transparenttransparentredtransparent;15 .一個滿屏品字布局如何設(shè)計？簡單的方式：上面的div寬100%,下面的兩個div分別寬50%,然后用float 或者inline使其不換行即可16 .CSS多列等高如何實現(xiàn)

43、？(1)利用padding-bottom|margin-bottom正負值相抵，不會影響頁面布局的特點。設(shè)置父容器設(shè)置超出隱藏(oveflow:hidden ),這樣父容器的高度就還是它里面的列沒有設(shè)定padding-bottom時的高度，當(dāng)它里面的任一列高度增加了，則父容器的高度被撐到里面最高那列的高度，其他比這列矮的列會用它們的padding-bottom 補償這部分高度差。(2)利用table-cell所有單元格高度都相等的特性，來實現(xiàn)多列等高。(3)利用flex 布局中項目align-items屬性默認(rèn)為stretch ,如果項目未設(shè)置高度或設(shè)為auto ,將占滿整個容器的高度的特性，

44、來實現(xiàn)多列等高。詳細資料可以參考：前端應(yīng)該掌握的 CSS實現(xiàn)多列等高布局CSS:多列等高布局17 .經(jīng)常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧？(1) png24位的圖片在iE6瀏覽器上出現(xiàn)背景解決方案：做成 PNG8,也可以引用一段腳本處理。(2)瀏覽器默認(rèn)的 margin和padding 不同解決方案：加一個全局的*margin:0;padding:0; 來統(tǒng)一。(3) IE6雙邊距bug :在IE6下，如果對元素設(shè)置了浮動，同時又設(shè)置了 margin-left 或margin-right , margin 值會加倍。#boxfloat:left;width:

45、10px;margin:00010px;這種情況之下IE會產(chǎn)生20px的距離將其轉(zhuǎn)化為行內(nèi)屬性。(一這個解決方案：在float的標(biāo)簽樣式控制中加入_display:inline;符號只有ie6會識別)(4)漸進識別的方式，從總體中逐漸排除局部。首先，巧妙的使用"9"這一標(biāo)記，將IE游覽器從所有情況中分離出來。接著，再次使用"+"將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨立識別 .bb background-color:#f1ee18;/*所有識別 */.background-color:#00defn9;/*IE6、 7、 8 識另1J */+b

46、ackground-color:#a200ff;/*IE6、 7 識另1J */_background-color:#1e0bd1;/*IE6識另1J */(5) IE下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性；Firefox 下，只能使用 getAttribute()獲取自定義屬性解決方法：統(tǒng)一通過getAttribute()獲取自定義屬性。(6) IE下，event 對象有x、y屬性，但是沒有 pageX、pageY屬性；Firefox 下，event對 象有pageX、pageY屬性，但是沒有 x、y屬性。解決方法：(條件注釋)缺

47、點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。(7) Chrome中文界面下默認(rèn)會將小于12px的文本強制按照 12px顯示解決方法：解決。但是，在 chrome注意-webkit-transform:scale(0.75);1 .可通過力口入 CSS 屬性-webkit-text-size-adjust:none;更新到27版本之后就不可以用了。2 .還可以使用-webkit-transform:scale(0.5);收縮的是整個span的大小，這時候，必須要將span轉(zhuǎn)換成塊元素，可以使用 display :block/inline-block/；(8)超鏈接訪問過后 hover樣式就

48、不出現(xiàn)了，被點擊訪問過的超鏈接樣式不再具有hover和active 了解決方法：改變 CSS屬性的排列順序 L-V-H-A(9)怪異模式問題：漏寫 DTD聲明，F(xiàn)irefox仍然會按照標(biāo)準(zhǔn)模式來解析網(wǎng)頁，但在 IE中會觸發(fā)怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養(yǎng)成書寫DTD聲明的好習(xí)慣。18.li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？瀏覽器會把inline 元素間的空白字符(空格、換行、Tab等)渲染成一個空格。而為了美觀。我們通常是一個li放在一行，這導(dǎo)致li換行后產(chǎn)生換行字符，它變成一個空格，占用了一個字符的寬度。解決辦法：(1)為li設(shè)置float:

49、left o不足：有些容器是不能設(shè)置浮動，如左右切換的焦點圖等。(2)將所有l(wèi)i寫在同一行。不足：代碼不美觀。(3)將ul內(nèi)的字符尺寸直接設(shè)為0,即font-size:0 。不足：ul中的其他字符尺寸也被設(shè)為0,需要額外重新設(shè)定其他字符尺寸，且在 Safari瀏覽器依然會出現(xiàn)空白間隔。(4)消除ul的字符間隔letter-spacing:-8px ,不足：這也設(shè)置了li內(nèi)的字符間隔，因此需要將li內(nèi)的字符間隔設(shè)為默認(rèn) letter-spacing:normal 。詳細資料可以參考：li與li之間有看不見的空白間隔是什么原因引起的？19.為什么要初始化 CSS樣式?CSS初始化往往-因為瀏覽器的

50、兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對 會出現(xiàn)瀏覽器之間的頁面顯示差異。-當(dāng)然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。最簡單的初始化方法：*padding:0;margin:0;(強烈不建議)淘寶的樣式初始化代碼：body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset, legend,button,input,textarea,th,tdmargin:0;padding:0;body,button,input,select,textare

51、afont:12px/1.5tahoma,arial,5b8b4f53;h1,h2,h3,h4,h5,h6font-size:100%;address,cite,dfn,em,varfont-style:normal;code,kbd,pre,sampfont-family:couriernew,courier,monospace;smallfont-size:12px;ul,ollist-style:none;atext-decoration:none;a:hovertext-decoration:underline;supvertical-align:text-top;subvertica

52、l-align:text-bottom;legendcolor:#000;fieldset,imgborder:0;button,input,select,textareafont-size:100%;tableborder-collapse:collapse;border-spacing:0;20 .什么是包含塊，對于包含塊的理解？包含塊(containingblock )就是元素用來計算和定位的一個框。(1)根元素(很多場景下可以看成是<html> )被稱為 初始包含塊”，其尺寸等同于瀏覽器可視窗口的大小。(2)對于其他元素，如果該元素的position 是relative 或

53、者static ,則 包含塊"由其最近的塊容器祖先盒的contentbox邊界形成。(3)如果元素position:fixed ,則 包含塊"是 初始包含塊”。(4)如果元素 position:absolute ，則 包含塊”由最近的 position不為static 的祖先元素建立，具體方式如下：如果該祖先元素是純inline 元素，則規(guī)則略復(fù)雜：?假設(shè)給內(nèi)聯(lián)元素的前后各生成一個寬度為0的內(nèi)聯(lián)盒子(inlinebox ),則這兩個內(nèi)聯(lián)盒子的paddingbox夕卜面的包圍盒就是內(nèi)聯(lián)元素的包含塊”；?如果該內(nèi)聯(lián)元素被跨行分割了，那么包含塊”是未定義的，也就是CSS2.1規(guī)范

54、并沒有明確定義，瀏覽器自行發(fā)揮否則， 包含塊”由該祖先的paddingbox 邊界形成。如果沒有符合條件的祖先元素，則 包含塊”是 初始包含塊21 .CSS里的visibility屬性有個 collapse屬性值是干嘛用的？在不同瀏覽器下以后什么區(qū)別？11)對于一般的元素，它的表現(xiàn)跟visibility : hidden;是一樣的。元素是不可見的，但此時仍占用頁面空間。(2)但例外的是，如果這個元素是table 相關(guān)的元素，例如 table 行，tablegroup , table歹U, tablecolumngroup,它的表現(xiàn)卻跟display:none一樣，也就是說，它們占用的空間也會釋放。在不同瀏覽器下的區(qū)別:在谷歌瀏覽器里，使用 collapse 值和使用hidden值沒有什么區(qū)別。在火狐瀏覽器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table 的行會消失，它的下面一行會補充它的位置。詳細資料可以參考：CSS里的visibility 屬性有個鮮為人知的屬性值：collapse »22 .width:auto 和 width:100% 的區(qū)別一般而言width:100% 會使元素box的寬度等于父元素的contentbox的寬度。width:auto會使元素撐滿整個父元素，marg