摘要：合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。定位一切皆為框或元素常常被稱為塊級元素。與之相反，和等元素稱為行內元素，這是因為它們的內容顯示在行中，即行內框。元素的位置通過以及屬性進行規定。

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明

選擇器的分組：用逗號將需要分組的選擇器分開

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

繼承：通過 CSS 繼承，子元素將繼承最高級元素所擁有的屬性。

派生選擇器：通過依據元素在其位置的上下文關系來定義樣式

li strong {
    font-style: italic;
    font-weight: normal;
  }

標簽選擇器沒前綴，id選擇器前綴為“#”，class選擇器前綴為“.”

#sidebar p .content{}

CSS的創建，類別
1.外部樣式表
當樣式需要應用于很多頁面時，外部樣式表將是理想的選擇。每個頁面使用 標簽鏈接到樣式表。 標簽在（文檔的）頭部

2.內部樣式表
當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用

3.內聯樣式
當樣式僅需要在一個元素上應用一次時。要使用內聯樣式，你需要在相關的標簽內使用樣式（style）屬性。

This is a paragraph

4.多重樣式
如果某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將從更具體的樣式表中被繼承過來。

背景
1.background-image：url(/i/eg_bg_03.gif)&url("~@/assets/images/zk_bs_icon.png")
2.background-repeat：repeat（默認屬性，水平和垂直方向上重復） | repeat-x | repeat-y（指定方向上重復） | no-repeat（只顯示一次，不重復）| inherit（繼承父元素的 background-repeat 屬性）
3.background-position：成對出現。相對父布局的上，左相對偏移。
4.background-size：percentage會讓圖片失真。cover是讓圖片按比例放大到最大，填充父布局。contain是讓圖片按比例放大，讓圖片在父布局內全部顯示。
5.可以統一用background：background: url("~@/assets/images/zk_bs_icon.png") center center no-repeat;

文本
1.text-indent：首行縮進，針對塊級元素，可能的值 length | % | inherit。p {text-indent:50px;}
2.text-align：只針對元素的內容，不影響元素。inherit屬性不支持IE。
3.word-spacing：字間距。p {word-spacing:25px;}
4.letter-spacing：字母間隔。h1 {letter-spacing:2px}
5.text-transform：控制文本的大小寫
6.white-space：處理元素中的空白符和換行符

字體
1.font-family：規定元素的字體系列。可以把多個字體名稱作為一個“回退”系統來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。逗號分隔，當字體名中有一個或多個空格（比如 New York），或者如果字體名包括 # 或 $ 之類的符號，需要在 font-family 聲明中加引號。p {font-family: Times, TimesNR, "New Century Schoolbook", Georgia, "New York", serif;}
2.font-style：定義字體的風格，斜體、傾斜或正常字體。
3.font-weight：設置文本的粗細。
4.font-size：結合百分比和 EM 來設置文字大小。1em 等于當前的字體尺寸。如果一個元素的 font-size 為 16 像素，那么對于該元素，1em 就等于 16 像素。在設置字體大小時，em 的值會相對于父元素的字體大小改變。瀏覽器中默認的文本大小是 16 像素。因此 1em 的默認尺寸是 16 像素。為 body 元素（父元素）以百分比設置默認的 font-size 值：

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

連接樣式
鏈接的四種狀態：a:link - 普通的、未被訪問的鏈接；a:visited - 用戶已訪問的鏈接；a:hover - 鼠標指針位于鏈接的上方；a:active - 鏈接被點擊的時刻。
當為鏈接的不同狀態設置樣式時，請按照以下次序規則：a:hover 必須位于 a:link 和 a:visited 之后。a:active 必須位于 a:hover 之后。

