一：CSS了解
CSS 概述：
- CSS 指層疊樣式表 (Cascading Style Sheets)
- 樣式定義如何顯示 HTML 元素
- 樣式通常存儲在樣式表中
- 把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問題
- 外部樣式表可以極大提高工作效率
- 外部樣式表通常存儲在 CSS 文件中
- 多個樣式定義可層疊為一
層疊次序
當(dāng)同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢硅则？
一般而言婴渡，所有的樣式會根據(jù)下面的規(guī)則層疊于一個新的虛擬樣式表中蝇裤，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)坡贺。
1、 瀏覽器缺省設(shè)置
2蔑鹦、 外部樣式表
3逗概、 內(nèi)部樣式表（位于 <head> 標(biāo)簽內(nèi)部）
4弟晚、 內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）
因此，內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）擁有最高的優(yōu)先權(quán)逾苫，這意味著它將優(yōu)先于以下的樣式聲明：<head> 標(biāo)簽中的樣式聲明卿城，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）铅搓。
二瑟押、CSS 基礎(chǔ)語法
CSS 規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明星掰。
selector {declaration1; declaration2; ... declarationN }
選擇器通常是您需要改變樣式的 HTML 元素多望。
每條聲明由一個屬性和一個值組成。
屬性（property）是您希望設(shè)置的樣式屬性（style attribute）蹋偏。每個屬性有一個值。屬性和值被冒號分開至壤。
selector {property: value}
下面這行代碼的作用是將 h1 元素內(nèi)的文字顏色定義為紅色威始，同時將字體大小設(shè)置為 14 像素。 在這個例子中像街，h1 是選擇器黎棠，color 和 font-size 是屬性，red 和 14px 是值镰绎。
h1 {color:red; font-size:14px;}
值的不同寫法和單位:
除了英文單詞 red脓斩，我們還可以使用十六進(jìn)制的顏色值 #ff0000：
p { color: #ff0000; }
為了節(jié)約字節(jié)，我們可以使用 CSS 的縮寫形式：
p { color: #f00; }
我們還可以通過兩種方法使用 RGB 值：
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
請注意畴栖，當(dāng)使用 RGB 百分比時随静，即使當(dāng)值為 0 時也要寫百分比符號。但是在其他的情況下就不需要這么做了。比如說燎猛，當(dāng)尺寸為 0 像素時恋捆，0 之后不需要使用 px 單位，因為 0 就是 0重绷，無論單位是什么沸停。
三、CSS 派生選擇器
通過依據(jù)元素在其位置的上下文關(guān)系來定義樣式昭卓，你可以使標(biāo)記更加簡潔愤钾。
在 CSS1 中，通過這種方式來應(yīng)用規(guī)則的選擇器被稱為上下文選擇器 (contextual selectors)候醒，這是由于它們依賴于上下文關(guān)系來應(yīng)用或者避免某項規(guī)則能颁。在 CSS2 中，它們稱為派生選擇器火焰，但是無論你如何稱呼它們劲装，它們的作用都是相同的。 派生選擇器允許你根據(jù)文檔的上下文關(guān)系來確定某個標(biāo)簽的樣式昌简。通過合理地使用派生選擇器占业，我們可以使 HTML 代碼變得更加整潔。
比方說纯赎，你希望列表中的 strong 元素變?yōu)樾斌w字谦疾，而不是通常的粗體字，可以這樣定義一個派生選擇器：
li strong {
font-style: italic;
font-weight: normal;
}
四犬金、CSS 框模型概述##
CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容念恍、內(nèi)邊距、邊框 和 外邊距 的方式晚顷。更多
CSS 框模型概述:#####
元素框的最內(nèi)部分是實際的內(nèi)容峰伙，直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素的背景该默。內(nèi)邊距的邊緣是邊框瞳氓。邊框以外是外邊距，外邊距默認(rèn)是透明的栓袖，因此不會遮擋其后的任何元素匣摘。
提示：背景應(yīng)用于由內(nèi)容和內(nèi)邊距、邊框組成的區(qū)域裹刮。
內(nèi)邊距音榜、邊框和外邊距都是可選的，默認(rèn)值是零捧弃。但是赠叼，許多元素將由用戶代理樣式表設(shè)置外邊距和內(nèi)邊距。可以通過將元素的 margin 和 padding 設(shè)置為零來覆蓋這些瀏覽器樣式梅割。這可以分別進(jìn)行霜第，也可以使用通用選擇器對所有元素進(jìn)行設(shè)置：
* {
margin: 0;
padding: 0;
}
在 CSS 中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度户辞。增加內(nèi)邊距泌类、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸，但是會增加元素框的總尺寸底燎。假設(shè)框的每個邊上有 10 個像素的外邊距和 5 個像素的內(nèi)邊距刃榨。如果希望這個元素框達(dá)到 100 個像素，就需要將內(nèi)容的寬度設(shè)置為 70 像素双仍，請看下圖：
提示：內(nèi)邊距枢希、邊框和外邊距可以應(yīng)用于一個元素的所有邊，也可以應(yīng)用于單獨(dú)的邊朱沃。
提示：外邊距可以是負(fù)值苞轿，而且在很多情況下都要使用負(fù)值的外邊距。
術(shù)語翻譯
element : 元素逗物。
padding : 內(nèi)邊距搬卒，也有資料將其翻譯為填充。
border : 邊框翎卓。
margin : 外邊距契邀，也有資料將其翻譯為空白或空白邊。
padding 和 margin 統(tǒng)一地稱為內(nèi)邊距和外邊距失暴。邊框內(nèi)的空白是內(nèi)邊距坯门，邊框外的空白是外邊距。
W3C盒模型與IE盒模型的區(qū)別###
IE盒模型
IE盒模型是指在ie678怪異模式（不添加 doctype）下使用 ie 盒模型逗扒，寬度=邊框+padding+內(nèi)容寬度
w3c盒模型（標(biāo)準(zhǔn)盒模型）
chrome古戴， ie9+, ie678(添加 doctype) 使用標(biāo)準(zhǔn)盒模型
PS：兩種盒模型的寬度計算是不一樣的；
1.IE盒模型的寬度計算：寬度=邊框+padding+內(nèi)容寬度矩肩；
2.w3c盒模型的寬度計算：寬度= 內(nèi)容寬度现恼；
五、CSS 浮動##
浮動的框可以向左或向右移動蛮拔，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止述暂。 由于浮動框不在文檔的普通流中痹升，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣建炫。
CSS float 屬性######
在 CSS 中，我們通過 float 屬性實現(xiàn)元素的浮動疼蛾。float屬性值可以是left肛跌、right、none、inherit衍慎。CSS float 屬性
行框和清理######
浮動框旁邊的行框被縮短转唉，從而給浮動框留出空間，行框圍繞浮動框稳捆。
CSS clear 屬性######
要想阻止行框圍繞浮動框赠法，需要對該框應(yīng)用 clear 屬性。[CSS clear屬性](</div>http://www.w3school.com.cn/cssref/pr_class_clear.asp)
屬性的值可以是 left乔夯、right砖织、inherit、both 或 none末荐，它表示框的哪些邊不應(yīng)該挨著浮動框侧纯。為了實現(xiàn)這種效果，在被清理的元素的上外邊距上添加足夠的空間甲脏，使元素的頂邊緣垂直下降到浮動框下面.
