web前端面試之CSS不常用問題（碼動未來）

2.4.1、為什么要初始化CSS樣式刨啸。

因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異羽圃。

當然，初始化樣式會對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, td { margin:0; padding:0; }

body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }

h1, h2, h3, h4, h5, h6{ font-size:100%; }

address, cite, dfn, em, var { font-style:normal; }

code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

small{ font-size:12px; }

ul, ol { list-style:none; }

a { text-decoration:none; }

a:hover { text-decoration:underline; }

sup { vertical-align:text-top; }

sub{ vertical-align:text-bottom; }

legend { color:#000; }

fieldset, img { border:0; }

button, input, select, textarea { font-size:100%; }

table { border-collapse:collapse; border-spacing:0; }

2.4.2斩郎、absolute的containing block(容器塊)計算方式跟正常流有什么不同脑融？

無論屬于哪種，都要先找到其祖先元素中最近的position值不為 static 的元素缩宜，然后再判斷：

1肘迎、若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區(qū)域) 的最小矩形锻煌；

2妓布、否則,則由這個祖先元素的 padding box 構(gòu)成。

如果都找不到宋梧，則為initial containing block匣沼。

補充：

1. static(默認的)/relative：簡單說就是它的父元素的內(nèi)容框（即去掉padding的部分）

2. absolute:向上找最近的定位為absolute/relative的元素

3. fixed:它的containing block一律為根元素(html/body)，根元素也是initial containing block

2.4.3乃秀、CSS里的visibility屬性有個collapse屬性值是干嘛用的肛著？在不同瀏覽器下以后什么區(qū)別？

當一個元素的visibility屬性被設(shè)置成collapse值后跺讯，對于一般的元素枢贿，它的表現(xiàn)跟hidden是一樣的。但例外的是刀脏，如果這個元素是table相關(guān)的元素局荚，例如table行，table group，table列耀态，table column group轮傍，它的表現(xiàn)卻跟display: none一樣，也就是說首装，它們占用的空間也會釋放创夜。

在谷歌瀏覽器里，使用collapse值和使用hidden值沒有什么區(qū)別仙逻。

在火狐瀏覽器驰吓、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行會消失系奉，它的下面一行會補充它的位置檬贰。

2.4.4、經(jīng)常遇到的瀏覽器的兼容性有哪些缺亮？原因翁涤，解決方法是什么，常用hack的技巧 萌踱？

png24位的圖片在iE6瀏覽器上出現(xiàn)背景葵礼，解決方案是做成PNG8.

瀏覽器默認的margin和padding不同。解決方案是加一個全局的{margin:0;padding:0;}來統(tǒng)一虫蝶。

IE6雙邊距bug:塊屬性標簽float后章咧，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大能真。

浮動ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}這種情況之下IE會產(chǎn)生20px的距離赁严，解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個符號只有ie6會識別)

漸進識別的方式粉铐，從總體中逐漸排除局部疼约。

首先，巧妙的使用“\9”這一標記蝙泼，將IE游覽器從所有情況中分離出來程剥。接著，再次使用“+”將IE8和IE7汤踏、IE6分離開來织鲸，這樣IE8已經(jīng)獨立識別。

css

??????.bb{

background-color:#f1ee18;/*所有識別*/

.background-color:#00deff\9; /*IE6溪胶、7搂擦、8識別*/

+background-color:#a200ff;/*IE6、7識別*/

_background-color:#1e0bd1;/*IE6識別*/

??????}

IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性哗脖。解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性瀑踢。

IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;

Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性扳还。

解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。

Chrome中文界面下默認會將小于 12px 的文本強制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決橱夭。

超鏈接訪問過后hover樣式就不出現(xiàn)了 被點擊訪問過的超鏈接樣式不在具有hover和active了,解決方法是改變CSS屬性的排列順序:L-V-H-A : ?a:link {} a:visited {} a:hover {} a:active {}

2.4.5氨距、position跟display、margin collapse棘劣、overflow俏让、float這些特性相互疊加后會怎么樣？

這個題目應該能拆成幾個點來回答：

1呈础、'display'舆驶、'position' 和 'float' 的相互關(guān)系橱健；

