原文:css知多少（1）——我來問你來答

1. 引言

　　各位前端或者偽前端（比如作者本人）的同志們，css對你們來說不是很陌生。比如我，在幾年之前上大學的時候，給外面做網站就用css，而且必須用css。這樣算下來也得六年多了，有些功能可能輕車熟路，有些功能可能需要上網查查，看似能應付得了工作的事情——我之前也是（現在工作上不做開發了，只是業餘還寫程式碼）。

　　世界上沒有絕對簡單的東西，只是我們認為它是簡單的。就像我們公司現在的開發情況，開發的大環境剛剛轉入B/S，開發領導以前都是用.net做C/S的，在我看來，他們就覺得js、css就是那麼回事兒，沒多高深。但是我還是抱著敬畏的態度，買了一本《CSS設計指南（第三版）》，不管自己會的，還是不會的，我都統統看一遍。書郵回來之後，我花了三個晚上看完了。我有個習慣，就是做一件事情一定要又一個結果，不能覺得自己腦子裡明白了就算了，一定要寫出來，甚至做出例子來才算完。於是乎，就寫幾篇部落格唄。利己利人。

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

　　閒話說了很多，現在開始！

2. 問題

　　01. 有些瀏覽器不完全支援css3，現在可以用哪個工具去檢測瀏覽器是否支援，以及支援哪些項？

　　提示：Mo****zr

　　02. 常用的html標籤，它們的display屬性一般預設為block和inline。有哪些常用標籤的display不是block和inline，這些標籤顯示的時候和block/inline有何區別？

　　提示：table，input, textarea

　　03. 是否用過@import？

　　（比較簡單）

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

　　提示：結構化偽類（比較簡單）

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

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

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

　　提示：層疊，即一層一層疊加起來，關鍵是知道一共有幾層，每一層都是什麼

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

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

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

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

　　09. 搜尋“瀏覽器預設樣式”，找到它，開啟看看，裡面是瀏覽器預設的所有樣式，你是否都能看得懂。 重要 

　　提示：例如 display:table 和 display:block 有何區別？

　　10. 在你開發的系統的第一個css檔案的第一行，就要寫上 * {margin:0; padding:0} ，這是為何？

　　提示：瀏覽器相容性（比較簡單）

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

　　提示：垂直外邊距……水平外邊距……——比較簡單的基礎知識

　　12. “盒子模型”大家都瞭解了（不知道趕緊去惡補！！），盒子模型的width其實是指內容的寬度，不包括padding、border、margin。其實這樣對我們做css佈局是很不利的，有什麼方法可以讓width是全部的寬度？  重要 

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

　　13. float的一些影響會讓我們經常哭笑不得（特別是初學者），其實瞭解了float的設計初衷，也許你就會理解這些東西。float的設計初衷是什麼？

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

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

　　提示：和第13問題有密切關係

　　15. float還有一個表象是“破壞性”，它會導致父元素高度塌陷，這個大家應該都知道吧？那麼這是為何呢？另外，還有哪個css屬性，也導致這種“破壞性”   重要 

　　提示：float和absolute都將導致元素脫離文件流

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

　　16. css清除浮動有三種方法，是否知道。你平時是怎麼清除浮動的？業內最常用的經典清除浮動樣式是什麼？ 重要 

　　提示：搜尋“clearfix”

　　17. 相對定位relative如何理解，它和絕對定位absolute的最根本區別是什麼？

　　提示：一個在文件流內，一個在文件流外

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

　　19. 經典的網頁三列布局如何實現？如果不考慮IE6、7，最好的實現多列布局的方式是什麼？ 重要 

　　提示：table-cell

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

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

3. 結束

　　當前就總結了這麼多問題，大家可以對照著問題想想答案。如果你覺得還有寫比較重要的知識，可以給我留言，我將會考慮加入進來。

　　另外，接下來我將寫一個關於css重點知識的簡短的系列文章，以及結合我做過的wangEditor富文字框以及對bootstrap框架的瞭解，把本文這些問題介紹一下。近期工作很忙，更新起來可能會很慢，敬請期待吧！

————————————————————————————————————-

歡迎關注我的微博。

也歡迎關注我的教程：

《從設計到模式》《深入理解javascript原型和閉包系列》《微軟petshop4.0原始碼解讀視訊》《json2.js原始碼解讀視訊》

————————————————————————————————————-