《CSS那些事兒》讀後感

這本書某些地方看起來並不是很嚴謹，有些小錯，新手入門不建議選，有了基礎再看不遲。

從《CSS權威指南》的談原理，到《CSS那些事兒》的執行個體操作，從紙上談兵到沙場實戰，這是讓自己得到質的飛躍必經階段，閱讀本書，就是一次不錯的實踐。

第1章講的跟《CSS權威指南》有些重複，選擇符、偽類、偽對象等；

第2章介紹Editplus編輯器，重點說了EP的文法、自動完成、使用者組工具、模板、快速鍵、剪輯，如果打算用EP作為編輯器的話，可以看一看。

第3章是關於盒模型的。
文中提到兩點值得注意的：
①IE怪異模式的盒模型，其width(height)包含了border+padding；
②IE空標籤具有高度的bug。
書中說引起怪異模式的問題來自DOCTYPE聲明是否正確，這點有待驗證，我是持懷疑態度的。

【IE空標籤bug：對於空標籤會帶一個空的預留位置，以預設的文字高度為基準。
解決方案為：
①在標籤內嵌套一個空的行內標籤，如<div><span></span></div>；
②或者加上樣式{overflow：hidden}；
③或者採用font-size:0px 來解決；
④或者在DIV中加<!- ->注釋；
⑤或者在DIV標籤裡加上

⑥設定height:0。
單純的設定height或line-height是沒有效果的。】

第4-5章為CSS的布局，這兩章主要是兩列、三列的布局實現方法。

【第4.3節中有個“右浮動+定位+負邊距”的錯誤，製作demo時會發現，比較容易修改】

第6章是介紹文本樣式。
這一部分如果是看過《CSS權威指南》的話，完全可以跳過，沒有看的，建議去看看，比現在說的這本書更詳細。
這裡提到兩種隱藏文字的方法：
①text-indent縮排9999px；
②line-height行高9999px。沒有太多的新知識點。

【136頁介紹font-weight，其中屬性值“bolder”、“lighter”是相對層級關鍵字，並非書中所寫的比normal粗或細，而是相對父元素的font-weight而言，比如，父元素定義font-weight為200，則bolder就是300，其中，normal相當於400。關於font-weight的具體介紹，建議看《CSS權威指南》比較好。】

第7章是圖片處理。
三大內容：
①背景圖最佳化，其實是講jpg、gif、png的優劣；
②背景圖的設定，也就是background各個屬性值的介紹；
③CSS Sprite。

【176頁講background-position時，書中寫用百分比值時以圖片中心點為基準計算是錯的，百分比值是同時指圖片跟元素框的，比如，假設div元素寬高是200px，圖片寬高是100px，則寫background-position:30% 60%，是說圖片從左上方開始往右30px，往下60px的這個點，跟div元素框相對應的點重合。這個相對應的點是：(200px×30%，200px60%)，即距div左上方水平60px，垂直120px。】

第8章是列表：無序列表ul、有序列表ol、定義列表dl。
這章內容很簡單。我順便補充兩點：
①IE6的li裡有浮動元素時，會多出一點小空隙，具體情況可以參考此文《IE6/7的Bug：縱向排列的li中加浮動元素產生向下3px的空隙》：http://blog.sina.com.cn/s/blog_6f6b4c3c0100w62d.html
②設定li的display:inline時，在FF裡會出現水平方向上的空隙，最直接的解決方式是把<li>放到一行裡，不要斷行符號。不過最好還是改成float來處理吧，li本身是block元素，沒必要非得把它改成inline元素。

【207頁對<map>標籤的說明是錯誤的，完全的望文生義了，<map>標籤是影像地圖，而不是書中所認為的“告訴瀏覽器該標籤所包含的內容具有網站導覽、地圖性質的內容”。】

第9章，表單。
應該是多數人比較少接觸的一部分吧，畢竟涉及到與伺服器的通訊。而且，表單元素的可控性較差，系統與瀏覽器之間的差異更讓表單元素顯得棘手起來。個人覺得，學習調教表單元素的最佳方法，就是上網扣好的代碼研究。這一章有幾個例子，初步實現表單的樣式表現，可以跟著練一練。

