1、希望邊框出現，必須聲明一個樣式，border-style。比如border-style: solid; 因爲其默認值是none，不會顯示。
2、border-style相關屬性單詞，便於理解記憶
| dotted | 英[ˈdɒtɪd] | 美[ˈdɑ:tɪd] |
| adj. |
| v. |
| dashed | 英[dæʃt] |
| n. |
| v. |
| solid | 英[ˈsɒlɪd] | 美[ˈsɑ:lɪd] |
| adj. |
| n. |
| groove | 英[gru:v] | 美[ɡruv] |
| n. |
| vt. |
| vi. |
3、外邊距合併：
只有普通文檔流中塊框的垂直外邊距纔會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。
4、
行框和行內框：
- 行內框只是一個概念，它無法顯示出來，但是它又確實存在
- 它的高度就是行高
- 在沒有其他因素（padding）影響的時候，行內框等於內容區域
- 行框（line box）。同行內框類似，行框是指本行的一個虛擬的矩形框
- 行框高度等於本行內所有元素中行高最大的值
行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱爲行框（Line
Box），行框的高度總是足以容納它包含的所有行內框。不過，設置行高可以增加這個框的高度。
5、
相對定位是“相對於”元素在文檔中的初始位置。
絕對定位是“相對於”最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼“相對於”最初的包含塊。
6、
| purple | 英[ˈpɜ:pl] | 美[ˈpɜ:rpl] |
| adj. |
| n. |
| vt. |
7、css多類選擇器
.important.warning {background:silver;}8、
類選擇器和 ID 選擇器可能是區分大小寫的。這取決於文檔的語言。HTML 和 XHTML 將類和 ID 值定義爲區分大小寫。
9、屬性選擇器
將同時有 href 和 title 屬性的 HTML 超鏈接的文本設置爲紅色
a[href][title] {color:red;}
10、
根據部分屬性值選擇
如果需要根據屬性值中的詞列表的某個詞進行選擇，則需要使用波浪號（~）。
p[class~="important"] {color: red;}
能應用於任何屬性
11、
子串匹配屬性選擇器
| 類型 | 描述 |
|---|---|
| [abc^="def"] | 選擇 abc 屬性值以 "def" 開頭的所有元素 |
| [abc$="def"] | 選擇 abc 屬性值以 "def" 結尾的所有元素 |
| [abc*="def"] | 選擇 abc 屬性值中包含子串 "def" 的所有元素 |
舉例：
希望對指向 W3School 的所有鏈接應用樣式
a[href*="w3school.com.cn"] {color: red;}
12、
特定屬性選擇器
*[lang|="en"] {color: red;}
上面這個規則會選擇 lang 屬性等於 en 或以 en- 開頭的所有元素。
注意：一定是以en或者
en- 開頭，諸如eng ，enfg這樣的不行
13、 後代選擇器示例： h1 em{ color:red; }
兩個元素之間的層次間隔可以是無限的。
14、
子元素選擇器
希望選擇只作爲 h1 元素子元素的 strong 元素 h1
>
strong {color:red;}
15、結合後代選擇器和子選擇器
table.company td > p
選擇作爲 td 元素子元素的所有 p 元素，這個 td 元素本身從 table 元素繼承，該 table 元素有一個包含 company 的 class 屬性。
16、
相鄰兄弟選擇器 如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器
要增加緊接在 h1 元素後出現的段落的上邊距，可以這樣寫：
h1 + p {margin-top:50px;}
這個選擇器讀作：“選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素”。
17、
相鄰兄弟結合符還可以結合其他結合符：
html > body table + ul {margin-top:20px;}
這個選擇器解釋爲：選擇緊接在 table 元素後出現的所有兄弟 ul 元素，該 table 元素包含在一個 body 元素中，body 元素本身是 html 元素的子元素。
18、錨僞類
a:link {color: #FF0000}
/* 未訪問的鏈接 */a:visited {color: #00FF00}
/* 已訪問的鏈接 */a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */a:active {color: #0000FF} /* 選定的鏈接 */提示：在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，纔是有效的。
提示：在 CSS 定義中，a:active 必須被置於 a:hover 之後，纔是有效的。
提示：僞類名稱對大小寫不敏感。
19、:first-child 選擇器用於選取屬於其父元素的首個子元素的指定選擇器。
這解釋真拗口。。
{
background:yellow;
p:first-child i{
background:yellow;
}
看上述例子，比如p的父親是body，那麼這個選擇的就是body下的第一個P元素，會把第一個P內的所有i元素都賦成黃色背景
20、
設置每個 <ul> 的首個子元素，並設置其樣式：
ul>:first-child{
background:yellow;
}
21、:lang選擇器
選擇帶有以 "en" 開頭的 lang 屬性值的每個 <p> 元素，並設置其樣式：
p:lang(en){
background:yellow;
}
22、僞類
23、僞元素
24、 :lang 僞類
:lang 僞類使你有能力爲不同的語言定義特殊的規則。在下面的例子中，:lang 類爲屬性值爲 no 的 q 元素定義引號的類型：
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<p>文字<q
</body></html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}</style>
</head>
<body>
<p>文字<q
lang="no">段落中的引用的文字</q>文字</p></body></html>
25、圖像透明度
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
值越小，越透明
26、
27、
28、
29、
30、
