Part 1 :盒模型(box model)
"every element in web design is a rectangular box."
在一個文檔中钢颂，每個元素都被表示為一個矩形的盒子。在CSS中计螺，使用標(biāo)準(zhǔn)盒模型(也可叫做框模型)描述這些矩形盒子中的每一個订咸。這個模型描述了元素所占空間的內(nèi)容把还。
每個盒子有四個邊：外邊距邊(margin), 邊框邊(border), 內(nèi)填充邊(padding) 與 內(nèi)容邊(content)。
1-設(shè)置外邊距邊(margin)
外邊距區(qū)域 margin area用空白區(qū)域擴(kuò)展邊框區(qū)域藻雌，以分開相鄰的元素孽拷。它的大小為 margin-box 的高寬吨掌。外邊距區(qū)域大小由 margin-top, margin-right, margin-bottom, margin-left及簡寫屬性 margin控制半抱。
| 屬性名稱 | 屬性用途 |
|---|---|
| margin-top | 設(shè)置元素的頂部外邊距 |
| margin-right | 設(shè)置與元素相關(guān)聯(lián)的盒子模型的右外邊距 |
| margin-bottom | 用于設(shè)置元素的底部外邊距 |
| margin-left | 設(shè)置與元素相關(guān)聯(lián)的盒子模型的左外邊距 |
上面屬性均允許使用負(fù)值
注意:這些值的順序是從上外邊距 (top) 開始圍著元素順時針旋轉(zhuǎn)的：
即:margin: top right bottom left
margin 屬性接受任何長度單位脓恕，可以是像素、英寸窿侈、毫米或 em炼幔。
margin 可以設(shè)置為 auto。也可為外邊距設(shè)置長度值或百分比(百分?jǐn)?shù)是相對于父元素的 width 計算的).
單邊外邊距屬性
可以使用單邊外邊距屬性為元素單邊上的外邊距設(shè)置值史简。
假設(shè)需要把 p 元素的左外邊距設(shè)置為 20px乃秀。可以采用以下方法：p {margin-left: 20px;}
值復(fù)制
若有值相同的邊距值圆兵，則不用將四個屬性值全部寫出
CSS 定義了一些規(guī)則跺讯，允許為外邊距指定少于 4 個值。規(guī)則如下：
- 如果缺少左外邊距的值殉农，則使用右外邊距的值刀脏。
- 如果缺少下外邊距的值，則使用上外邊距的值超凳。
- 如果缺少右外邊距的值愈污，則使用上外邊距的值。
例子 要設(shè)置上 下 右 左邊距值為0.25em 1em 0.5em 0.5em.也就是說右邊和下邊的值相同轮傍。
h1 {margin: 0.25em 1em 0.5em;}
2-設(shè)置邊框邊(border)
邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線,CSS border 屬性允許你規(guī)定元素邊框的樣式(border-style)暂雹、寬度(border-style)和顏色(border-color)。
| 屬性名稱 | 屬性用途 | 使用方法 |
|---|---|---|
| border-width | 為邊框指定寬度 | 指定長度值(px, em)或使用 3 個關(guān)鍵字之一 (thin 创夜、medium（默認(rèn)值） 和 thick) |
| border-style | 設(shè)置邊框樣式 | 10 個不同的非 inherit 樣式 |
| border-color | 設(shè)置邊框顏色 | 使用border-color屬性 |
同樣杭跪，border屬性的值也采用了 top-right-bottom-left 的順序
3-設(shè)置內(nèi)填充邊(padding)
CSS padding 屬性定義元素邊框與元素內(nèi)容之間的空白區(qū)域,padding 屬性接受長度值或百分比值，但不允許使用負(fù)值驰吓。
可以按照上揍魂、右、下棚瘟、左的順序分別設(shè)置各邊的內(nèi)邊距现斋，各邊均可以使用不同的單位(em/ ex / px)或百分比.
| 屬性名稱 | 屬性用途 |
|---|---|
| padding-top | 設(shè)置元素的上內(nèi)邊距 |
| padding-right | 設(shè)置與元素右內(nèi)邊距 |
| padding-bottom | 用于設(shè)置元素的下內(nèi)邊距 |
| padding-left | 設(shè)置元素的左內(nèi)邊距 |
4-設(shè)置內(nèi)容邊(content)
內(nèi)容區(qū)域content area 是包含元素真實內(nèi)容的區(qū)域。它通常包含背景偎蘸、顏色或者圖片等庄蹋，位于內(nèi)容邊界的內(nèi)部瞬内，它的大小為內(nèi)容寬度 或 content-box寬及內(nèi)容高度或content-box高。
content 屬性與 :before 及 :after 偽元素配合使用限书，來插入生成內(nèi)容虫蝶。
關(guān)于偽元素:"CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree."
即偽元素用于創(chuàng)建一些不在文檔樹中的元素，并為其添加樣式倦西。更多詳情以后會專門整理~
A-content與:before 偽元素配合使用：
該偽元素允許創(chuàng)作人員在元素內(nèi)容的最前面插入生成內(nèi)容
B-content與:after偽元素配合使用能真，在元素之后添加內(nèi)容
例如:如何使用 :before 在元素內(nèi)容之前插入圖像
<!DOCTYPE html >
<html>
<head>
<style type="text/css">
h1:before {content:url(/logo_white.gif)}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
</body>
</html>
CSS3中新增的盒模型計算方式：box-sizing
box-sizing 屬性允許您以特定的方式定義匹配某個區(qū)域的特定元素。
語法:box-sizing: content-box|border-box|inherit;
| 值 | 描述 |
|---|---|
| content-box | 這是由 CSS2.1 規(guī)定的寬度高度行為扰柠。寬度和高度分別應(yīng)用到元素的內(nèi)容框粉铐。在寬度和高度之外繪制元素的內(nèi)邊距和邊框。 |
| border-box | 為元素設(shè)定的寬度和高度決定了元素的邊框盒卤档。就是說蝙泼，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度劝枣。 |
| inherit | 規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值汤踏。 |
CSS3中新增的邊框?qū)傩?/h5>
- border-radius:創(chuàng)建圓角邊框
- box-shadow:向矩形添加陰影
- border-image:使用圖片來繪制邊框
Part2:選擇器（Selectors）
CSS選擇器用于選擇你想要的元素的樣式的模式。
CSS選擇器用于選擇你想要的元素的樣式的模式。
選擇器的類別:
類選擇器,id選擇器,屬性選擇器 ,派生選擇器 舔腾，后代(包含)選擇器,子元素選擇器,相鄰兄弟選擇器
1-類選擇器:允許以一種獨立于文檔元素的方式來指定樣式溪胶。
該選擇器可以單獨使用，也可以與其他元素結(jié)合使用.
語法: * 選擇器名稱{樣式}
用法:
- 獨立使用
- 多類選擇器:通過把多個類選擇器鏈接在一起稳诚，僅可以選擇同時包含這些類名的元素（類名的順序不限）哗脖。
- 結(jié)合元素選擇器來使用。
eg.若希望只有段落顯示為紅色文本：
p.important {color:red;}
eg.假設(shè) class 為 important 的所有元素都是粗體采桃，而 class 為 warning 的所有元素為斜體懒熙，class 中同時包含 important 和 warning 的所有元素還有一個銀色的背景 。就可以寫作：
.important.warning {background:silver;}
2-id選擇器:可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式普办。
語法:# 選擇器名稱 {樣式}
用法:
- 獨立使用
- 與派生選擇器一起使用:
eg.
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
3-屬性選擇器 :可以為擁有指定屬性的 HTML 元素設(shè)置樣式
語法 :元素名稱[指定屬性]{樣式}
用法:
單個屬性值
eg:把包含標(biāo)題（title）的所有元素變?yōu)榧t色
*[title] {color:red;}根據(jù)具體屬性值選擇
eg.將指向 Web 服務(wù)器上某個指定文檔的超鏈接變成紅色
a[] {color: red;}子串匹配屬性選擇器
| 類型 | 描述 |
|---|---|
| [abc^="def"] | 選擇 abc 屬性值以 "def" 開頭的所有元素 |
| [abc$="def"] | 選擇 abc 屬性值以 "def" 結(jié)尾的所有元素 |
| [abc*="def"] | 選擇 abc 屬性值中包含子串 "def" 的所有元素 |
eg.
- 特定屬性選擇類型
eg.選擇 lang 屬性等于 en 或以 en- 開頭的所有元素
*[lang|="en"] {color: red;} - 根據(jù)部分屬性值選擇
eg.選擇 class 屬性中包含 important 的元素
p[class~="important"] {color: red;}
4-派生選擇器：依據(jù)元素在其位置的上下文關(guān)系來定義樣式
語法:元素名{樣式}
5-后代(包含)選擇器:可以定義后代選擇器來創(chuàng)建一些規(guī)則工扎，使這些規(guī)則在某些文檔結(jié)構(gòu)中起作用，而在另外一些結(jié)構(gòu)中不起作用衔蹲。
語法:在后代選擇器中肢娘，規(guī)則左邊的選擇器一端包括兩個或多個用空格分隔的選擇器。選擇器之間的空格是一種結(jié)合符（combinator）舆驶。每個空格結(jié)合符可以解釋為“... 在 ... 找到”橱健、“... 作為 ... 的一部分”、“... 作為 ... 的后代”沙廉，但是要求必須從右向左讀選擇器拘荡。
eg.希望只對 h1 元素中的 em 元素應(yīng)用樣式
h1 em {color:red;}
上面這個規(guī)則會把作為 h1 元素后代的 em 元素的文本變?yōu)?紅色。其他 em 文本（如段落或塊引用中的 em）則不會被這個規(guī)則選中.
6-子元素選擇器:縮小范圍撬陵，只選擇某個元素的子元素
eg.選擇只作為 h1 元素子元素的 strong 元素
h1 > strong {color:red;}
語法解釋:子選擇器使用了大于號（子結(jié)合符）珊皿。
子結(jié)合符兩邊可以有空白符网缝，這是可選的。
7-相鄰兄弟選擇器:可選擇緊接在另一元素后的元素蟋定，且二者有相同父元素
語法:相鄰兄弟選擇器使用了加號（+）粉臊，即相鄰兄弟結(jié)合符（Adjacent sibling combinator）。與子結(jié)合符一樣驶兜，相鄰兄弟結(jié)合符旁邊可以有空白符扼仲。
eg.要增加緊接在 h1 元素后出現(xiàn)的段落的上邊距
h1 + p {margin-top:50px;}
選擇器分組
可以將任意多個選擇器分組在一起，對此沒有任何限制抄淑。
例如屠凶，如果想把很多元素顯示為灰色，可以使用類似如下的規(guī)則：
body, h2, p, table, th, td, pre, strong, em {color:gray;}
提示：通過分組蝇狼，創(chuàng)作者可以將某些類型的樣式“壓縮”在一起阅畴，這樣就可以得到更簡潔的樣式表倡怎。
選擇器的優(yōu)先級
瀏覽器通過優(yōu)先級來判斷哪一些屬性值與一個元素最為相關(guān)迅耘，從而在該元素上應(yīng)用這些屬性值。優(yōu)先級是基于不同種類選擇器組成的匹配規(guī)則监署。
優(yōu)先級是如何計算的颤专？
優(yōu)先級就是分配給指定的CSS聲明的一個權(quán)重，它由 匹配的選擇器中的 每一種選擇器類型的 數(shù)值 決定钠乏。
而當(dāng)優(yōu)先級與多個CSS聲明中任意一個聲明的優(yōu)先級相等的時候栖秕，CSS中最后的那個聲明將會被應(yīng)用到元素上。
當(dāng)同一個元素有多個聲明的時候晓避，優(yōu)先級才會有意義簇捍。因為每一個直接作用于元素的CSS規(guī)則總是會接管/覆蓋（take over）該元素從祖先元素繼承而來的規(guī)則。
1俏拱、無條件優(yōu)先的屬性只需要在屬性后面使用 !important 暑塑。它會覆蓋頁面內(nèi)任何位置定義的元素樣式。當(dāng)然锅必，IE 6不支持這個屬性事格，于是它也成為一種hack被很多人所熟知，真正使命被人淡忘搞隐。
2驹愚、第二高位的優(yōu)先屬性是在html中給元素標(biāo)簽加style。由于該方法會造成CSS的難以管理劣纲，所以不推薦使用逢捺。
3、第三級優(yōu)先的屬性是由一個或多個id選擇器來定義的癞季。例如 #id{margin:0;} 會覆蓋 .classname{margin:3px;}劫瞳。
4棠耕、第四級的屬性由一個或多個 類選擇器、屬性選擇器柠新、偽類選擇器定義窍荧。如 .classname{margin:3px;} 會覆蓋 div{margin:6px;}
5、第五級由一個或多個 類型選擇器定義恨憎。如 div{margin:6px;} 覆蓋 *{margin:10px;} 蕊退。