a:link {color:#FF0000;text-decoration:none;background-color:#B2FF99;}    // 字體顏色，去掉下劃線，背景色    
a:visited {color:#00FF00;text-decoration:none;background-color:#B2FF99;}    
a:hover {color:#FF00FF;text-decoration:none;background-color:#B2FF99;}    
a:active {color:#0000FF;text-decoration:none;background-color:#B2FF99;}

在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。

padding：padding 屬性接受長度值或百分比值，但不允許使用負值。可以按照上、右、下、左的順序分別設置各邊的內邊距，各邊均可以使用不同的單位或百分比值：h1 {padding: 10px 0.25em 2ex 20%;}。百分數值是相對于其父元素的 width 計算的。

margin：這個屬性接受任何長度單位、百分數值甚至允許負值，auto（瀏覽器計算外邊距）。可以按照上、右、下、左的順序分別設置，百分數是相對于父元素的 width 計算的。
值復制：如果缺少左外邊距的值，則使用右外邊距的值。如果缺少下外邊距的值，則使用上外邊距的值。如果缺少右外邊距的值，則使用上外邊距的值。

h1 {margin: 0.25em 1em 0.5em;}    /* 等價于 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}        /* 等價于 0.5em 1em 0.5em 1em */
p {margin: 1px;}            /* 等價于 1px 1px 1px 1px */

外邊框合并：外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。
注釋：只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對定位之間的外邊距不會合并。

一切皆為框

div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即“塊框”。與之相反，span 和 strong 等元素稱為“行內元素”，這是因為它們的內容顯示在行中，即“行內框”。display屬性規定元素應該生成的框的類型。

CSS定位機制

CSS 有三種基本的定位機制：普通流、浮動和絕對定位。除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。塊級框從上到下一個接一個地排列。行內框在一行中水平布置。由一行形成的水平框稱為行框（Line Box）。

position屬性

1.static：沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
2.relative：生成相對定位的元素，相對于其正常位置進行定位。元素框偏移某個距離，它原本所占的空間仍保留（移動元素會導致它覆蓋其它框）。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
3.absolute：元素框從文檔流完全刪除。生成絕對定位的元素，相對于 static 定位以外的第一個父元素即包含塊進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
4.fixed：元素框的表現類似于將 position 設置為 absolute，不過是相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
【提示：相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。"left（定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。）"，所以具有float的功能。即：left:20，效果相當于float：left再偏移20。同理"top", "right" 以及 "bottom"** 屬性】

CSS浮動

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣（即不占空間）。在 CSS 中，我們通過 float 屬性實現元素的浮動。

clear 屬性：規定元素的哪一側不允許其他浮動元素。

css 分組：假設希望 h2 元素和段落都有灰色：h2, p {color:gray;} .important,.warning {background:silver;}。逗號告訴瀏覽器，規則中包含兩個不同的選擇器。如果沒有這個逗號，那么規則的含義將完全不同。CSS2 引入了一種新的簡單選擇器 - 通配選擇器，顯示為一個星號（*）。該選擇器可以與任何元素匹配，就像是一個通配符。例如，下面的規則可以使文檔中的每個元素都為紅色：* {color:red;}

css 多類選擇器:在 HTML 中，一個 class 值中可能包含一個詞列表，各個詞之間用空格分隔。例如，如果希望將一個特定的元素同時標記為重要（important）和警告（warning），就可以寫作：

This paragraph

css 后代選擇器：在后代選擇器中，規則左邊的選擇器一端包括兩個或多個用空格分隔的選擇器。選擇器之間的空格是一種結合符（combinator）。比如，h1 em 選擇器可以解釋為 “作為 h1 元素后代的任何 em 元素”。【劃重點：1.必須空格隔開；2.影響xx元素的所有后代，不管嵌套層次多深。】

css 子元素選擇器：與后代選擇器相比，子元素選擇器（Child selectors）只能選擇作為某元素子元素（第一個）的元素。子結合符兩邊可以有空白符也可以沒有，這是可選的。

css 相鄰兄弟選擇器：相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素。
1.相同的父元素；
2.緊挨著的兩個元素；
3.只會改變其兄弟（后面）的元素樣式。
相鄰兄弟選擇器使用了加號（+），相鄰兄弟結合符旁邊可以有空白符也可以沒有。

  

    
List item 1
    
List item 2
    
List item 3
  
  

    
List item 1
    
List item 2
    
List item 3
  

css 偽類：css 偽類用于向某些選擇器添加特殊的效果。
語法：1.偽類的語法：selector : pseudo-class {property: value}；2.CSS 類也可與偽類搭配使用：selector.class : pseudo-class {property: value}

a:link {color: #FF0000}        /* 未訪問的鏈接 */
a:visited {color: #00FF00}    /* 已訪問的鏈接 */
a:hover {color: #FF00FF}    /* 鼠標移動到鏈接上 */
a:active {color: #0000FF}    /* 選定的鏈接 */
a.red : visited {color: #FF0000}
CSS Syntax

css 偽元素：css偽元素用于向某些選擇器設置特殊效果。
語法：1.偽元素的語法：selector:pseudo-element {property:value;}；2.CSS 類也可以與偽元素配合使用：：selector.class:pseudo-element {property:value;}

css 對齊
1.使用 margin 屬性來水平對齊：把左和右外邊距設置為 auto，規定的是均等地分配可用的外邊距（IE8 以及更早的版本中是無效的）。
2.使用 position 屬性進行左和右對齊：position:absolute;right:0px;
3.使用 float 屬性來進行左和右對齊

透明屬性
IE9, Firefox, Chrome, Opera 和 Safari 使用屬性 opacity 來設定透明度。opacity 屬性能夠設置的值從 0.0 到 1.0。值越小，越透明。IE8 以及更早的版本使用濾鏡 filter:alpha(opacity=x)。x 能夠取的值從 0 到 100。值越小，越透明。如果沒效果：background: rgba(0, 0, 0, 0.6);

img
{
opacity:0.4;
filter:alpha(opacity=40); /* 針對 IE8 以及更早的版本 */
}

css2 媒介類型
媒介類型(Media Types)允許你定義以何種媒介來提交文檔。文檔可以被顯示在顯示器、紙媒介或者聽覺瀏覽器等等。@media 規則使你有能力在相同的樣式表中，使用不同的樣式規則來針對不同的媒介。下面這個例子中的樣式告知瀏覽器在顯示器上顯示 14 像素的 Verdana 字體。但是假如頁面需要被打印，將使用 10 個像素的 Times 字體。注意：font-weight 被設置為粗體，不論顯示器還是紙媒介：

....