鑒於國產CSS書籍基本都是辣雞的現狀，我在半年前動用某工作室的購書資金采購了一些技術書籍，這本廣受好評的《精通CSS》也在其中。但是在閱讀過后我深深的感覺到，如果說CSS本來已經是一種很瑣碎的布局知識集合的話，那這本書只能說是更加瑣碎了，因為這只是一本純純的經驗分享。而且隨着前端技術的快速發展，明顯能感覺到，這本書里的很多內容已經過時了。所以，雖然我寫了筆記，但是仍然強烈不推薦把這本書當作是CSS聖經，而應該作為一本床頭讀物（不過我相信你不會的，因為它太無聊了）。
看完以后我最大的感慨是——果然還是MDN靠譜
至於我為什么克服了拖延症來寫寫讀書筆記，因為我退出了工作室，要還書了【doge】
此篇筆記根據《精通CSS：高級Web標准解決方案》1~3章內容整理。
——————————————————————————————————
1、命名id和class時，一定要名稱與表現方式無關。盡可能與功能或內容相關（語義化思想）
2、id和class名區分大小寫
3、div是有語義的，代表部分（division），所以並不需要任何結構都是用div，例如：
1 <div class="nav"> 2 <ul> 3 <li><a href="/home">home</a></li> 4 <li><a href="/about">about</a></li> 5 <li><a href="/contact">contact</a></li> 6 <li></li> 7 </ul> 8 </div>
完全可以寫成：
1 <ul class="nav"> 2 <li><a href="/home">home</a></li> 3 <li><a href="/about">about</a></li> 4 <li><a href="/contact">contact</a></li> 5 <li></li> 6 </ul>
4、后代選擇器選擇一個元素所有后代，子選擇器（>）只選擇元素的直接后代
5、相鄰同胞選擇器（+）用於定位同一個父元素下某元素之后的元素
6、導入樣式表
@import url("/css/layout.css")
速度慢於鏈接樣式表
<link href="/css/layout.css" rel="stylesheet" type="text/css" />
7、瀏覽器同時只能從一個域下載有限數量的文件，老式瀏覽器2個，現代瀏覽器4-8個（所以這正是我們使用CDN的原因之一）。所以結構良好的單一CSS文件可以顯著提高下載速度。
8、改進型的注釋。
/* @group news styles
-------------------------------------------------------*/
方便你找到它。
9、盒模型分為兩種。W3C標准盒模型和IE奇葩型。
兩者的主要區別在於，IE盒模型中的padding是在height和width所划定的區域內的，而W3C標准盒模型中padding是在height和width之外的。
另：background可以影響的部分包括height和width區域，也包括padding
10、盒模型外邊距疊加原則：
①外邊距高度為兩者中較大者
②元素的頂外邊距和其父元素頂外邊距也會疊加
③無內容的盒子，外邊距也會疊加，形成一個矩形
④外邊距疊加只發生在普通文檔流的塊級元素的垂直外邊距上，行內元素、浮動元素、絕對定位元素不存在外邊距疊加
11、塊級元素有p、h1、div、ul等，其余為行內元素
12、行內元素可以由水平padding、border、margin調整水平間距，然而垂直padding、border、margin不影響行內元素高度。行內元素高度總是足以容納它包含的所有行內元素。修改行內元素高度的唯一方法是修改行高（line-height）
另：單行文字時，可以使用line-height進行垂直居中
13、當display屬性為inline-block時，元素會像行內元素一樣水平依次排列，然而仍然使用塊級元素的盒模型
14、相對定位（元素仍位於普通文檔流）
1 #news{ 2 position:relative; 3 left:20px; //遠離左邊20px 4 top:20px; //遠離上方20px 5 }
元素仍會占據原來的空間，移動后可能會對其他元素產生覆蓋。相對移動的起始位置為原位置。
15、絕對定位（元素與普通文檔流無關）
1 #news{ 2 position:absolute; 3 left:20px; 4 top:20px; 5 z-index:2; 6 }
因為絕對定位與普通文檔流無關，所以不占據空間。普通文檔流中的其他元素布局就像絕對定位元素不存在一樣。
絕對定位起始位置由距離它最近的已定位的父元素決定。
z-index值越大，元素在棧中位置越高
16、固定定位
position:fixed;
是絕對定位的一種，差異在於其參照物不是document，而是screen
17、浮動
浮動元素不在普通文檔流中，所以普通文檔流中的其他元素布局就像浮動元素不存在一樣。
普通文檔流中的文字內容會受浮動元素影響，產生文字圍繞浮動元素效果。
18、浮動元素的清理方法
①clear:left/right/both;
②浮動所有元素
③overflow:auto/hidden; 但是某些情況下會產生滾動條或截斷。
④使用:after偽類（p52）
1 .clear:after{ 2 content:"."; 3 height:0; 4 visibility:hidden; 5 display:block; 6 clear:both; 7 }
將類名clear添加到要清楚的元素類名中去