css知多少（1）——我来问你来答（转）
css知多少（1）——我來問你來答
1. 引言
各位前端或者偽前端（比如作者本人）的同志們，css對你們來說不是很陌生。比如我，在幾年之前上大學的時候，給外面做網(wǎng)站就用css，而且必須用css。這樣算下來也得六年多了，有些功能可能輕車熟路，有些功能可能需要上網(wǎng)查查，看似能應付得了工作的事情——我之前也是（現(xiàn)在工作上不做開發(fā)了，只是業(yè)余還寫代碼）。
世界上沒有絕對簡單的東西，只是我們認為它是簡單的。就像我們公司現(xiàn)在的開發(fā)情況，開發(fā)的大環(huán)境剛剛轉(zhuǎn)入B/S，開發(fā)領導以前都是用.net做C/S的，在我看來，他們就覺得js、css就是那么回事兒，沒多高深。但是我還是抱著敬畏的態(tài)度，買了一本《CSS設計指南（第三版）》，不管自己會的，還是不會的，我都統(tǒng)統(tǒng)看一遍。書郵回來之后，我花了三個晚上看完了。我有個習慣，就是做一件事情一定要又一個結(jié)果，不能覺得自己腦子里明白了就算了，一定要寫出來，甚至做出例子來才算完。于是乎，就寫幾篇博客唄。利己利人。
下面我把在看書過程中遇到的自己認為比較重要的（掌握不牢固）或者之前不懂的，都先列出來，出幾個題目，各位看官可以試著想想。如果您都會了，那您基礎很牢固，沒得說；如果你有些不會的，著急你就趕緊自己查查答案，不著急你就等著我后面的博客介紹。
閑話說了很多，現(xiàn)在開始！
2. 問題
01. 有些瀏覽器不完全支持css3，現(xiàn)在可以用哪個工具去檢測瀏覽器是否支持，以及支持哪些項？
提示：Mo****zr
02. 常用的html標簽，它們的display屬性一般默認為block和inline。有哪些常用標簽的display不是block和inline，這些標簽顯示的時候和block/inline有何區(qū)別？
提示：table，input, textarea
03. 是否用過@import？
（比較簡單）
04. 一個表格的第一行顯示紅色背景，最后一行顯示藍色背景，中間行使用灰色/白色間隔的背景，如何寫？
提示：結(jié)構(gòu)化偽類（比較簡單）
05. 偽元素 ::before、::after 是否用過？都是在哪些地方用的？
提示：清除浮動、為一個div增加一個“三角”??重要?
06. css——層疊樣式表，其中的“層疊”該如何理解？??重要?
提示：層疊，即一層一層疊加起來，關鍵是知道一共有幾層，每一層都是什么
07. 對“特指度（specificity）”了解多少，知道“I-C-E”的計算規(guī)則嗎？??重要?
提示：參考http://www.cnblogs.com/netlyf/archive/2009/06/19/1506427.html
08. 特指度理解不是很麻煩，關鍵是分析多個css選擇符和計算麻煩。有一個簡單的解決方案，四句口訣，叫做“查理版簡單層疊要點”，是否了解？??重要?
提示：例如，“包含ID的選擇符要勝過包含類的選擇符...”
09. 搜索“瀏覽器默認樣式”，找到它，打開看看，里面是瀏覽器默認的所有樣式，你是否都能看得懂。?重要?
提示：例如 display:table 和 display:block 有何區(qū)別？
10. 在你開發(fā)的系統(tǒng)的第一個css文件的第一行，就要寫上?* {margin:0; padding:0}?，這是為何？
提示：瀏覽器兼容性（比較簡單）
11. 樣式?p{margin-top:50px; margin-bottom:30px;}?將會導致p之間的垂直距離是多少？
提示：垂直外邊距……水平外邊距……——比較簡單的基礎知識
12. “盒子模型”大家都了解了（不知道趕緊去惡補！！），盒子模型的width其實是指內(nèi)容的寬度，不包括padding、border、margin。其實這樣對我們做css布局是很不利的，有什么方法可以讓width是全部的寬度？??重要?
提示：box-sizing（注意IE低版本的兼容性）
13. float的一些影響會讓我們經(jīng)?？扌Σ坏?#xff08;特別是初學者），其實了解了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清除浮動有三種方法，是否知道。你平時是怎么清除浮動的？業(yè)內(nèi)最常用的經(jīng)典清除浮動樣式是什么？?重要?
提示：搜索“clearfix”
17. 相對定位relative如何理解，它和絕對定位absolute的最根本區(qū)別是什么？
提示：一個在文檔流內(nèi)，一個在文檔流外
18. “定位上下文”是否知道？?重要?
19. 經(jīng)典的網(wǎng)頁三列布局如何實現(xiàn)？如果不考慮IE6、7，最好的實現(xiàn)多列布局的方式是什么？?重要?
提示：table-cell
20. 是否用過inline-block，IE6、7如何兼容？
提示：比較簡單，百度即可
3. 結(jié)束
當前就總結(jié)了這么多問題，大家可以對照著問題想想答案。如果你覺得還有寫比較重要的知識，可以給我留言，我將會考慮加入進來。
另外，接下來我將寫一個關于css重點知識的簡短的系列文章，以及結(jié)合我做過的wangEditor富文本框以及對bootstrap框架的了解，把本文這些問題介紹一下。近期工作很忙，更新起來可能會很慢，敬請期待吧！
---------------------------------------------------------------
本系列的目錄頁面：http://www.cnblogs.com/wangfupeng1988/p/4325007.html
-------------------------------------------------------------------------------------------------------------
歡迎關注我的微博。
也歡迎關注我的教程：
《用grunt搭建自動化的web前端開發(fā)環(huán)境》《從設計到模式》《深入理解javascript原型和閉包系列》《微軟petshop4.0源碼解讀視頻》《json2.js源碼解讀視頻》
轉(zhuǎn)載于:https://www.cnblogs.com/lianghong/p/8031901.html
總結(jié)
以上是生活随笔為你收集整理的css知多少（1）——我来问你来答（转）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Swift 3.1新改动
- 下一篇： 使用MLeaksFinder检测项目内存