選擇符
- 子選擇符：>
- 緊鄰?fù)x擇符：+
- 一般同胞選擇符：~
- 屬性名選擇符：標(biāo)簽名[屬性名]
- 屬性值選擇符：標(biāo)簽名[屬性名='屬性值']
舉例：選中除了第一個之外的其它元素：
HTML代碼：
<ul> <li><a>Gryffindor</a></li> <li><a>Herqipaqi</a></li> <li><a>Ravencolor</a></li> <li><a>Slythirin</a></li> </ul>
CSS代碼（只選擇下一個li里面的a元素）：
ul li + li a **{border-left:1px solid #aaa;}
還有比較新奇的，用于多級菜單的逐層顯示：
li:hover > ul {display:none;}
偽類
a鏈接一共有4個偽類：
- :link
- :visited
- :hover
- :active
由于這4個偽類的特指度相同，如果不按照這里列出的順序使用它們，瀏覽器可能不會顯示預(yù)期結(jié)果。記憶辦法：LoVe&HAte~~
:hover可以用于任何元素
（特指度表示一條規(guī)則有多明確。一條規(guī)則的特指度，由它的選擇符中包含多少個標(biāo)簽、類名和ID決定。）
:focus偽類
應(yīng)用于任何元素，表示元素獲得焦點的狀態(tài)。
:target偽類
如果用戶點擊一個指向頁面中其他元素的鏈接，則那個元素就是目標(biāo)，可以用:target選中它。
比如：<a href="#more_info">More Infomation</a>，指向的是ID為more_info的元素，我再把#more_info:target {background:#eee;}，就會在點擊鏈接轉(zhuǎn)向ID為more_info的元素時，為該元素添加淺灰色背景。
結(jié)構(gòu)化偽類
:first-child和:last-child —— 注意點：并不是加在父元素上，而是一組同胞元素的首個或尾個上
當(dāng)然還有更靈活的:nth-child(n) —— n為數(shù)值，最常用于提高表格的可讀性
偽元素
::first-letter
可以實現(xiàn)段落首字符放大的效果，如：p::first-letter {font-size:300%;}
::first-line
可以選中文本段落的第一行，如：p::first-line {font-family:Arial;}
::before和::after
可用于在特定元素的內(nèi)容前面或后面添加特殊內(nèi)容，比如：<p class='age'>25</p>，給它加上如下樣式p.age::before {content:'Age: '}，能得到以下結(jié)果：Age: 25
（搜索引擎不會取得偽元素的信息，所以不要在偽元素中添加你想讓搜索引擎抓到的重要內(nèi)容）
十六進制表示的顏色值
純紅色 #ff0000
純綠色 #00ff00
純藍色 #0000ff
6個數(shù)值兩兩分成3組，分別代表紅、綠、藍色值，根據(jù)每組的第一個值可以大概猜出顏色，因為十六進制的順序是0123456789abcdef，由淺入深，所以可以估計#7c a9 be偏藍綠色。
如果每組的兩個值相等，可以簡寫，如純紅：#f00，純綠：#0f0，純藍：#00f
疊加外邊距（豎直方向）
給一列相同的元素設(shè)置相同的上下邊距，中間元素的上下邊距會重疊，也就是會覆蓋值小的那個外邊距。
根據(jù)經(jīng)驗，為文本元素設(shè)置外邊距時通常需要混合使用不同的單位。比如說，一個段落的左、右外邊距可以使用像素，以便該段落始終與包含元素邊界保持固定間距，不受字號變大或變小的影響。而對于上、下外邊距，以em為單位則可以讓段間距隨字號變化而相應(yīng)增大或減小。就像這樣：p {font-size:1em; margin:.75em 30px;}
圍住浮動子元素的三種辦法(重點)
問題：當(dāng)一個元素的子元素都設(shè)置浮動后，它將無法包裹住這些浮動元素，實際高度將會很小甚至為0.
解決措施：
- 為父元素添加overflow:hidden;
- 同時浮動父元素；
- 添加非浮動的清除元素；
示例：方法3的衍生版，給父元素的偽元素::after清除浮動；
:after { content:'.'; display:block; height:0; visibility:hidden; clear:both; }
定位position
static,relative,absolute,fixed
relative是相對于原本該在的位置，調(diào)節(jié)top,right,bottom,left，但這個元素原來占據(jù)的空間沒有動，頁面除了它本身沒有任何變化。
absolute將元素徹底從文檔流中拿出來，默認(rèn)相對body元素進行top,right,bottom,left
定位，會隨著頁面滾動而滾動。實際上，絕對定位元素的任何祖先元素都可以成為它的定位上下文，只要把相應(yīng)祖先元素的position設(shè)定為relative即可。
fixed將元素徹底從文檔流中拿出來，相對
瀏覽器窗口
進行top,right,bottom,left定位，不會隨著頁面滾動而滾動。
事實上，只要把元素的外邊距和內(nèi)邊距設(shè)定好，多數(shù)情況下只用靜態(tài)定位就足以實現(xiàn)頁面布局了。除非真需要那么做，否則不要輕易修改元素默認(rèn)的position屬性。
文本垂直居中的一種辦法：將文本的line-height設(shè)置成父元素的高度，而行高是在文本行上下平均分配的。
背景background
背景圖片居中：通過把background-position設(shè)定為50% 50%，把background-repeat設(shè)定為no-repeat，可以實現(xiàn)圖片在背景區(qū)域內(nèi)居中的效果。
背景圖片鋪滿：
**background-size: cover; **拉大背景圖片，使其完全填滿背景區(qū)，保持寬高比（有裁切）。
background-size: contain;縮放圖片，使其剛好放在背景區(qū)，保持寬高比（露底）。
background-attachment屬性控制滾動元素內(nèi)的背景圖片是否隨元素而移動，默認(rèn)值scroll，隨著移動。如果值為fixed，背景圖片位置保持不變，常用來給網(wǎng)頁添加淡色水印。
簡寫背景屬性
background: url(...) center #fff no-repeat contain fixed;
聲明中少寫了哪一種屬性的值，就會用默認(rèn)值。
CSS3新增的背景屬性：
background-clip —— 控制背景元素繪制的區(qū)域，比如可以讓背景顏色和背景圖片只出現(xiàn)在內(nèi)容區(qū)，而不出現(xiàn)在內(nèi)邊距區(qū)域。默認(rèn)情況下，背景繪制區(qū)域是擴展到邊框外邊界的；
background-origin —— 控制背景定位區(qū)域的原點；
background-break —— 控制分離元素（比如跨越多行的行內(nèi)盒子）的顯示效果；
CSS3中背景圖片可以有多張，并可以層疊，先聲明的圖片在上層
漸進增強和優(yōu)雅降級
漸進增強(progressive enhancement)
針對低版本瀏覽器進行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優(yōu)雅降級(graceful degradation)
一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進行兼容。
VSP廠商前綴（處理各大瀏覽器對部分CSS3屬性不支持的問題）
-o-
-ms-
-moz-
-webkit-
以下CSS屬性必須加VPS：
border-image
background
linear-gradient
transition
background-image
radial-gradient
transform
針對背景圖片或漸變
translate
transform-origin
背景線性漸變
默認(rèn)從上到下：background:linear-gradient(#000,#fff);
從左到右：background:linear-gradient(left,#000,#fff);
左上到右下：background:linear-gradient(-45deg,#000,#fff);
漸變點：一般用百分比確定的漸變區(qū)域的臨界點。
背景徑向漸變
background: -webkit-radial-gradient(#fff, #64d1dd, #70aa25);
background: -webkit-radial-gradient(circle, #fff, #64d1dd, #70aa25);
background: -webkit-radial-gradient(50px 30px, circle, #fff, #64d1dd, #70aa25);
字體大小（推薦使用rem）
實用經(jīng)驗：如果你想用em，但又需要設(shè)定具體的字體大小，可以把body的font-size設(shè)定為62.5%。這樣，就等于把基準(zhǔn)大小從16px改為10px（10/16=62.5%）。然后，em與px的對應(yīng)關(guān)系就很明確了，比如1em就是10px，1.28em就是12.8px。
但是，em有一個致命傷，就是相對大小會逐層復(fù)合，會有很多計算，比較麻煩！
幸好，CSS3推出rem，所有元素都是相對HTML根元素，避免了逐層復(fù)合的麻煩！如今已被幾乎各大瀏覽器支持（除了IE8及之前的老版本）。
文本屬性
首行縮進：text-indent
字符間距：letter-spacing
單詞間距：word-spacing
文本裝飾：text-decoration
文本轉(zhuǎn)換：text-transform
垂直對齊：vertical-align:任意長度值以及sub,super,top,middle,bottom等
vertical-align以基線為參照上下移動文本，但這個屬性只影響行內(nèi)元素。如果你想在垂直方向上對齊塊級元素，必須把其display屬性設(shè)定為inline。文本內(nèi)一般用來設(shè)上下標(biāo)。
如何在網(wǎng)頁中應(yīng)用網(wǎng)格排版？
畫一個100*18的矩形，在它底部畫一條線，并作為背景圖片平鋪在網(wǎng)頁上即可。（18px是自定義的網(wǎng)格高度，可自行調(diào)整）
分欄布局
box-sizing:border-box; —— 改變盒子的內(nèi)邊距和邊框時，不會對盒子整體寬度造成影響。
IE6和IE7不支持box-sizing屬性，有一個專門解決這個問題的borderBoxModel.js，可以使用條件注釋把它添加到HTML標(biāo)記之后、結(jié)束的</body>標(biāo)記之前。
子-星選擇符 >*
選擇符可以選擇“所有元素”，故而，在一個選擇符后面加一個，比如someSelector*就可以選擇someSelector所代表元素的所有后代元素，如果再加一個>，變成someSelector > *，就會只選擇someSelector所代表元素的所有子元素，而非后代元素。
用CSS3單元格實現(xiàn)分欄布局(重點)
這種方法不會導(dǎo)致固定不變的表格布局，也不會出現(xiàn)難以重新應(yīng)用樣式的問題（比如在手持設(shè)備上顯示為一欄）。CSS可以把一個HTML元素的display屬性設(shè)置為table、table-row、table-cell。通過這種辦法可以模擬相應(yīng)的HTML元素的行為。而通過CSS把布局中的欄設(shè)定為table-cell有三個好處：
1.單元格不需要浮動就可以并排顯示，而且直接為它們應(yīng)用內(nèi)邊距也不會破壞布局。
2.默認(rèn)情況下，一行中的所有單元格高度相同，因而也不需要人造的等高欄效果了。
3.任何沒有明確設(shè)定寬度的欄都是流動的。
（這種辦法秒殺多欄布局采取的浮動法、外邊距法，只有一個不足，就是IE7以及更低版本不支持！）
界面組件
用div畫一個三角形：
div { border:12px solid; border-color:transparent red transparent transparent; height:0px; width:0px; }
