css知多少（1）――我來問你來答

1. 引言

　　各位前端或偽前端（比如作者本人）的同志們，css對你們來講不是很陌生。比如我，在幾年之前上大學的時候，給外面做網(wǎng)站就用css，而且必須用css。這樣算下來也得6年多了，有些功能可能駕輕就熟，有些功能可能需要上網(wǎng)查查，看似能應(yīng)付得了工作的事情――我之前也是（現(xiàn)在工作上不做開發(fā)了，只是業(yè)余還寫代碼）。

　　世界上沒有絕對簡單的東西，只是我們認為它是簡單的。就像我們公司現(xiàn)在的開發(fā)情況，開發(fā)的大環(huán)境剛剛轉(zhuǎn)入B/S，開發(fā)領(lǐng)導之前都是用.net做C/S的，在我看來，他們就覺得js、css就是那末回事兒，沒多精深。但是我還是抱著畏敬的態(tài)度，買了1本《CSS設(shè)計指南（第3版）》，不管自己會的，還是不會的，我都統(tǒng)統(tǒng)看1遍。書郵回來以后，我花了3個晚上看完了。我有個習慣，就是做1件事情1定要又1個結(jié)果，不能覺得自己頭腦里明白了就算了，1定要寫出來，乃至做出例子來才算完。因而乎，就寫幾篇博客唄。利己利人。

　　下面我把在看書進程中遇到的自己認為比較重要的（掌握不牢固）或之前不懂的，都先列出來，出幾個題目，各位看官可以試著想一想。如果您都會了，那您基礎(chǔ)很牢固，沒得說；如果你有些不會的，著急你就趕快自己查查答案，不著急你就等著我后面的博客介紹。

　　閑話說了很多，現(xiàn)在開始！

2. 問題

　　01. 有些閱讀器不完全支持css3，現(xiàn)在可以用哪一個工具去檢測閱讀器是不是支持，和支持哪些項？

　　提示：Mo****zr

　　02. 經(jīng)常使用的html標簽，它們的display屬性1般默許為block和inline。有哪些經(jīng)常使用標簽的display不是block和inline，這些標簽顯示的時候和block/inline有何區(qū)分？

　　提示：table，input, textarea

　　03. 是不是用過@import？

　　（比較簡單）

　　04. 1個表格的第1行顯示紅色背景，最后1行顯示藍色背景，中間行使用灰色/白色間隔的背景，如何寫？

　　提示：結(jié)構(gòu)化偽類（比較簡單）

　　05. 偽元素 ::before、::after 是不是用過？都是在哪些地方用的？

　　提示：清除浮動、為1個div增加1個“3角”  重要 

　　06. css――層疊樣式表，其中的“層疊”該如何理解？  重要 

　　提示：層疊，即1層1層疊加起來，關(guān)鍵是知道1共有幾層，每層都是甚么

　　07. 對“特指度（specificity）”了解多少，知道“I-C-E”的計算規(guī)則嗎？  重要 

　　提示：參考http://www.cnblogs.com/netlyf/archive/2009/06/19/1506427.html

　　08. 特指度理解不是很麻煩，關(guān)鍵是分析多個css選擇符和計算麻煩。有1個簡單的解決方案，4句口訣，叫做“查理版簡單層疊要點”，是不是了解？  重要 

　　提示：例如，“包括ID的選擇符要勝過包括類的選擇符...”

　　09. 搜索“閱讀器默許樣式”，找到它，打開看看，里面是閱讀器默許的所有樣式，你是不是都能看得懂。 重要 

　　提示：例如 display:table 和 display:block 有何區(qū)分？

　　10. 在你開發(fā)的系統(tǒng)的第1個css文件的第1行，就要寫上 * {margin:0; padding:0} ，這是為什么？

　　提示：閱讀器兼容性（比較簡單）

　　11. 樣式 p{margin-top:50px; margin-bottom:30px;} 將會致使p之間的垂直距離是多少？

　　提示：垂直外邊距……水平外邊距……――比較簡單的基礎(chǔ)知識

　　12. “盒子模型”大家都了解了（不知道趕快去惡補！！），盒子模型的width實際上是指內(nèi)容的寬度，不包括padding、border、margin。其實這樣對我們做css布局是很不利的，有甚么方法可讓width是全部的寬度？  重要 

　　提示：box-sizing（注意IE低版本的兼容性）

　　13. float的1些影響會讓我們常常哭笑不得（特別是初學者），其實了解了float的設(shè)計初衷，或許你就會理解這些東西。float的設(shè)計初衷是甚么？

　　提示：就簡單的1句話……

　　14. float具有“包裹性”――例如：<p>abc</p> 和 <p style='float:left'>abc</p> 二者的寬度是不1樣的，不信可以為 p 加上背風景試試。是不是理解這類“包裹性”？試著想一想，還有哪些元素（或css屬性）也有這類“包裹性”？  重要 

　　提示：和第13問題有密切關(guān)系

　　15. float還有1個表象是“破壞性”，它會致使父元素高度塌陷，這個大家應(yīng)當都知道吧？那末這是為什么呢？另外，還有哪一個css屬性，也致使這類“破壞性”   重要 

　　提示：float和absolute都將致使元素脫離文檔流

　　（針對13、14、15問題，可以參考教程http://www.imooc.com/learn/121和http://www.imooc.com/learn/192，講的很好，只是講師的聲音很有“磁性”，要忍受住）

　　16. css清除浮動有3種方法，是不是知道。你平時是怎樣清除浮動的？業(yè)內(nèi)最經(jīng)常使用的經(jīng)典清除浮動樣式是甚么？ 重要 

　　提示：搜索“clearfix”

　　17. 相對定位relative如何理解，它和絕對定位absolute的最根本區(qū)分是甚么？

　　提示：1個在文檔流內(nèi)，1個在文檔流外

　　18. “定位上下文”是不是知道？ 重要 

　　19. 經(jīng)典的網(wǎng)頁3列布局如何實現(xiàn)？如果不斟酌IE6、7，最好的實現(xiàn)多列布局的方式是甚么？ 重要 

　　提示：table-cell

　　20. 是不是用過inline-block，IE6、7如何兼容？

　　提示：比較簡單，百度便可

3. 結(jié)束

　　當前就總結(jié)了這么多問題，大家可以對比著問題想一想答案。如果你覺得還有寫比較重要的知識，可以給我留言，我將會斟酌加入進來。

　　另外，接下來我將寫1個關(guān)于css重點知識的簡短的系列文章，和結(jié)合我做過的wangEditor富文本框和對bootstrap框架的了解，把本文這些問題介紹1下。近期工作很忙，更新起來可能會很慢，敬請期待吧！

-------------------------------------------------------------------------------------------------------------

歡迎關(guān)注我的微博。

也歡迎關(guān)注我的教程：

《從設(shè)計到模式》《深入理解javascript原型和閉包系列》《微軟petshop4.0源碼解讀視頻》《json2.js源碼解讀視頻》

-------------------------------------------------------------------------------------------------------------

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學習有所幫助,可以手機掃描二維碼進行捐贈