前端面試CSS 相關(guān)問題
-
Q：描述下 “reset” CSS 文件的作用和使用它的好處猜丹。
A：
- 作用以及好處：因為各個瀏覽器默認對CSS的渲染有差異，"reset" CSS 通過重新定義標簽樣式漆撞，對瀏覽器進行默認樣式“清零”重置腹缩，樣式保持一致。
- 不足:
- css文件大小增加峦甩；
- 許多樣式本身就需要重置黍匾，多此一舉栏渺；
- 增加瀏覽器對CSS 的渲染。
可以閱讀以下文章增強了解：
-
Q: 解釋下浮動和它的工作原理锐涯。
A: 浮動出現(xiàn)的最開始出現(xiàn)的意義是用來讓文字環(huán)繞圖片而已磕诊。
float可以自動包裹元素。float會導(dǎo)致高度塌陷纹腌。float為什么會導(dǎo)致高度塌陷：元素含有浮動屬性 –> 破壞inline box–> 破壞line box高度 –> 沒有高度 –> 塌陷霎终。什么時候會塌陷：當標簽里面的元素只要樣子沒有實際高度時會塌陷。浮動會脫離文檔流升薯。產(chǎn)生自己的塊級格式化上下文莱褒。可以閱讀以下文章增加理解：
- CSS float浮動的深入研究、詳解及拓展(一)
- CSS float浮動的深入研究涎劈、詳解及拓展(二)
- 那些年我們一起清除過的浮動
- 《CSS權(quán)威指南》
-
列舉不同的清除浮動的技巧保礼，并指出它們各自適用的使用場景。
-
直接把
<div style="clear:both;"></div>放到當作最后一個子標簽放到父標簽?zāi)莾涸鹩铮朔椒嫒菪詮娕谡希褂梅奖悖抢速M了一個標簽坤候，而且只能使用一次胁赢，而且有時候如果不注意中間多了個空格會產(chǎn)生一段空白高度。- 優(yōu)點：通俗易懂白筹，容易掌握智末；
- 缺點：可以想象通過此方法，會添加多少無意義的空標簽徒河，有違結(jié)構(gòu)與表現(xiàn)的分離系馆，在后期維護中將是噩夢。
-
如下:
.clearfix{overflow:hidden; zoom:1;}此方法優(yōu)點在于代碼簡潔顽照，涵蓋所有瀏覽器由蘑，可是對于
overflow:hidden;要是里面的元素要是想來個margin負值定位或是負的絕對定位，豈不是直接被裁掉了代兵，所以此方法是有不小的局限性的尼酿。- 優(yōu)點：不存在結(jié)構(gòu)和語義化問題，代碼量極少植影；
- 缺點：內(nèi)容增多時候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉裳擎，無法顯示需要溢出的元素。
-
如下：
.fix{zoom:1;} .fix:after{ display:block; content:'.'; clear:both; line-height:0; visibility:hidden;}line-height:0寫成height:0也是可以的思币。不會影響任何其他樣式鹿响，通用性強羡微，覆蓋面廣，我很推薦哦惶我。 -
父元素也浮動：
- 優(yōu)點：不存在結(jié)構(gòu)和語義化問題拷淘，代碼量極少
- 缺點：使得與父元素相鄰的元素的布局會受到影響，不可能一直浮動到body指孤，不推薦使用
總結(jié)：
- 其一启涯，通過在浮動元素的末尾添加一個空元素，設(shè)置
clear：both屬性恃轩，after偽元素其實也是通過content在元素的后面生成了內(nèi)容為一個點的塊級元素结洼； - 其二，通過設(shè)置父元素
overflow或者display：table屬性來閉合浮動叉跛，這里的原理涉及到BFC松忍，不再贅述。
同樣請參考上一題給出的參考文章進行閱讀加以理解筷厘。
-
-
Q: 解釋下 CSS sprites鸣峭，以及你要如何在頁面或網(wǎng)站中使用它。
A: CSS Sprites就是把網(wǎng)頁中一些小圖片整合到一張圖片文件中酥艳，再利用CSS的
background-image摊溶，background- repeat，background-position的組合進行背景定位充石，background-position可以用數(shù)字能精確的定位出背景圖片的位置莫换。可以減少http請求骤铃。
-
Q: 你最喜歡的圖片替換方法是什么拉岁，你如何選擇使用。
A:
- 一些圖標是使用before和after偽元素;
- 還有一些使用iconfont;
- 使用sprite圖;
- 用背景圖片代替圖片惰爬。
舉個栗子：
<h1 class="nir">[content]</h1>.nir { height: 100px; /* height of replacement image */ padding: 0; margin: 0; overflow: hidden; } .nir:before { content: url(image.gif); display: block; } -
Q：討論CSS hacks喊暖，條件引用或者其他。
A: CSS主要由三種方法：
- 屬性前綴法(即類內(nèi)部Hack)：例如 IE6能識別下劃線"_"和星號" * "撕瞧，IE7能識別星號" * "陵叽，但不能識別下劃線"_"，IE6~IE10都認識"\9"风范，但firefox前述三個都不能認識咨跌。
- 選擇器前綴法(即選擇器Hack)：例如 IE6能識別
*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}硼婿。 - IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經(jīng)不再支持條件注釋)： ，針對IE6及以下版本： 禽车。這類Hack不僅對CSS生效寇漫，對寫在判斷語句里面的所有代碼都會生效刊殉。
<!DOCTYPE html> <html> <head> <title>Css Hack</title> <style> #test { width:300px; height:300px; background-color:blue; /*firefox*/ background-color:red\9; /*all ie*/ background-color:yellow\0; /*ie8*/ +background-color:pink; /*ie7*/ _background-color:orange; /*ie6*/ } :root #test { background-color:purple\9; } /*ie9*/ @media all and (min-width:0px){ #test {background-color:black\0;} } /*opera*/ @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/ </style> </head> <body> <div id="test">test</div> </body> </html>想要更多的了解CSS hack 方面的知識可以參考：
-
Q: 如何為有功能限制的瀏覽器提供網(wǎng)頁？
- Q: 你會使用哪些技術(shù)和處理方法州胳？
A: 功能限制的瀏覽器记焊，比如 IE 低版本、手機瀏覽器栓撞、奇葩國內(nèi)瀏覽器遍膜，會在很多功能上不符合 Web 標準，而應(yīng)對的方式有這么幾種：
- 只提供符合 Web 標準的頁面瓤湘；
- 提供另一個符合那些瀏覽器標準的頁面(例如說移動端一套css,電腦端一套css);
- 兼容：這里有兩種思路瓢颅，一個是漸進增強，一個優(yōu)雅降級弛说。
漸進增強的思路就是提供一個可用的原型挽懦，后來再為高級瀏覽器提供優(yōu)化。優(yōu)雅降級的思路是根據(jù)高級瀏覽器提供一個版本木人，然后有功能限制的瀏覽器只需要一個剛好能用的版本信柿。當然，工作中的標準都是盡量滿足設(shè)計醒第，如果不能滿足的話就盡量貼近渔嚷，不得已（性能之類的問題）才會砍掉某個瀏覽器版本上的需求。
相關(guān)技術(shù):
- Media Query
- CSS hack
- 條件判斷
除IE外都可識別
-
Q： 有哪些的隱藏內(nèi)容的方法（如果同時還要保證屏幕閱讀器可用呢稠曼？）
A:
display:none看不見也摸不著圃伶，屏幕閱讀器更會忽略其內(nèi)容；而visibility:hidden雖然看得見但是摸不著蒲列，占據(jù)了一定的物理空間窒朋，屏幕閱讀器也會忽略。如果想要在讀屏設(shè)備中讓這些內(nèi)容可見蝗岖。解決方案的基本思路都是將這些內(nèi)容放到屏幕侥猩、視線意外的地方，或者就是將大小設(shè)置成 0抵赢。比如text-indent: -9999em;欺劳、overflow: hidden;、height: 0铅鲤。.texthidden { display:block;/*統(tǒng)一轉(zhuǎn)化為塊級元素*/ overflow: hidden; width: 0; height: 0; }更詳細的方法可以參考這篇文章HIDING CONTENT FOR ACCESSIBILITY
不過既然這是了讀屏而優(yōu)化的划提，那么可以用 media query 來完成，media speech 用于語音輸出的讀屏設(shè)備邢享。
@media speech { /* media-specify rules */ }以上轉(zhuǎn)自Witcher42給出的答案鹏往。
-
Q：你用過柵格系統(tǒng)嗎？如果使用過骇塘，你最喜歡哪種伊履？
A：使用過bootstarp韩容。易于上手，學習成本低唐瀑，還能做出比較大方美觀的頁面群凶。
-
Q: 你用過媒體查詢哄辣，或針對移動端的布局/CSS 嗎请梢？
A:
@media screen and (min-width:600px) { nav { float: left; width: 25%; } section { margin-left: 25%; } } @media screen and (max-width:599px) { nav li { display: inline; } }可參考：
-
Q:你熟悉 SVG 樣式的書寫嗎？
A:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/> <text x="250" y="150" font-family="Verdana" font-size="10px" fill="blue">Hello, out there</text> <defs><style type="text/css"> <![CDATA[.sample{stroke:blue;fill:#0080FF;opacity:1;}]]></style></defs> <use xlink:href="#sample1" class="sample"/> </svg>教程參考: SVG教程
-
Q: 如何優(yōu)化網(wǎng)頁的打印樣式力穗？
A:
<link rel="stylesheet" type="text/css" media="screen" href="xxx.css" />
其中media指定的屬性就是設(shè)備毅弧，顯示器上就是screen，打印機則是print睛廊，電視是tv形真，投影儀是projection。
<link rel="stylesheet" type="text/css" media="print" href="yyy.css" />
但打印樣式表也應(yīng)有些注意事項：
1 打印樣式表中最好不要用背景圖片超全，因為打印機不能打印CSS中的背景咆霜。如要顯示圖片，請使用html插入到頁面中嘶朱。
2 最好不要使用像素作為單位蛾坯，因為打印樣式表要打印出來的會是實物，所以建議使用pt和cm疏遏。
3 隱藏掉不必要的內(nèi)容脉课。（@print div{display:none;}）
4 打印樣式表中最好少用浮動屬性，因為它們會消失财异。
如果想要知道打印樣式表的效果如何倘零，直接在瀏覽器上選擇打印預(yù)覽就可以了。
-
Q: 書寫高效 CSS 時會有哪些問題需要考慮戳寸？
A:
- 樣式是：從右向左的解析一個選擇器
- ID最快呈驶，Universal最慢 有四種類型的key selector，解析速度由快到慢依次是：ID疫鹊、class袖瞻、tag和universal
- 不要tag-qualify （永遠不要這樣做 ul#main-navigation { } ID已經(jīng)是唯一的，不需要Tag來標識拆吆，這樣做會讓選擇器變慢聋迎。）
- 后代選擇器最糟糕（換句話說，下面這個選擇器是很低效的： html body ul li a { }）
- 想清楚你為什么這樣寫
- CSS3的效率問題（CSS3選擇器（比如 :nth-child）能夠漂亮的定位我們想要的元素枣耀，又能保證我們的CSS整潔易讀霉晕。但是這些神奇的選擇器會浪費很多的瀏覽器資源。）
- 我們知道#ID速度是最快的，那么我們都用ID娄昆，是不是很快佩微。但是我們不應(yīng)該為了效率而犧牲可讀性和可維護性`
可參考： http://blog.jobbole.com/55067/
等我重寫這道題答案缝彬。=萌焰。=
-
使用 CSS 預(yù)處理器的優(yōu)缺點有哪些？(SASS谷浅，Compass扒俯，Stylus，LESS)
- 描述下你曾經(jīng)使用過的 CSS 預(yù)處理的優(yōu)缺點一疯。
-
如果設(shè)計中使用了非標準的字體撼玄，你該如何去實現(xiàn)？
- Webfonts (字體服務(wù)例如：Google Webfonts墩邀，Typekit 等等掌猛。)
解釋下瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器？
解釋一下你對盒模型的理解眉睹，以及如何在 CSS 中告訴瀏覽器使用不同的盒模型來渲染你的布局荔茬。
請解釋一下
* { box-sizing: border-box; }的作用, 并且說明使用它有什么好處？請羅列出你所知道的 display 屬性的全部值
請解釋一下 inline 和 inline-block 的區(qū)別竹海？
請解釋一下 relative慕蔚、fixed、absolute 和 static 元素的區(qū)別
-
你目前在使用哪一套CSS框架斋配，或者在產(chǎn)品線上使用過哪一套孔飒？(Bootstrap, PureCSS, Foundation 等等)
- 如果有，請問是哪一套艰争？如果可以坏瞄，你如何改善CSS框架？
-
請問你有使用過 CSS Flexbox 或者 Grid specs 嗎甩卓？
- 如果有鸠匀，請問在性能和效率的方面你是怎么看的？
