這次主要是補(bǔ)充一些在實(shí)際開發(fā)（練習(xí)）中遇到的一些問題，記錄下來，方便自己以后查找復(fù)習(xí)，如果恰巧也能捎帶腳解決您的困惑，那也是榮幸之至。下面還是閑話少敘，直接上干活：
注意：本文也可以看做是《CSS設(shè)計(jì)指南》的讀后感，如果你恰巧看過這本書，那有趣的事很多，不要在此浪費(fèi)時(shí)光。
一、什么時(shí)候用ID，什么時(shí)候用類？
- ID：id的用途是在頁面中唯一地表示一個(gè)元素。正因?yàn)槿绱?，同一個(gè)界面中的每一個(gè)ID屬性，都必須是獨(dú)一無二的值（身份證號碼）。
- 類：類的目的是為了標(biāo)識一組具有相同特征的元素。（人的名字，你叫張三，別人也可以叫張三）
不要亂用類
- 要避免Web開發(fā)專家Jeffrey Zeldman說的“類濫用----標(biāo)記中的麻疹”出現(xiàn)。什么意思呢？就是說你不要像使用ID一樣，每個(gè)類都指定一個(gè)不同的類名，然后再為每個(gè)類編寫規(guī)則。盡量使用一些繼承和上下文選擇符來讓不同的標(biāo)簽共享樣式。
小結(jié)
ID的用途是在界面標(biāo)記中唯一的標(biāo)識一個(gè)特定的元素。它能夠?yàn)槲覀兙帉慍SS規(guī)則提供必要的上下文，排除無關(guān)的標(biāo)記，而只選擇該上下文中的標(biāo)簽?；蛘吆蚸avasprite交互時(shí)使用。
相對來說，類是可以應(yīng)用給任意多個(gè)頁面中的任意多個(gè)HTML元素的公共標(biāo)識符，以便我們?yōu)檫@些元素應(yīng)用相同的CSS樣式，而且，使用類也讓為不用標(biāo)簽名的元素應(yīng)用相同的樣式成為可能。
二、偽類
這里只是簡單的總結(jié)一下，針對鏈接的偽類一共有四個(gè)：
Link：此時(shí)，鏈接就在那等著用戶點(diǎn)擊；
Visited：用戶此前點(diǎn)擊過這個(gè)鏈接；
Hover：鼠標(biāo)指針懸停在連接上；
Active：鏈接正在被點(diǎn)擊（鼠標(biāo)在元素上按下，還沒有釋放）
使用實(shí)例：
a：link {color:block;}
a: visited {color:gray;}
a: hover{text-decoration:none;}
a:active{color:red;}
一個(gè)磨耗（:）表示偽類，兩個(gè)冒號（::）表示CSS3新增的偽元素
2.2、focus偽類
:focus 選擇器用于選取獲得焦點(diǎn)的元素。(偽類)
三、圍住浮動元素的三種方法
方法一、為父元素添加overflow:hidden
實(shí)際上，overflow:hidden 聲明的真正用途是防止包含元素被超大內(nèi)容撐大。應(yīng)用overflow:hidden 之后，包含元素依然保持其設(shè)定的寬度，而超大的子內(nèi)容則會被容器剪切掉。除此之外，overflow:hidden 還有另一個(gè)作用，即它能可靠地迫使父元素包含其浮動的子元素。
方法二、同時(shí)浮動父元素
第二種促使父元素包圍其浮動子元素的方法，是也讓父元素浮動起來。浮動 section 以后，不管其子元素是否浮動，它都會緊緊地包圍(也稱收縮包裹)它的子元素。
方法三、添加非浮動的清除元素(clearfix 規(guī)則)
第三種強(qiáng)制父元素包含其浮動子元素的方法，就是給父元素的最后添加一個(gè)非浮動的子元素，然后清除該子元素。
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
這個(gè) clearfix 規(guī)則最早是由程序員 Tony Aslett 發(fā)明的，它只添加了一個(gè)清除的包含句點(diǎn)作為非浮動元素(必須得有內(nèi)容，而句點(diǎn)是最小的內(nèi)容)1。規(guī)則中的其他聲明是為了確保這個(gè)偽元素沒有高度，而且在頁面上不可見。
好了，該回過頭來作個(gè)總結(jié)了。要想強(qiáng)迫父元素包圍其浮動的子元素有三種方式，哪三種?
- 為父元素應(yīng)用 overflow:hidden
- 浮動父元素
- 在父元素內(nèi)容的末尾添加非浮動元素，可以直接在標(biāo)記中加，也可以通過給父元
素添加 clearfix 類來加(當(dāng)然，樣式表中得需要相應(yīng)的 clearfix 規(guī)則)
這三種方法的使用要因地制宜。比如，不能在下拉菜單的頂級元素上應(yīng)用overflow:hidden，否則作為其子元素的下拉菜單就不會顯示了。因?yàn)橄吕藛螘@示在其父元素區(qū)域的外部，而這恰恰是 overflow:hidden 所要阻止的。再比如，不能對已經(jīng)靠自動外邊距居中的元素使用“浮動父元素”技術(shù)，否則它就不會再居中，而是根據(jù)浮動值浮動到左邊或右邊了。
四、display
- 把原本dispaly屬性值為inline（行內(nèi)元素）轉(zhuǎn)換成block（塊級元素）可以讓原先的行內(nèi)元素填滿其父元素
- display 屬性還有一個(gè)值有必要提一下，就是 none。把元素的 display 設(shè)定為 none，該元素及所有包含在其中的元素，都不會在頁面中顯示。它們原先占據(jù)的所有空間也都會被“回收”，就好像相關(guān)的標(biāo)記根本不存在一樣。與此相對的是 visibility屬性，這個(gè)屬性最常用的兩個(gè)相對的值是 visible(默認(rèn)值)和 hidden。把元素的visibility 設(shè)定為 hidden，元素會隱藏，但它占據(jù)的頁面空間仍然“虛位以待”。
五、字體
5.1、字體大小
- 設(shè)定字體大小的單位有兩種，一種是絕對單位，比如像素或點(diǎn)，另一種是相對單位，比如百分比或 em。下面我們就解釋這兩種單位的區(qū)別。
- em：（相對單位），瀏覽器樣式表在設(shè)定所有元素的字體大小時(shí)，使用的都是相對單位 em，h1 被設(shè)定為 2em，h2 是 1.5em，p 是 1em。默認(rèn)情況下，1em等于 16 像素，這也是 font-size 的基準(zhǔn)大小。換算成絕對值，h1 就是 32 像素，h2是 24 像素，p 是 16 像素。
- px：像素點(diǎn)（絕對單位），這些以像素之類的絕對單位重新設(shè)定字體大小的元素，不會繼承祖先元素的字體大小，它們會按照設(shè)定的大小顯示。
- 注意：
如果你想使用 em，但又需要設(shè)定具體的像素大小，可以把 body 的 font-size 設(shè)定為62.5%。這樣，就等于把基準(zhǔn)大小從 16 像素改為 10 像素(16×62.5%=10)。然后， 3em 與像素的對應(yīng)關(guān)系就十分明確了，比如 1em 等于 10 像素，1.5em 等于 15 像素，2em 等于 20 像素，等等。
5.2、Web字體
- 設(shè)定 Web 字體的方式有以下三種：
- 使用 Google Web Fonts 或 Adobe 的 Typekit 等公共字體庫；
- 使用Google Web Fonts 的步驟。打開http://www.google.com/webfonts，找到想要的字體，單擊 Add to Collection 按鈕，然后單擊頁面底部的 Use 按鈕(如圖 4-14所示)。然后，Google 就會生成一個(gè)指向你剛剛選定字體的<link>標(biāo)簽，直接把它復(fù)制粘貼到你的 HTML 文件中即可。
比如下面這個(gè)<link>標(biāo)簽就引用了 Anton、Niconne 和Prata 字體。
<link rel='stylesheet' type='text/css'>
把這個(gè)鏈接添加到頁面的<head>標(biāo)簽中之后，就可以像使用其他字體一樣使用這些Web 字體了。用戶打開網(wǎng)頁時(shí)，瀏覽器就會從 Google 的服務(wù)器得到相應(yīng)字體。比如h3 {font: 20px "Prata", serif;}
- 使用Google Web Fonts 的步驟。打開http://www.google.com/webfonts，找到想要的字體，單擊 Add to Collection 按鈕，然后單擊頁面底部的 Use 按鈕(如圖 4-14所示)。然后，Google 就會生成一個(gè)指向你剛剛選定字體的<link>標(biāo)簽，直接把它復(fù)制粘貼到你的 HTML 文件中即可。
- 使用事先打好包的@font-face 包；
- 使用 Google Web Fonts 或 Adobe 的 Typekit 等公共字體庫；
@font-face {
/*這就是將來在字體棧中引用的字體族的名字*/
font-family:'UbuntuTitlingBold';
src: url('../Fonts/UbuntuTitlingBold.ttf');
}
* 使用 Font Squirrel 用你自己的字體生成@font-face 包。（沒有涉及，待補(bǔ)充）
六、一些標(biāo)簽
-
article：
<article> 標(biāo)簽規(guī)定獨(dú)立的自包含內(nèi)容。
一篇文章應(yīng)有其自身的意義，應(yīng)該有可能獨(dú)立于站點(diǎn)的其余部分對其進(jìn)行分發(fā)。 -
aside
<aside> 標(biāo)簽定義 article 以外的內(nèi)容。aside 的內(nèi)容應(yīng)該與 article 的內(nèi)容相關(guān)。 -
section
<section> 標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。
七、遺漏知識點(diǎn)
7.1 盒子模型
- 注意啦，垂直外邊距會疊加，也就是說垂直方向上，較寬的外邊距決定兩個(gè)元素最終離多遠(yuǎn)，水平外邊距不疊加。對于水平相鄰的元素，它們的水平間距是相鄰?fù)膺吘嘀?br> 盒模型結(jié)論：
一、沒有(就是沒有設(shè)置 width 的)寬度的元素始終會擴(kuò)展到填滿其父元素的寬度為止。添加水平邊框、內(nèi)邊距和外邊距，會導(dǎo)致內(nèi)容寬度減少，減少量等于水平邊框、內(nèi)邊距和外邊距的和。
二、為設(shè)定了寬度的盒子添加邊框、內(nèi)邊距和外邊距，會導(dǎo)致盒子擴(kuò)展得更寬。實(shí)際上，盒子的 width 屬性設(shè)定的只是盒子內(nèi)容區(qū)的寬度，而非盒子要占據(jù)的水平寬度。
