（以下是自己在網(wǎng)絡(luò)上總結(jié)的css基礎(chǔ)面試題,歡迎補(bǔ)充和改正）
1.class和id有什么不同？
id類名唯一，在頁面中只能出現(xiàn)一次，更多地被用來實(shí)現(xiàn)宏偉布局和設(shè)計(jì)包含塊，或包含框的樣式。
id是先確定頁面的結(jié)構(gòu)和內(nèi)容，然后再為它定義樣式
class類名不唯一，被多次調(diào)用，先確定樣式在確定結(jié)構(gòu)和內(nèi)容
2.CSS resetting和CSS normalizing 有什么不同？你傾向于使用哪種方案？
normalize相對(duì)平和，注重通用方案，重置掉該重置的樣式，保留有用的 user agent 樣式，同時(shí)進(jìn)行一些 bug 的修復(fù)，他是模塊化的，有詳細(xì)的文檔
Reset 相對(duì)暴力，不管你有沒有用，統(tǒng)統(tǒng)重置成一樣的效果，且影響的范圍很大，講求跨瀏覽器的一致性。
幾乎所有的元素施加默認(rèn)樣式
3.描述一下float，并解釋一下它的作用方式？
float屬性定義了元素是否浮動(dòng)及在哪個(gè)方向浮動(dòng),在CSS中任何元素都可以浮動(dòng)，且浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。并且盒子的寬度不在伸展，而是根據(jù)盒子里面的內(nèi)容的寬度來確定。 浮動(dòng)屬性會(huì)使得浮動(dòng)的元素脫離文檔流，所以文檔的普通流中的塊框會(huì)表現(xiàn)的像浮動(dòng)框不存在一樣
4.解釋一下z-index和疊加上下文是如何形成的？
負(fù)邊距 margin為負(fù)值時(shí)元素會(huì)依參考線向外偏移，沒有計(jì)算好會(huì)折疊，position會(huì)發(fā)生折疊，且有z-index屬性
同級(jí)元素的z-index值如果相同，則堆疊順序由元素在文檔中的先后位置決定，后出現(xiàn)的會(huì)在上面，
z-index值只決定同一父元素中的同級(jí)子元素的堆疊順序。父元素的z-index值（如果有）為子元素定義了堆疊順序（css版堆疊“拼爹”）
5.解釋一下BFC（block formatting context）和工作原理？
BFC（Block Formatting Context）直譯為“塊級(jí)格式化范圍”
內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。
Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
BFC的區(qū)域不會(huì)與float box重疊。
BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。
計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算
用處：解決子元素浮動(dòng)，父元素高度塌陷。
兩列自適應(yīng)布局
合并外邊距
6.clear屬性有哪些？它有哪些適用場景？
clear 屬性設(shè)置一個(gè)元素的側(cè)面是否允許其他的浮動(dòng)元素。
left ：在左側(cè)不允許浮動(dòng)元素
right ：在右側(cè)不允許浮動(dòng)元素
both ：在左右兩側(cè)均不允許浮 動(dòng)元素
none：默認(rèn)。允許浮動(dòng)元素出現(xiàn)在兩側(cè)。
當(dāng)一個(gè)容器中的元素全部浮動(dòng)之后，由于浮動(dòng)會(huì)讓元素脫離普通文檔流，所以對(duì)于外面的這個(gè)容器來講它就沒有內(nèi)容將它撐開，背景設(shè)置無法顯示，margin設(shè)置無法顯示。
7.CSS雪碧圖是什么？如何實(shí)現(xiàn)？
譯為“CSS圖像拼合”或“CSS貼圖定位”, CSS Sprites就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。
優(yōu)點(diǎn)：當(dāng)頁面加載時(shí)，不是加載每個(gè)單獨(dú)圖片，而是一次加載整個(gè)組合圖片。這是一個(gè)了不起的改進(jìn)，它大大減少了HTTP請(qǐng)求的次數(shù)，減輕服務(wù)器壓力，同時(shí)縮短了懸停加載圖片所需要的時(shí)間延遲，使效果更流暢，不會(huì)停頓。
缺點(diǎn)：做圖像拼合的時(shí)候很麻煩。
8.你最喜歡的圖片替換技術(shù)是什么？你會(huì)在什么時(shí)候使用？
設(shè)計(jì)師能夠用一張背景圖像替代某元素中的原始文字，以期顯示出更美觀的字體意義：而圖像替換技術(shù)則保留了被替換元素中的原有文本，因此無論對(duì)何種客戶而言，理解頁面內(nèi)容都不成問題。主要是考慮SEO，而非視覺上的效果。
9.如何處理特定瀏覽器的樣式問題？
CSShack（利用了這些瀏覽器的漏洞價(jià)格，專門用這些漏洞來解決兼容性問題）:條件hack、屬性級(jí)hack（_color:IE6；color:IE7；color:#090\9:IE9）、選擇符級(jí)hack3 （html是IE6；*+html是IE7）
10.如何兼容某種功能受限的瀏覽器？
11.從視覺上將內(nèi)容隱藏有哪些方式？（內(nèi)容對(duì)屏幕閱讀器可見）
display:none可以讓網(wǎng)頁中所有內(nèi)容不顯示
visibility:hidden 被隱藏掉的內(nèi)容仍舊占據(jù)空間
overflow:hidden這種方式可以隱藏掉固定區(qū)域外的內(nèi)容
12.有沒有使用過grid系統(tǒng)？如果用過，你喜歡哪個(gè)？
是CSS為布局新增的一個(gè)模塊。網(wǎng)格布局特性主要是針對(duì)于Web應(yīng)用程序的開發(fā)者?？梢杂眠@個(gè)模塊實(shí)現(xiàn)許多不同的布局。網(wǎng)絡(luò)布局可以將應(yīng)用程序分割成不同的空間，或者定義他們的大小、位置以及層級(jí)。
13.是否使用過媒體查詢或?qū)崿F(xiàn)過特定移動(dòng)端特定布局？
媒體查詢，設(shè)置頁面樣式隨屏幕寬度的變化而變化（IE8和IE8之前都不支持）
```
媒體查詢 media queries：
@media screen:屏幕設(shè)備(手機(jī)、IPAD之類的)
@media print:打印機(jī)
@media projector:投影儀
@media screen and (min-width: 480px) and (max-width: 760px){
body{
1.CSS3 - Media Query（最簡單的方式）
2.借助原生的JS（成本高，不推薦）
3.第三方開源框架 bootstrap（可以很好的瀏覽器響應(yīng)式布局的設(shè)計(jì)）
```
媒體查詢 media queries：
@media screen:屏幕設(shè)備(手機(jī)、IPAD之類的)
@media print:打印機(jī)
@media projector:投影儀
@media screen and (min-width: 480px) and (max-width: 760px){
body{
1.CSS3 - Media Query（最簡單的方式）
2.借助原生的JS（成本高，不推薦）
3.第三方開源框架 bootstrap（可以很好的瀏覽器響應(yīng)式布局的設(shè)計(jì)）
em相對(duì)與父元素單位大小的；rem相對(duì)與html根元素單位大小的；
14.熟悉怎么為SVG設(shè)置樣式嗎？
矢量圖形
15.如何優(yōu)化網(wǎng)頁進(jìn)行打?。?/a>
@media print:打印機(jī)
16.為寫出高性能的CSS，需要注意哪些陷阱？
17.CSS預(yù)處理器的優(yōu)缺點(diǎn)是什么？描述你使用過的CSS預(yù)處理器中你喜歡的和不喜歡的地方？
預(yù)處理器例如：LESS、Sass、Stylus，用來預(yù)編譯Sass或less，
缺點(diǎn)：簡單來說CSS預(yù)處理器語言較CSS玩法變得更高級(jí)了，但同時(shí)降低了自己對(duì)最終代碼的控制力。提高了門檻，上手門檻，維護(hù)門檻，再來是團(tuán)隊(duì)整體水平和規(guī)范的門檻。這也造成了初學(xué)學(xué)習(xí)成本的昂貴。
優(yōu)點(diǎn)：增強(qiáng)了css代碼的復(fù)用性， 還有層級(jí)、mixin、變量、循環(huán)、函數(shù)等，具有很方便的UI組件模塊化開發(fā)能力，極大的提高工作效率
18.如何實(shí)現(xiàn)使用了非標(biāo)準(zhǔn)字體的網(wǎng)頁設(shè)計(jì)稿？
圖片代替， fonts在線字庫， 網(wǎng)絡(luò)字體fonticon使用字體圖標(biāo)
19.說明瀏覽器是如何確定和CSS選擇器相匹配的元素的？
從后往前判斷。符合就繼續(xù)上一步，不符合就刪除繼續(xù)找
20.描述一下偽元素及它的用途？
1、利用 after 清除浮動(dòng)
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
2、偽元素與 css sprites 雪碧圖
3、作為列表序號(hào)
4.超鏈接特效
5.劃線
21.說明一下盒模型，怎么告訴瀏覽器使用不同的盒模型進(jìn)行布局渲染？
標(biāo)準(zhǔn)盒模型與IE的怪異盒模型&彈性盒模型 IE怪異模式（無首行文檔類型時(shí)）
標(biāo)準(zhǔn)：width=content
IE怪異模式：width=border+padding+content
標(biāo)準(zhǔn)瀏覽器下模仿怪異盒模型
box-sizing：border-box;
彈性盒模型
box-flex是分配剩余空間，針對(duì)塊級(jí)元素有效
用聲明就是標(biāo)準(zhǔn)模式
22.*{box-sizing: border-box;}什么意思？有什么優(yōu)點(diǎn)？
相當(dāng)于以怪異模式解析，border和padding全會(huì)在你設(shè)置的寬度內(nèi)部。
比如手機(jī)端設(shè)置兩行并排的布局，寬度各為50%,如果不用這個(gè)屬性，設(shè)置border后右邊的div會(huì)下來錯(cuò)位，設(shè)置這個(gè)屬性，寬度還是50%而不是50%+*px,兩行可以并列顯示
23.列舉你所知道的display屬性值？
24.inline和inline-block有什么區(qū)別？
inline：元素不會(huì)獨(dú)占一行，多個(gè)相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排列不下，才會(huì)新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。
設(shè)置寬高無效，水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果； 但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會(huì)產(chǎn)生邊距效果。
inline-block：將對(duì)象呈現(xiàn)為inline對(duì)象，但是對(duì)象的內(nèi)容作為block對(duì)象呈現(xiàn)
既具有block的寬度高度特性又具有inline的同行特性。
25.relative，fixed，absolute以及static的元素有什么區(qū)別？
static 默認(rèn)
relative相對(duì)定位（相對(duì)于自己的初始位置），空間不釋放，未脫離原先的文檔流。
absolute絕對(duì)定位（相對(duì)于上一級(jí)已定位的父元素），空間釋放，脫離文檔流。
fixed 固定定位（相對(duì)于瀏覽器），IE6及之前不支持。
inherit 繼承
26.‘C’代表級(jí)聯(lián)。CSS最終規(guī)則是按什么優(yōu)先級(jí)確定的？（能不能舉一些例子）如何充分利用這些計(jì)算規(guī)則？
權(quán)重值：！important > 內(nèi)聯(lián) > id（100） > class（10） >標(biāo)簽（1）
css選擇器： id class >（子代） ’ ‘（后代），（分組） ：（偽類） [ ]（屬性）
27.使用過哪些CSS框架？你是如何改變/改進(jìn)它的？
Bootstrap兩種動(dòng)態(tài)css語言LESS和SASS，給css提供了變量，mixin，運(yùn)算符等功能，讓寫出模塊化的css框架成為可能
28.研究過CSS的新屬性 flex和grid嗎？
flex彈性布局flex | inline-flex
當(dāng)時(shí)設(shè)置flex布局之后，子元素的 float、clear、vertical-align 的屬性將會(huì)失效。
有下面六種屬性可以設(shè)置在容器上，它們分別是：
flex-direction ：決定主軸的方向(即項(xiàng)目的排列方向)
flex-wrap：決定容器內(nèi)項(xiàng)目是否可換行
flex-flow ：flex-direction 和 flex-wrap 的簡寫形式
justify-content：定義了項(xiàng)目在主軸的對(duì)齊方式。
align-items：定義了項(xiàng)目在交叉軸上的對(duì)齊方式
align-content：定義了多根軸線的對(duì)齊方式，如果項(xiàng)目只有一根軸線，那么該屬性將不起作用
grid—–見12題
29.響應(yīng)式設(shè)計(jì)和自適應(yīng)設(shè)計(jì)有什么區(qū)別？
自適應(yīng)是為了解決如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁
響應(yīng)式正是為了解決自適應(yīng)在小屏幕查看過于擁擠而衍生出來的概念。它可以自動(dòng)識(shí)別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計(jì)，布局和展示的內(nèi)容可能會(huì)有所變動(dòng)。
30.有沒有使用過retina圖像？如果使用過，在什么場景下使用的什么技術(shù)？
與幾倍圖有關(guān)
31.有沒有必要使用translate替代絕對(duì)定位，反之亦然？ 為什么？
position 是為頁面布局而生的。
transform是為動(dòng)畫而生的,不會(huì)引起瀏覽器的重繪和重排。
使用 position 時(shí)，最小的動(dòng)畫變化的單位是 1px而使用 transform 參與時(shí)，可以做到更?。▌?dòng)畫效果更加平滑）
