## 1\. 引言
各位前端或者偽前端（比如作者本人）的同志們，css對你們來說不是很陌生。比如我，在幾年之前上大學的時候，給外面做網站就用css，而且必須用css。這樣算下來也得六年多了，有些功能可能輕車熟路，有些功能可能需要上網查查，看似能應付得了工作的事情——我之前也是（現在工作上不做開發了，只是業余還寫代碼）。
世界上沒有絕對簡單的東西，只是我們認為它是簡單的。就像我們公司現在的開發情況，開發的大環境剛剛轉入B/S，開發領導以前都是用.net做C/S的，在我看來，他們就覺得js、css就是那么回事兒，沒多高深。但是我還是抱著敬畏的態度，買了一本《CSS設計指南（第三版）》，不管自己會的，還是不會的，我都統統看一遍。書郵回來之后，我花了三個晚上看完了。我有個習慣，就是做一件事情一定要又一個結果，不能覺得自己腦子里明白了就算了，一定要寫出來，甚至做出例子來才算完。于是乎，就寫幾篇博客唄。利己利人。
下面我把在看書過程中遇到的自己認為比較重要的（掌握不牢固）或者之前不懂的，都先列出來，出幾個題目，各位看官可以試著想想。如果您都會了，那您基礎很牢固，沒得說；如果你有些不會的，著急你就趕緊自己查查答案，不著急你就等著我后面的博客介紹。
閑話說了很多，現在開始！
## 2\. 問題
>[info]**01\. 有些瀏覽器不完全支持css3，現在可以用哪個工具去檢測瀏覽器是否支持，以及支持哪些項？**
提示：`Mo****zr`
>[info]**02\. 常用的html標簽，它們的display屬性一般默認為block和inline。有哪些常用標簽的display不是block和inline，這些標簽顯示的時候和block/inline有何區別？**
提示：table，input, textarea
>[info]**03\. 是否用過@import？**
（比較簡單）
>[info]**04\. 一個表格的第一行顯示紅色背景，最后一行顯示藍色背景，中間行使用灰色/白色間隔的背景，如何寫？**
提示：結構化偽類（比較簡單）
>[info]**05\. 偽元素 ::before、::after 是否用過？都是在哪些地方用的？**
提示：清除浮動、為一個div增加一個“三角”??重要?
>[info]**06\. css——層疊樣式表，其中的“層疊”該如何理解？??重要**
提示：層疊，即一層一層疊加起來，關鍵是知道一共有幾層，每一層都是什么
>[info]**07\. 對“特指度（specificity）”了解多少，知道“I-C-E”的計算規則嗎？??重要**
提示：參考http://www.cnblogs.com/netlyf/archive/2009/06/19/1506427.html
>[info]**08\. 特指度理解不是很麻煩，關鍵是分析多個css選擇符和計算麻煩。有一個簡單的解決方案，四句口訣，叫做“查理版簡單層疊要點”，是否了解？??重要**?
提示：例如，“包含ID的選擇符要勝過包含類的選擇符...”
>[info]**09\. 搜索“瀏覽器默認樣式”，找到它，打開看看，里面是瀏覽器默認的所有樣式，你是否都能看得懂。?重要**
提示：例如 display:table 和 display:block 有何區別？
>[info]**10\. 在你開發的系統的第一個css文件的第一行，就要寫上?`* {margin:0; padding:0}`?，這是為何？**
提示：瀏覽器兼容性（比較簡單）
>[info]**11\. 樣式?p{margin-top:50px; margin-bottom:30px;}?將會導致p之間的垂直距離是多少？**
提示：垂直外邊距……水平外邊距……——比較簡單的基礎知識
**12\. “盒子模型”大家都了解了（不知道趕緊去惡補！！），盒子模型的width其實是指內容的寬度，不包括padding、border、margin。其實這樣對我們做css布局是很不利的，有什么方法可以讓width是全部的寬度？??重**要
提示：box-sizing（注意IE低版本的兼容性）
>[info]**13\. float的一些影響會讓我們經常哭笑不得（特別是初學者），其實了解了float的設計初衷，也許你就會理解這些東西。float的設計初衷是什么？**
提示：就簡單的一句話……
>[info]**14\. float具有“包裹性”——例如：abc?和?abc?兩者的寬度是不一樣的，不信可以為 p 加上背景色試試。是否理解這種“包裹性”？試著想想，還有哪些元素（或css屬性）也有這種“包裹性”？**??重**要**?
提示：和第13問題有密切關系
>[info]**15\. float還有一個表象是“破壞性”，它會導致父元素高度塌陷，這個大家應該都知道吧？那么這是為何呢？另外，還有哪個css屬性，也導致這種“破壞性”???重**要
提示：float和absolute都將導致元素脫離文檔流
（針對13、14、15問題，可以參考教程[http://www.imooc.com/learn/121](http://www.imooc.com/learn/121)和[http://www.imooc.com/learn/192](http://www.imooc.com/learn/192)，講的很好，只是講師的聲音很有“磁性”，要忍耐住）
>[info]**16\. css清除浮動有三種方法，是否知道。你平時是怎么清除浮動的？業內最常用的經典清除浮動樣式是什么？?重要**
提示：搜索“clearfix”
>[info]**17\. 相對定位relative如何理解，它和絕對定位absolute的最根本區別是什么？**
提示：一個在文檔流內，一個在文檔流外
>[info]**18\. “定位上下文”是否知道？?重要**
>[info]**19\. 經典的網頁三列布局如何實現？如果不考慮IE6、7，最好的實現多列布局的方式是什么？?重要**
提示：table-cell
>[info]**20\. 是否用過inline-block，IE6、7如何兼容？**
提示：比較簡單，百度即可
## 3\. 結束
當前就總結了這么多問題，大家可以對照著問題想想答案。如果你覺得還有寫比較重要的知識，可以給我留言，我將會考慮加入進來。
另外，接下來我將寫一個關于css重點知識的簡短的系列文章，以及結合我做過的wangEditor富文本框以及對bootstrap框架的了解，把本文這些問題介紹一下。近期工作很忙，更新起來可能會很慢，敬請期待吧！