1）而钞、display 屬性規(guī)定元素應該生成的框的類型。 block 象塊類型元素一樣顯示拘荡，none 缺省值臼节。象行內(nèi)元素類型一樣顯示， inline-block 象行內(nèi)元素一樣顯示珊皿，但其內(nèi)容象塊類型元素一樣顯示网缝，list-item 象塊類型元素一樣顯示，并添加樣式列表標記

2）蟋定、position 屬性規(guī)定元素的定位類型粉臊。 absolute表示生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位驶兜；fixed（老IE不支持）生成絕對定位的元素扼仲，相對于瀏覽器窗口進行定位；relative生成相對定位的元素抄淑，相對于其正常位置進行定位屠凶；static ?默認值。沒有定位肆资，元素出現(xiàn)在正常的流中

3）矗愧、Float也是是一種布局方式，它定義元素在哪個方向浮動郑原。在 CSS 中唉韭，任何元素都可以浮動。浮動元素會生成一個塊級框犯犁，而不論它本身是何種元素属愤。 在布局過程中也經(jīng)常會使用它來達到左右并排布局的效果

2、position跟display栖秕、overflow春塌、float下的margin collapse。

把它看作是一個類似優(yōu)先級的機制，"position:absolute"和 "position:fixed" 優(yōu)先級最高只壳，有它存在的時候俏拱，浮動不起作用，'display' 的值也需要調(diào)整吼句； 其次锅必，元素的 'float' 特性的值不是 "none" 的時候或者它是根元素的時候，調(diào)整 'display' 的值惕艳； 最后搞隐，非根元素，并且非浮動元素远搪，并且非絕對定位的元素劣纲，'display' 特性值同設(shè)置值。

2.4.6谁鳍、對BFC規(guī)范(塊級格式化上下文：block formatting context)的理解癞季？

（W3C CSS 2.1規(guī)范中的一個概念,它是一個獨立容器，決定了元素如何對其內(nèi)容進行定位,以及與其他元素的關(guān)系和相互作用倘潜。）一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型绷柒。

不同類型的Box,會參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box內(nèi)的元素會以不同的方式渲染,也就是說BFC內(nèi)部的元素和外部的元素不會互相影響。

2.4.7涮因、css定義的權(quán)重

以下是權(quán)重的規(guī)則：標簽的權(quán)重為1废睦，class的權(quán)重為10，id的權(quán)重為100养泡，以下例子是演示各種定義的權(quán)重值：

/*權(quán)重為1*/

div{

}

/*權(quán)重為10*/

.class1{

}

/*權(quán)重為100*/

#id1{

}

/*權(quán)重為100+1=101*/

#id1 div{

}

/*權(quán)重為10+1=11*/

.class1 div{

}

/*權(quán)重為10+10+1=21*/

.class1 .class2 div{

}

如果權(quán)重相同嗜湃，則最后定義的樣式會起作用，但是應該避免這種情況出現(xiàn)

2.4.8瓤荔、移動端的布局用過媒體查詢嗎

css的媒體查詢允許通過@media標簽為特定媒體的瀏覽器設(shè)定樣式净蚤，其中包含眾多篩選，功能強大输硝。 @media (min-width: 700px) { ... }

2.4.9今瀑、CSS優(yōu)化、提高性能的方法有哪些

加載性能：比如不要用import啊点把，壓縮啊等等橘荠，主要是從減少文件體積、減少阻塞加載郎逃、提高并發(fā)方面入手的哥童，任何 hint 都逃不出這幾個大方向。

渲染性能：渲染性能是CSS優(yōu)化最重要的關(guān)注對象褒翰。頁面渲染 junky 過多贮懈？看看是不是大量使用了 text-shadow匀泊？是不是開了字體抗鋸齒？CSS 動畫怎么實現(xiàn)的朵你？合理利用 GPU 加速了嗎各聘？什么你用了 Flexible Box Model？有沒有測試換個 layout 策略對 render performance 的影響抡医？這個方面搜索一下 CSS render performance 或者 CSS animation performance 也會有一堆一堆的資料可供參考躲因。