第10章--表格，曾經風靡一時，如今卻是風燭殘年。表格很少用到，東西又多，沒必要花大量時間研究，看個大概，在需要的時候查查手冊就可以了。

第11章介紹兩個CSS濾鏡。
①透明濾鏡，主要在於實現背景透明文字不透明，結果發現是，作者把背景跟文字分配到兩個層，背景的那個層設定透明濾鏡，然後發現我被耍了。
②AlphaImageLoader濾鏡，解決IE6不能正常顯示PNG-24圖片的濾鏡，不過貌似需要通過hack來保證各種瀏覽器顯示的一致。
更多的濾鏡就要靠自己了，下載CSS濾鏡手冊研究吧。
站內下載--[xhtml+CSS] [電子書籍] 樣式表濾鏡中文手冊：
http://www.w3cfuns.com/forum.php?mod=viewthread&tid=2340&fromuid=1439

【濾鏡的使用需要把握到哪個程度，希望有經驗的童鞋能給個說明】

第12章，常見的tab選項卡。
這個很實用，推薦看看練練。
這章還提到一篇關於各瀏覽器對百分比取值處理的文章，
《百分比的細節--容器大小篇》地址：http://www.blueidea.com/tech/web/2007/4651.asp
你知道各瀏覽器對33%*123px最後取值多少嗎？看看這篇文章會讓你瞭解的。

第13章製作了一個簡單的純CSS相簿效果，主要還是想讓讀者知道CSS的潛力。關鍵點在於a:hover的運用。文中提到IE6的一個bug：如果要使a:hover img生效，必須先設定改變a:hover的屬性值。

第14章，分析了兩種怪異導航效果的實現。
第一種不規則圖形背景圖，如梯形、菱形，例子我沒做，因為我看完代碼後感覺不實用，實現方式也不是很好。如果你做了的話，記得分享下心得。
第二種是有疊加出現，關鍵點在於相對定位換背景圖跟負邊距製造疊加效果，這一種代碼量較少，也好看。

第15章新聞列表。
左邊標題，右邊時間，這就是新聞列表的常見形式。為了使在一固定寬度範圍內，時間完整顯示，標題多餘字“隱藏”起來，利用了類似頁面配置的方法，對標題添加右邊距製造空白，對時間添加負的左邊距使其拉進標題留的空白上。這個技巧應該掌握。

第16章投影片效果類比，如果加上js指令碼的話，可以實現輪播效果。這個是純CSS實現，所以沒輪播功能。這個效果利用頁面內跳轉的錨連結實現點擊轉場效果，有興趣的可以跟著做做，很簡單的。

第17章再談浮動與清除。
CSS兩大痛點——定位、浮動，都是對文檔流會有影響的，問的人特別多啊。浮動的控制簡單，使用率最高，但造成的相容性問題也是最多的。
記得自己一開始做網頁時，到處可見的float，簡直可以泛濫來表達了，初學者也往往容易陷入這個泥坑中，慎用float吧，童鞋們！——離題了。
這一章解釋了浮動的原理和清除浮動的方法，輔助例子選得很恰當，講解也淺顯易懂。適合不瞭解浮動與清除或瞭解不透徹的人閱讀。

第18章是製作一個活動頁面的執行個體過程，我把這種頁面稱為專題頁面。製作過程考慮了諸多因素，步驟也清晰，作者這種工作方式也是值得學習的。

附錄內容就不說了，怎麼學，還得靠自己，書裡有句話說得好：不斷的做，不斷的想，不斷的實踐。這是成為大師的必經之路。

這本書講的內容也就這麼多，如果發現對某一方面感興趣的可以下載電子書查閱。作者網站有該書的勘誤表。閱讀時遇到不理解的可以查查，但最好還是到w3cfuns論壇問問，能幫你的人更多。

最後，還有件事值得一提——養成正確的習慣。
本書對每個例子都遵循如下步驟：①分析原理；②輸入基本、語義化的Html代碼；③由外到內、由粗到細的美化，完成CSS樣式表。
養成良好的習慣，能提高你的效率，別小看“習慣”，它會影響你一輩子。