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

CSS 規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明

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

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

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

派生選擇器：通過依據(jù)元素在其位置的上下文關(guān)系來定義樣式

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

標(biāo)簽選擇器沒前綴，id選擇器前綴為“#”，class選擇器前綴為“.”

#sidebar p .content{}

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

2.內(nèi)部樣式表
當(dāng)單個文檔需要特殊的樣式時，就應(yīng)該使用內(nèi)部樣式表。你可以使用

3.內(nèi)聯(lián)樣式
當(dāng)樣式僅需要在一個元素上應(yīng)用一次時。要使用內(nèi)聯(lián)樣式，你需要在相關(guān)的標(biāo)簽內(nèi)使用樣式（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（默認(rèn)屬性，水平和垂直方向上重復(fù)） | repeat-x | repeat-y（指定方向上重復(fù)） | no-repeat（只顯示一次，不重復(fù)）| inherit（繼承父元素的 background-repeat 屬性）
3.background-position：成對出現(xiàn)。相對父布局的上，左相對偏移。
4.background-size：percentage會讓圖片失真。cover是讓圖片按比例放大到最大，填充父布局。contain是讓圖片按比例放大，讓圖片在父布局內(nèi)全部顯示。
5.可以統(tǒng)一用background：background: url("~@/assets/images/zk_bs_icon.png") center center no-repeat;

文本
1.text-indent：首行縮進(jìn)，針對塊級元素，可能的值 length | % | inherit。p {text-indent:50px;}
2.text-align：只針對元素的內(nèi)容，不影響元素。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：規(guī)定元素的字體系列。可以把多個字體名稱作為一個“回退”系統(tǒng)來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。逗號分隔，當(dāng)字體名中有一個或多個空格（比如 New York），或者如果字體名包括 # 或 $ 之類的符號，需要在 font-family 聲明中加引號。p {font-family: Times, TimesNR, "New Century Schoolbook", Georgia, "New York", serif;}
2.font-style：定義字體的風(fēng)格，斜體、傾斜或正常字體。
3.font-weight：設(shè)置文本的粗細(xì)。
4.font-size：結(jié)合百分比和 EM 來設(shè)置文字大小。1em 等于當(dāng)前的字體尺寸。如果一個元素的 font-size 為 16 像素，那么對于該元素，1em 就等于 16 像素。在設(shè)置字體大小時，em 的值會相對于父元素的字體大小改變。瀏覽器中默認(rèn)的文本大小是 16 像素。因此 1em 的默認(rèn)尺寸是 16 像素。為 body 元素（父元素）以百分比設(shè)置默認(rèn)的 font-size 值：

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

連接樣式
鏈接的四種狀態(tài)：a:link - 普通的、未被訪問的鏈接；a:visited - 用戶已訪問的鏈接；a:hover - 鼠標(biāo)指針位于鏈接的上方；a:active - 鏈接被點(diǎn)擊的時刻。
當(dāng)為鏈接的不同狀態(tài)設(shè)置樣式時，請按照以下次序規(guī)則：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 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸，但是會增加元素框的總尺寸。

padding：padding 屬性接受長度值或百分比值，但不允許使用負(fù)值?？梢园凑?strong>上、右、下、左的順序分別設(shè)置各邊的內(nèi)邊距，各邊均可以使用不同的單位或百分比值：h1 {padding: 10px 0.25em 2ex 20%;}。百分?jǐn)?shù)值是相對于其父元素的 width 計算的。

margin：這個屬性接受任何長度單位、百分?jǐn)?shù)值甚至允許負(fù)值，auto（瀏覽器計算外邊距）?？梢园凑?strong>上、右、下、左的順序分別設(shè)置，百分?jǐn)?shù)是相對于父元素的 width 計算的。
值復(fù)制：如果缺少左外邊距的值，則使用右外邊距的值。如果缺少下外邊距的值，則使用上外邊距的值。如果缺少右外邊距的值，則使用上外邊距的值。

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 */

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

一切皆為框

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

CSS定位機(jī)制

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

position屬性

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

CSS浮動

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

clear 屬性：規(guī)定元素的哪一側(cè)不允許其他浮動元素。

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

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

This paragraph

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

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

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

  

    
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}    /* 鼠標(biāo)移動到鏈接上 */
a:active {color: #0000FF}    /* 選定的鏈接 */
a.red : visited {color: #FF0000}
CSS Syntax

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

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

透明屬性
IE9, Firefox, Chrome, Opera 和 Safari 使用屬性 opacity 來設(shè)定透明度。opacity 屬性能夠設(shè)置的值從 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 規(guī)則使你有能力在相同的樣式表中，使用不同的樣式規(guī)則來針對不同的媒介。下面這個例子中的樣式告知瀏覽器在顯示器上顯示 14 像素的 Verdana 字體。但是假如頁面需要被打印，將使用 10 個像素的 Times 字體。注意：font-weight 被設(shè)置為粗體，不論顯示器還是紙媒介：

....