可維護性、健壯性：命名合理嗎忌傻？結(jié)構(gòu)層次設(shè)計是否足夠健壯大脉？對樣式進行抽象復用了嗎？優(yōu)雅的CSS不僅僅會影響后期的維護成本水孩，也會對加載性能等方面產(chǎn)生影響镰矿。這方面可以多找一些 OOCSS（不是說就要用 OOCSS，而是說多了解一下）等等不同 CSS Strategy 的信息荷愕，取長補短衡怀。

1、可重用性：一般來說安疗，一個項目的整體設(shè)計風格是一致的，頁面中肯定有幾個風格一致但有些許不同的模塊够委，如何在盡可能多地重用CSS代碼荐类，盡可能少地增加新代碼，這是CSS代碼中非常重要的一點茁帽。如果CSS代碼的重用性高玉罐，我們可能只需要寫一些不一樣的地方，對頁面性能和可維護性潘拨、提高開發(fā)效率都有很大的幫助吊输。

2、可擴展性：如果產(chǎn)品增加了某個功能铁追，我們應該保證新增加的CSS代碼不會影響到舊的CSS代碼和頁面季蚂，并且盡可能少地增加新代碼而重用舊代碼。

3琅束、可修改性：如果某個模塊產(chǎn)品經(jīng)理覺得要修改樣式扭屁，或者要刪掉它，如果沒有規(guī)劃好相應的CSS代碼涩禀，過了一段時間之后料滥，開發(fā)人員可能已經(jīng)不記得這段代碼作用了幾個地方，不敢修改或刪除它艾船，這樣下去CSS代碼也就越來越多葵腹，影響了頁面的性能高每，還造成了代碼的復雜度。

2.4.10践宴、瀏覽器是怎樣解析CSS選擇器的觉义？

瀏覽器先產(chǎn)生一個元素集合，這個集合往往由最后一個部分的索引產(chǎn)生（如果沒有索引就是所有元素的集合）浴井。然后向上匹配晒骇，如果不符合上一個部分，就把元素從集合中刪除磺浙，直到真?zhèn)€選擇器都匹配完洪囤，還在集合中的元素就匹配這個選擇器了。

2.4.11撕氧、介紹一下Sass和 Less 是什么瘤缩？它們有何區(qū)別？

Sass (Syntactically Awesome Stylesheets)是一種動態(tài)樣式語言伦泥，語法跟css一樣(但多了些功能)剥啤，比css好寫，而且更容易閱讀不脯。Sass語法類似與Haml府怯，屬于縮排語法（makeup），用意就是為了快速寫Html和Css防楷。

Less一種動態(tài)樣式語言. 將CSS賦予了動態(tài)語言的特性牺丙，如變量，繼承复局，運算冲簿， 函數(shù). LESS 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務(wù)端運行 (借助 Node.js)亿昏。

區(qū)別：

(1))Sass是基于Ruby的峦剔，是在服務(wù)端處理的，而Less是需要引入less.js來處理Less代碼輸出Css到瀏覽器角钩，也可以在開發(fā)環(huán)節(jié)使用Less吝沫，然后編譯成Css文件，直接放到項目中彤断，也有Less.app野舶、SimpleLess、CodeKit.app這樣的工具宰衙，也有在線編譯地址平道。

(2)變量符不一樣，less是@供炼，而Scss是$一屋，而且變量的作用域也不一樣窘疮，后面會講到。

(3)輸出設(shè)置冀墨，Less沒有輸出設(shè)置闸衫，Sass提供4中輸出選項：nested, compact, compressed 和 expanded。

(4)Sass支持條件語句诽嘉，可以使用if{}else{},for{}循環(huán)等等蔚出。而Less不支持。

2.4.12虫腋、如何修改chrome記住密碼后自動填充表單的黃色背景

可以對input:-webkit-autofill使用足夠大的純色內(nèi)陰影來覆蓋input輸入框的黃色背景

input:-webkit-autofill {

?????-webkit-box-shadow: 0 0 0px 1000px white inset;

}

2.4.13骄酗、怎么讓Chrome支持小于12px 的文字

可以使用到css3里的一個屬性：transform:scale()

屬性介紹可以戳這里：http://www.w3chtml.com/css3/properties/2d-transform/transform.html

這個屬性前給-webkit-谷歌前綴，那么就可以控制字體的大小

