1. 引言
各位前端或者僞前端（好比做者本人）的同志們，css對大家來講不是很陌生。好比我，在幾年以前上大學的時候，給外面作網站就用css，並且必須用css。這樣算下來也得六年多了，有些功能可能輕車熟路，有些功能可能須要上網查查，看似能應付得了工做的事情——我以前也是（如今工做上不作開發了，只是業餘還寫代碼）。javascript
世界上沒有絕對簡單的東西，只是咱們認爲它是簡單的。就像咱們公司如今的開發狀況，開發的大環境剛剛轉入B/S，開發領導之前都是用.net作C/S的，在我看來，他們就以爲js、css就是那麼回事兒，沒多高深。可是我仍是抱着敬畏的態度，買了一本《CSS設計指南（第三版）》，無論本身會的，仍是不會的，我都通通看一遍。書郵回來以後，我花了三個晚上看完了。我有個習慣，就是作一件事情必定要又一個結果，不能以爲本身腦子裏明白了就算了，必定要寫出來，甚至作出例子來纔算完。因而乎，就寫幾篇博客唄。利己利人。css
下面我把在看書過程當中遇到的本身認爲比較重要的（掌握不牢固）或者以前不懂的，都先列出來，出幾個題目，各位看官能夠試着想一想。若是您都會了，那您基礎很牢固，沒得說；若是你有些不會的，着急你就趕忙本身查查答案，不着急你就等着我後面的博客介紹。html
閒話說了不少，如今開始！前端
2. 問題
01. 有些瀏覽器不徹底支持css3，如今能夠用哪一個工具去檢測瀏覽器是否支持，以及支持哪些項？java
提示：Mo****zrcss3
02. 經常使用的html標籤，它們的display屬性通常默認爲block和inline。有哪些經常使用標籤的display不是block和inline，這些標籤顯示的時候和block/inline有何區別？web
提示：table，input, textareajson
03. 是否用過@import？bootstrap
（比較簡單）瀏覽器
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都將致使元素脫離文檔流
（針對1三、1四、15問題，能夠參考教程http://www.imooc.com/learn/121和http://www.imooc.com/learn/192，講的很好，只是講師的聲音頗有「磁性」，要忍耐住）
16. css清除浮動有三種方法，是否知道。你平時是怎麼清除浮動的？業內最經常使用的經典清除浮動樣式是什麼？ 重要
提示：搜索「clearfix」
17. 相對定位relative如何理解，它和絕對定位absolute的最根本區別是什麼？
提示：一個在文檔流內，一個在文檔流外
18. 「定位上下文」是否知道？ 重要
19. 經典的網頁三列布局如何實現？若是不考慮IE六、7，最好的實現多列布局的方式是什麼？ 重要
提示：table-cell
20. 是否用過inline-block，IE六、7如何兼容？
提示：比較簡單，百度便可
3. 結束
當前就總結了這麼多問題，你們能夠對照着問題想一想答案。若是你以爲還有寫比較重要的知識，能夠給我留言，我將會考慮加入進來。
另外，接下來我將寫一個關於css重點知識的簡短的系列文章，以及結合我作過的wangEditor富文本框以及對bootstrap框架的瞭解，把本文這些問題介紹一下。近期工做很忙，更新起來可能會很慢，敬請期待吧！
---------------------------------------------------------------
本系列的目錄頁面：http://www.cnblogs.com/wangfupeng1988/p/4325007.html
-------------------------------------------------------------------------------------------------------------
歡迎關注個人微博。
也歡迎關注個人教程：
《用grunt搭建自動化的web前端開發環境》《從設計到模式》《深刻理解javascript原型和閉包系列》《微軟petshop4.0源碼解讀視頻》《json2.js源碼解讀視頻》