<style>

p{font-size:10px;-webkit-transform:scale(0.8);}

/*這里的數(shù)字0.8悦冀，是縮放比例趋翻，可以根據(jù)情況變化。*/

</style>

中夢測試10px</p>

2.4.14盒蟆、讓頁面里的字體變清晰踏烙，變細用CSS怎么做？（-webkit-font-smoothing: antialiased;）

CSS3里面加入了一個“-webkit-font-smoothing”屬性历等。這個屬性可以使頁面上的字體抗鋸齒,使用后字體看起來會更清晰舒服讨惩。加上之后就頓時感覺頁面小清晰了。

2.4.15募闲、png步脓、jpg、gif 這些圖片格式解釋一下浩螺，分別什么時候用。有沒有了解過webp仍侥？

png:意為可移植網(wǎng)絡(luò)圖形格式(Portable Network Graphic Format)

動畫它不支持動畫

無損耗性png是一種無損耗的圖像格式要出，這也意味著你可以對png圖片做任何操作也不會使 ?得圖像質(zhì)量產(chǎn)生損耗。這也使得png可以作為jpeg編輯的過渡格式

水平掃描像GIF一樣农渊，png也是水平掃描的患蹂，這樣意味著水平重復顏色比垂直重復顏色的圖片更小

間隔漸進顯示它支持間隔漸進顯示，但是會造成圖片大小變得更大

JPEG代表Joint Photograhic Experts Group（聯(lián)合圖像專家組）砸紊，這種格式經(jīng)常寫成JPG传于，JPG圖片的擴展名為jpg。

JPG最主要的優(yōu)點是能支持上百萬種顏色醉顽，從而可以用來表現(xiàn)照片沼溜。此外，由于JPG圖片使用更有效的有損壓縮算法游添，從而使文件長度更小系草，下載時間更短通熄。有損壓縮會放棄圖像中的某些細節(jié)，以減少文件長度找都。它的壓縮比相當高唇辨，使用專門的JPG壓縮工具其壓縮比可達180：1，而且圖像質(zhì)量從瀏覽角度來講質(zhì)量受損不會太大能耻，這樣就大大方便了網(wǎng)絡(luò)傳輸和磁盤交換文件赏枚。JPG較GIF更適合于照片，因為在照片中損失一些細節(jié)不像對藝術(shù)線條那么明顯晓猛。另外饿幅，JPG對照片的壓縮比例更大，而最后的質(zhì)量也更好鞍帝。

GIF意為Graphics Interchange format（圖形交換格式）诫睬，GIF圖片的擴展名是gif。現(xiàn)在所有的圖形瀏覽器都支持GIF格式帕涌，而且有的圖形瀏覽器只熟悉GIF格式摄凡。GIF是一種索引顏色格式，在顏色數(shù)很少的情況下蚓曼，產(chǎn)生的文件極小亲澡，它的優(yōu)點主要有：

1.GIF格式支持背景透明。GIF圖片假如背景色設(shè)置為透明纫版，它將與瀏覽器背景相結(jié)合床绪，生成非矩形的圖片。

2.GIF格式支持動畫其弊。在Flash動畫出現(xiàn)之前癞己，GIF動畫可以說是網(wǎng)頁中唯一的動畫形式。GIF格式可以將單幀的圖象組合起來梭伐，然后輪流播放每一幀而成為動畫痹雅。雖然并不是所有的圖形瀏覽器都支持GIF動畫，但是最新的圖形瀏覽器都已經(jīng)支持GIF動畫糊识。

3.GIF格式支持圖形漸進绩社。漸進是指圖片漸漸顯示在屏幕上，漸進圖片將比非漸進圖片更快地出現(xiàn)在屏幕上赂苗，可以讓訪問者更快地知道圖片的概貌愉耙。

4.GIF格式支持無損壓縮。無損壓縮是不損失圖片細節(jié)而壓縮圖片的有效方法拌滋，由于GIF格式采用無損壓縮朴沿，所以它更適合于線條、圖標和圖紙鸠真。

5.水平掃描 ??Gif是使用了一種叫作LZW的算法進行壓縮的悯仙，當壓縮gif的過程中龄毡，像素是由上到下水平壓縮的，這也意味著同等條件下锡垄，橫向的gif圖片比豎向的gif圖片更加小沦零。例如500*10的圖片比10*500的圖片更加小

GIF格式的缺點同樣相當明顯。索引顏色是歷史遺留的產(chǎn)物货岭，在DOS下的老游戲幾乎無一例外的采用索引顏色路操，這種格式本來早就應該淘汰了。但是由于帶寬的限制千贯，GIF從DOS時代紅到了Internet時代屯仗。GIF這種索引顏色格式最大的缺點就是它只有256種顏色，這對于照片質(zhì)量的圖片是顯然不夠的搔谴。

2.4.16魁袜、什么是Cookie隔離？（或者說：請求資源的時候不要讓它帶cookie怎么做）

如果靜態(tài)文件都放在主域名下敦第，那靜態(tài)文件請求的時候都帶有的cookie的數(shù)據(jù)提交給server的峰弹，非常浪費流量，所以不如隔離開芜果。

因為cookie有域的限制鞠呈，因此不能跨域提交請求，故使用非主要域名的時候右钾，請求頭中就不會帶有cookie數(shù)據(jù)蚁吝，這樣可以降低請求頭的大小，降低請求時間舀射，從而達到降低整體請求延時的目的窘茁。

同時這種方式不會將cookie傳入Web Server，也減少了Web Server對cookie的處理分析環(huán)節(jié)脆烟，提高了webserver的http請求的解析速度庙曙。

2.4.17、什么是CSS預處理器 / 后處理器浩淘？

預處理器例如：LESS、Sass吴攒、Stylus张抄，用來預編譯Sass或less，增強了css代碼的復用性洼怔，還有層級署惯、mixin、變量镣隶、循環(huán)极谊、函數(shù)等诡右，具有很方便的UI組件模塊化開發(fā)能力，極大的提高工作效率轻猖。

后處理器例如：PostCSS帆吻，通常被視為在完成的樣式表中根據(jù)CSS規(guī)范處理CSS，讓其更有效咙边；目前最常做的是給CSS屬性添加瀏覽器私有前綴猜煮，實現(xiàn)跨瀏覽器兼容性的問題。

2.4.18败许、style標簽寫在body后與body前有什么區(qū)別王带？

頁面渲染時首先是根據(jù)DOM結(jié)構(gòu)生成一個DOM樹然后加上CSS樣式生成一個渲染樹，如果CSS代碼放在后面頁面可能出現(xiàn)閃跳或白屏的感覺市殷，或者頁面很丑直到css加載完成愕撰。放在前面是常規(guī)寫法

2.4.19、如果需要手動寫動畫醋寝，你認為最小時間間隔是多久搞挣，為什么？（阿里）

多數(shù)顯示器默認頻率是60Hz甥桂，即1秒刷新60次柿究，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms

2.4.20、抽離樣式模塊怎么寫黄选，說出思路蝇摸，有無實踐經(jīng)驗？[阿里航旅的面試題]

把CSS分為公共CSS和業(yè)務(wù)CSS办陷。模塊化的CSS就是公共部分的CSS

2.4.21貌夕、什么叫做響應式？

針對不用的屏幕顯示不同的網(wǎng)頁布局民镜，比如說大屏幕手機啡专、小屏幕手機、平板能夠適應不同的屏幕來顯示網(wǎng)站

2.4.22制圈、針對不同屏幕的響應式们童，UI設(shè)計師該做幾套設(shè)計圖？

只做一套鲸鹦，大多UI設(shè)計師會使用iPhone5的尺寸來做一套（640X1136）慧库。那么這種可以適配響應式的各種屏幕的嗎？這種在HTML5中通過代碼中的媒體查詢來實現(xiàn)馋嗜。媒體查詢怎么寫齐板？媒體查詢的具體寫法如下：@media screen and (max-width:640px) { //最大寬度是640px的屏幕寬度nav li {? ?? ?? ?? ?? ?? ?? ?? ?? ???//nav標簽下的li標簽設(shè)置樣式display: inline;? ?? ?? ?? ?//轉(zhuǎn)化為行元素??? ? ? ?? ???}}

QQ技術(shù)交流群:815302226