1.CSS基本概念
1.1 CSS的定義
CSS(Cascading Style Sheets)層疊樣式表，主要用于設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式
1.2 CSS樣式規則
CSS在書寫時需要遵循一定的規范，也就是CSS的樣式規則，具體格式如下：
h1{font-size:12px;color:#f00;}
/* 選擇器{樣式屬性1:屬性值;樣式屬性2:屬性值;...} */
在上面的樣式規則中:
選擇器用于指定CSS樣式作用的HTML對象，花括號內是對該對象設置的具體樣式。
屬性和屬性值以“鍵值對”的形式出現。
屬性是對指定的對象設置的樣式屬性，例如字體大小、文本顏色等。
屬性和屬性值之間用英文“:”連接。
多個“鍵值對”之間用英文“;”進行區分。
1.3 HTML頁面引入CSS的幾種方式
1.3.1 行內式（內聯樣式）
通過標簽的style屬性來設置元素的樣式，其基本語法格式如下
<div style="width:100px;height:100px;background-color:#fff">text</div>
<!-- <標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標簽名> -->
語法中style是標簽的屬性，實際上任何HTML標簽都擁有style屬性，用來設置行內式。其中屬性和值的書寫規范與CSS樣式規則相同，行內式只對其所在的標簽及嵌套在其中的子標簽起作用
1.3.2 內部樣式表（內嵌式）
內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標簽中，并且用style標簽定義，其基本語法格式如下:
<head>
<style type="text/css">
.a>div {
height: 0;
}
</style>
</head>
語法中，style標簽一般位于head標簽中title標簽之后，也可以把他放在HTML文檔的任何地方
1.3.3 外部樣式表（外鏈式）
鏈入式是將所有的樣式放在一個或多個以.css為擴展名的外部樣式表文件中，通過link標簽將外部樣式表文件鏈接到HTML文檔中，其基本語法格式如下：
<head>
<link href="CSS文件的路徑" type="text/css" rel="stylesheet" />
</head>
該語法中，link標簽需要放在head頭部標簽中，并且必須指定link標簽的三個屬性，具體如下：
-href：定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。
-type：定義所鏈接文檔的類型，在這里需要指定為“text/css”，表示鏈接的外部文件為CSS樣式表。
-rel：定義當前文檔與被鏈接文檔之間的關系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件。
1.3.4 導入式
導入式與鏈入式相同，都是針對外部樣式表文件的，在css文本開頭使用@import引入其他css文件的內容，其基本語法格式如下
@import url(css文件路徑);或 @import "css文件路徑";
/* 在此還可以存放其他CSS樣式*/
2.CSS選擇器
要想將CSS樣式應用于特定的HTML元素，首先需要找到該目標元素。在CSS中，執行這一任務的樣式規則部分被稱為選擇器
2.1 CSS基本選擇器
2.1.1 標簽選擇器
標簽選擇器是指用HTML標簽名稱作為選擇器，按標簽名稱分類，為頁面中某一類標簽指定統一的CSS樣式
h1 {font-size:12px;color:#f00;}
/* 標簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } */
2.1.2 類選擇器
類選擇器使用“.”（英文點號）進行標識，后面緊跟類名
.name {font-size:12px;color:#f00;}
/* .類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } */
/* 標簽調用的時候用 class=“類名” 即可 */
注意：
1.長名稱或詞組可以使用中橫線來為選擇器命名。
2.不建議使用“_”下劃線來命名CSS選擇器。
3.不要用純數字、中文等命名， 盡量使用英文字母來表示。
4.盡量不要使用標簽名作為類名，比如 .p .h1 這是不合法的。
2.1.3 id選擇器
id選擇器使用“#”進行標識，后面緊跟id名
#id {font-size:12px;color:#f00;}
/* #id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } */
該語法中，id名即為HTML元素的id屬性值，大多數HTML元素都可以定義id屬性，元素的id值是唯一的，只能對應于文檔中某一個具體的元素
2.1.4 通配符選擇器
通配符選擇器用“*”號表示，他是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素
* {font-size:12px;color:#f00;}
2.2 CSS復合選擇器
2.2.1 交集選擇器
交集選擇器由兩個選擇器構成，其中第一個為標簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格
p.name {font-size:12px;color:#f00;}
2.2.2 并集選擇器
并集選擇器（css選擇器分組）是各個選擇器通過逗號連接而成的，任何形式的選擇器（包括標簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式
div,.name,#id {font-size:12px;color:#f00;}
2.2.3 后代選擇器
后代選擇器又稱為包含選擇器，用來選擇元素或元素組的后代，其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔。當標簽發生嵌套時，內層標簽就成為外層標簽的后代
.name div {font-size:12px;color:#f00;}
2.2.4 子元素選擇器
子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標簽寫在前面，子級標簽寫在后面，中間跟一個 > 進行連接
.name>div {font-size:12px;color:#f00;}
注意：這里的子元素是直接子元素，不包含孫子及之后的元素
2.2.5 偽類
偽類可以用于文檔狀態的改變、動態的事件等，例如用戶的鼠標點擊某個元素、未被訪問的鏈接
- :link 偽類將應用于未被訪問過的鏈接
- :hover 偽類將應用于有鼠標指針懸停于其上的元素。
- :active 偽類將應用于被激活的元素，如被點擊的鏈接、被按下的按鈕等。
- :visited 偽類將應用于已經被訪問過的鏈接
- :focus 偽類將應用于擁有鍵盤輸入焦點的元素。（ie8以上支持）
鏈接偽類，他們規定執行有順序的，不能隨便更改位置：
要按照 :link --> :visited --> :hover --> :active 的順序。
3.CSS三大特性
3.1 層疊性
所謂層疊性是指多種CSS樣式的疊加。
比如先給某個標簽指定了內部文字顏色為紅色，接著又指定了顏色為藍色，此時出現一個標簽指定了相同樣式不同值的情況，這就是樣式沖突。
一般情況下，如果出現樣式沖突，則會按照CSS書寫的順序，以最后的樣式為準。 (前提是用于設定該樣式的兩個選擇器優先級相同)
3.2 繼承性
所謂繼承性是指書寫CSS樣式表時，子標簽會繼承父標簽的某些樣式，如文本顏色和字號。想要設置一個可繼承的屬性，只需將它應用于父元素即可。
并不是所有的CSS屬性都可以繼承，例如，下面的屬性就不具有繼承性：邊框、外邊距、內邊距、背景、定位、元素高
3.3 優先級
定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，這時就會出現優先級的問題
此時，就要考慮選擇器的權重大小，權重大的選擇器優先級高，它設置的樣式就會生效
關于css權重，我們需要一套計算公式來去計算，這個就是 CSS Specificity，我們稱為CSS 特性或稱非凡性，它是一個衡量CSS值優先級的一個標準 具體規范入如下：
specificity用一個四位的數 字串(CSS2是三位)來表示，更像四個級別，值從左到右，左面的最大，一級大于一級，數位之間沒有進制，級別之間不可超越
繼承或者* 的貢獻值0,0,0,0
每個元素（標簽）貢獻值為0,0,0,1
每個類，偽類貢獻值為0,0,1,0
每個ID貢獻值為0,1,0,0
每個行內樣式貢獻值1,0,0,0
每個!important貢獻值∞ 無窮大
注意： 數位之間沒有進制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不會存在10個div能趕上一個類選擇器的情況
4.字體樣式屬性
4.1 font-size:字號大小
font-size屬性用于設置字號，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位。其中，相對長度單位比較常用，推薦使用像素單位px，絕對長度單位使用較少
單位：
- em 相對父元素文本字體大小，如果父元素沒有設置字體大小，則一直往上找，如果都沒有，則按瀏覽器默認字體大小設置
- px 像素
- in 英寸
- cm 厘米
- mm 毫米
- pt 點
4.2 font-family:字體系列
font-family屬性用于設置字體。網頁中常用的字體有宋體、微軟雅黑、黑體等，例如將網頁中所有段落文本的字體設置為微軟雅黑，可以使用如下CSS樣式代碼：
p{ font-family:"微軟雅黑";}
可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體。
常用技巧：
- 現在網頁中普遍使用14px+。
- 盡量使用偶數的數字字號。ie6等老式瀏覽器支持奇數會有bug。
- 各種字體之間必須使用英文狀態下的逗號隔開。
- 中文字體需要加英文狀態下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位于中文字體名之前。
- 如果字體名中包含空格、#、$等符號，則該字體必須加英文狀態下的單引號或雙引號，例如font-family: "Times New Roman";。
- 盡量使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示。
PS:使用 Unicode 寫中文字體名稱，瀏覽器是可以正確的解析的。 font-family: "\5FAE\8F6F\96C5\9ED1"，表示設置字體為“微軟雅黑”
- 宋體-SimSun-\5B8B\4F53
- 新宋體-NSimSun-\65B0\5B8B\4F53
- 黑體-SimHei-\9ED1\4F53
- 微軟雅黑-Microsoft YaHei-\5FAE\8F6F\96C5\9ED1
- 楷體_GB2312-KaiTi_GB2312-\6977\4F53_GB2312
- 隸書-LiSu-\96B6\4E66
- 幼園-YouYuan-\5E7C\5706
- 華文細黑-STXihei-\534E\6587\7EC6\9ED1
- 細明體-MingLiU-\7EC6\660E\4F53
- 新細明體-PMingLiU-\65B0\7EC6\660E\4F53
4.3 font-weight:字體粗細
字體加粗除了用 b 和 strong 標簽之外，可以使用css 來實現，但是css 是沒有語義的。
font-weight屬性用于定義字體的粗細，其可用屬性值：normal、bold、bolder、lighter、100~900（100的整數倍）
小技巧： 數字 400 等價于 normal，而 700 等價于 bold。 但是我們更喜歡用數字來表示。
4.4 font-style:字體風格
字體傾斜除了用 i 和 em 標簽之外，可以使用css 來實現，但是css 是沒有語義的。
font-style屬性用于定義字體風格，如設置斜體、傾斜或正常字體，其可用屬性值如下：
normal：默認值，瀏覽器會顯示標準的字體樣式。
italic：瀏覽器會顯示斜體的字體樣式。
oblique：瀏覽器會顯示傾斜的字體樣式。
4.5 font:綜合設置字體樣式
font屬性用于對字體樣式進行綜合設置，其基本語法格式如下：
選擇器{font: font-style font-weight font-size/line-height font-family;}
使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開
注意：其中不需要設置的屬性可以省略（取默認值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。
5.文本外觀屬性
5.1 color:文本顏色
color屬性用于定義文本的顏色，其取值方式有如下3種：
- 預定義的顏色值，如red，green，blue等。
- 十六進制，如#FF0000，#FF6600，#29D794等。實際工作中，十六進制是最常用的定義顏色的方式。
- RGB代碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是，如果使用RGB代碼的百分比顏色值，取值為0時也不能省略百分號，必須寫為0%
5.2 line-height:行間距
line-height屬性用于設置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高。
line-height常用的屬性值單位有三種，分別為像素px，相對值em和百分比%，實際工作中使用最多的是像素px。
line-height是兩行文字基線之間的距離，也可以理解為文字上方距離+文字內容大小+文字下方距離
當文字的行高設置為和其所在的盒子高度相同時，會讓該行文字垂直居中
5.3 text-indent:首行縮進
text-indent屬性用于設置首行文本的縮進，
其屬性值可為不同單位的數值、em字符寬度的倍數、或相對于瀏覽器窗口寬度的百分比%，允許使用負值, 建議使用em作為設置單位
5.4 text-align:水平對齊方式
text-align屬性用于設置文本內容的水平對齊，相當于html中的align對齊屬性。其可用屬性值如下：
- left：左對齊（默認值）
- right：右對齊
- center：居中對齊
5.5 text-decoration:文本修飾
檢索或設置對象中的文本的裝飾。
text-decoration : none || underline || blink || overline || line-through
- none : 無裝飾
- underline : 下劃線
- line-through : 刪除線
- overline : 上劃線
5.6 letter-spacing:字間距
letter-spacing屬性用于定義字間距，所謂字間距就是字符與字符之間的空白。其屬性值可為不同單位的數值，允許使用負值，默認為normal
5.7 word-spacing:單詞間距
word-spacing屬性用于定義英文單詞之間的間距，對中文字符無效。和letter-spacing一樣，其屬性值可為不同單位的數值，允許使用負值，默認為normal
5.8 word-break:自動換行
normal 使用瀏覽器默認的換行規則。
break-all 允許在單詞內換行。
keep-all 只能在半角空格或連字符處換行。
5.9 white-space:空白符處理
使用HTML制作網頁時，不論源代碼中有多少空格，在瀏覽器中只會顯示一個字符的空白。在CSS中，使用white-space屬性可設置空白符的處理方式，其屬性值如下：
normal：常規（默認值），文本中的空格、空行無效，滿行（到達區域邊界）后自動換行。
pre：預格式化，按文檔的書寫格式保留空格、空行原樣顯示。
nowrap：空格空行無效，強制文本不能換行，除非遇到換行標記 <br />
。內容超出元素的邊界也不換行，若超出瀏覽器頁面則會自動增加滾動條。
5.10 text-overflow 文字溢出
text-overflow : clip | ellipsis
設置或檢索是否使用一個省略標記（...）標示對象內文本的溢出
clip : 不顯示省略標記（...），而是簡單的裁切
ellipsis : 當對象內文本溢出時顯示省略標記（...）
6.CSS 背景(background)
6.1 背景顏色
語法：
background-color:顏色
如果設置為transparent，代表為背景色透明，如果不設置背景圖片，該區域會顯示位于該區域后方的內容
6.2 背景圖片
語法：
background-image : none | url (url)
參數：
none : 無背景圖（默認的） url : 使用絕對或相對地址指定背景圖像
background-image 屬性允許指定一個圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color 連用。 如果圖片不重復地話，圖片覆蓋不到地地方都會被背景色填充。 如果有背景圖片平鋪，則會覆蓋背景顏色。
6.3 背景平鋪
語法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
參數：
repeat : 背景圖像在縱向和橫向上平鋪（默認的）
no-repeat : 背景圖像不平鋪
repeat-x : 背景圖像在橫向上平鋪
repeat-y : 背景圖像在縱向平鋪
設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。
repeat-x : 背景圖像在橫向上平鋪
6.4 背景位置
語法：
background-position : length || length
background-position : position || position
參數：
length : 百分數 | 由浮點數字和單位標識符組成的長度值。請參閱長度單位 position : top | center | bottom | left | center | right
說明：
設置或檢索對象的背景圖像位置。必須先指定background-image屬性。默認值為：(0% 0%)。 如果只指定了一個值，該值將用于橫坐標。縱坐標將默認為50%。第二個值將用于縱坐標。
注意：
position 后面是x坐標和y坐標。 可以使用方位名詞或者 精確單位。
如果和精確單位和方位名字混合使用，則必須是x坐標在前，y坐標后面。比如 background-position: 15px top; 則 15px 一定是 x坐標 top是 y坐標。
實際工作用的最多的，就是背景圖片居中對齊了。
6.5 背景附著
語法：
background-attachment : scroll | fixed
參數：
scroll : 背景圖像是隨對象內容滾動 fixed : 背景圖像固定
說明：
設置或檢索背景圖像是隨對象內容滾動還是固定的。
6.6 背景簡寫
background屬性的值的書寫順序官方并沒有強制標準的。為了可讀性，建議大家如下寫：
/* background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置 */
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
7.盒模型
盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。每個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。
網頁布局的本質： 把網頁元素比如文字圖片等等，放入盒子里面，然后利用css擺放盒子的過程，就是網頁布局
7.1 盒子邊框（border）
語法：
border : border-width || border-style || border-color
邊框屬性—設置邊框樣式（border-style）
邊框樣式用于定義頁面中邊框的風格，常用屬性值如下：
none：沒有邊框即忽略所有邊框的寬度（默認值）
solid：邊框為單實線(最為常用的)
dashed：邊框為虛線
dotted：邊框為點線
double：邊框為雙實線
7.1.1 表單的邊框清零
因為表單邊框顏色瀏覽器不同，樣式不同，因此我們需要清零，自己定義樣式和顏色，從而達到瀏覽器兼容效果
例如：
input {border: 0;} textarea {border: 0;}
7.1.2 表格的細線邊框
table{ border-collapse:collapse; border-spacing: 1px;}
border-collapse:collapse; 表示邊框合并在一起。
border-spacing:px; 定義邊框之間的間距。
這樣就不用給表格指定 cellpadding 和 cellspacing
7.1.3 輪廓 outline
鏈接獲得焦點 有虛線 和 文本框或者文本域獲得焦點時，谷歌等瀏覽器有 藍色邊框，為了提高用戶體驗，需要將輪廓線清除
如下：
body a:focus {outline:none;}
textarea { outline: none; }
7.2 內邊距
padding屬性用于設置內邊距。 是指 邊框與內容之間的距離。
padding-top:上內邊距
padding-right:右內邊距
padding-bottom:下內邊距
padding-left:左內邊距
合寫：
1個值 padding：上下左右邊距 比如padding: 3px; 表示上下左右都是3像素
2個值 padding: 上下邊距 左右邊距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3個值 padding：上邊距 左右邊距 下邊距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4個值 padding:上內邊距 右內邊距 下內邊距 左內邊距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 順時針
7.3 外邊距
margin屬性用于設置外邊距。 設置外邊距會在元素之間創建“空白”， 這段空白通常不能放置其他內容。
margin-top:上外邊距
margin-right:右外邊距
margin-bottom:下外邊距
margin-left:上外邊距
margin的合寫可以參照padding合寫的值和順序
7.3.1 外邊距實現盒子居中
外邊距實現盒子居中需要滿足以下兩個條件：
必須是塊級元素。
盒子必須指定了寬度（width）
然后就給左右的外邊距都設置為auto，就可使塊級元素水平居中
.header{ width:960px; margin:0 auto;}
7.4 外邊距合并
7.4.1 相鄰塊元素垂直外邊距的合并
當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。
解決方案： 盡量避免，能利用padding來取代最好。
7.4.2 嵌套塊元素垂直外邊距的合并
對于兩個嵌套關系的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合并。
解決方案：
可以為父元素定義1像素的上邊框或上內邊距。
可以為父元素添加overflow:hidden。
7.5 盒子寬高
盒子的總寬度= width+左右內邊距之和+左右邊框寬度之和+左右外邊距之和
盒子的總高度= height+上下內邊距之和+上下邊框寬度之和+上下外邊距之和
注意：
1、寬度屬性width和高度屬性height僅適用于塊級元素，對行內元素無效（ img 標簽和 input除外）。
2、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合并的情況。
7.6盒子模型布局穩定性
按照 優先使用 寬度 （width） 其次 使用內邊距（padding） 再次 外邊距（margin）。
width > padding > margin
8.標簽顯示模式（display）
8.1 塊級元素(block-level)
每個塊元素通常都會獨自占據一整行或多整行，可以對其設置寬度、高度、對齊等屬性，常用于網頁布局和網頁結構的搭建。
常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標簽是最典型的塊元素。
塊級元素的特點：
（1）總是從新行開始
（2）高度，行高、外邊距以及內邊距都可以控制。
（3）寬度默認是容器的100%
（4）可以容納內聯元素和其他塊元素。
8.2 行內元素(inline-level)
行內元素（內聯元素）不占有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，一般不可以設置寬度、高度、對齊等屬性，常用于控制頁面中文本的樣式。
常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標簽最典型的行內元素。
行內元素的特點：
（1）和相鄰行內元素在一行上。
（2）高、寬無效，但水平方向的padding和margin可以設置，垂直方向的無效。
（3）默認寬度就是它本身內容的寬度。
（4）行內元素只能容納文本或則其他行內元素。（a特殊）
注意：只有 文字才 能組成段落 因此 p 里面不能放塊級元素，同理還有這些標簽h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標簽，里面不能放其他塊級元素。鏈接里面不能再放鏈接。
8.3 行內塊元素（inline-block）
在行內元素中有幾個特殊的標簽——<img />、<input />、<td>，可以對它們設置寬高和對齊屬性，有些資料可能會稱它們為行內塊元素。
行內塊元素的特點：
（1）和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙。
（2）默認寬度就是它本身內容的寬度。
（3）高度，行高、外邊距以及內邊距都可以控制。
8.4 標簽顯示模式轉換 display
塊轉行內：display:inline;
行內轉塊：display:block;
塊、行內元素轉換為行內塊： display: inline-block;
9.浮動
CSS的定位機制有3種：普通流（標準流）、浮動和定位。
普通流實際上就是一個網頁內標簽元素正常從上到下，從左到右排列順序的意思，比如塊級元素會獨占一行，行內元素會按順序依次前后排列；按照這種大前提的布局排列之下絕對不會出現例外的情況叫做普通流布局。
9.1 浮動的用途
浮動最早是用來控制圖片，以便達到其他元素（特別是文字）實現“環繞”圖片的效果。
后來，我們發現浮動有個很有意思的事情：就是讓任何盒子可以一行排列,因此我們就慢慢的偏離主題，用浮動的特性來布局了。
元素的浮動是指設置了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。
在CSS中，通過float屬性來定義浮動，其基本語法格式如下：
選擇器{float:屬性值;}
- left元素向左浮動
- right元素向右浮動
- none元素不浮動（默認值）
9.2 浮動詳細內幕特性
1.浮動首先創建包含塊的概念（包裹）。就是說， 浮動的元素總是找理它最近的父級元素對齊。但是不會超出內邊距的范圍。
[圖片上傳失敗...(image-fac4d1-1511169278775)]
2.浮動的元素排列位置，跟上一個元素（塊級）有關系。如果上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊；如果上一個元素是標準流，則A元素的頂部會和上一個元素的底部對齊
[圖片上傳失敗...(image-5a2927-1511169278775)]
3.由2可以推斷出，一個父盒子里面的子盒子，如果其中一個子級有浮動的，則其他子級都需要浮動。這樣才能一行對齊顯示。
4.浮動脫離標準流，不占位置，會影響后面的標準流。浮動只有左右浮動。
5.元素添加浮動后，元素會具有行內塊元素的特性。元素的大小完全取決于定義的大小或者默認的內容多少
浮動根據元素書寫的位置來顯示相應的浮動。
10.清除浮動
10.1 清除浮動本質
清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題
[圖片上傳失敗...(image-782fa0-1511169278775)]
10.2 清除浮動的方法
在CSS中，clear屬性用于清除浮動，其基本語法格式如下：
選擇器{clear:屬性值;}
- left不允許左側有浮動元素（清除左側浮動的影響）
- right不允許右側有浮動元素（清除右側浮動的影響）
- both同時清除左右兩側浮動的影響
10.2.1 額外標簽法
通過在浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>，或則其他標簽br等亦可。
優點： 通俗易懂，書寫方便
缺點： 添加許多無意義的標簽，結構化較差。
10.2.2 父級添加overflow屬性方法
可以給父級添加： overflow為 hidden|auto|scroll 都可以實現。
優點： 代碼簡潔
缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。
10.2.3 使用after偽元素清除浮動
使用方法：
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {*zoom: 1;} /* ie6、7 專有 */
10.2.4 使用before和after雙偽元素清除浮動
使用方法：
.clearfix:before,.clearfix:after{
content:".";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{*zoom:1;}
11.定位(position)
11.1 元素的定位屬性
元素的定位屬性主要包括定位模式和邊偏移兩部分
1.定位模式
在CSS中，position屬性用于定義元素的定位模式，其基本語法格式如下：
選擇器{position:屬性值;}
position屬性的常用值
- static自動定位（默認定位方式）
- relative相對定位，相對于其原文檔流的位置進行定位
- absolute絕對定位，相對于其上一個已經定位的父元素進行定位
- fixed固定定位，相對于瀏覽器窗口進行定位
2.邊偏移
在CSS中，通過邊偏移屬性top、bottom、left或right，來精確定義定位元素的位置，其取值為不同單位的數值或百分比。具體解釋如下：
- top頂端偏移量，定義元素相對于其父元素上邊線的距離
- bottom底部偏移量，定義元素相對于其父元素下邊線的距離
- left左側偏移量，定義元素相對于其父元素左邊線的距離
- right右側偏移量，定義元素相對于其父元素右邊線的距離
11.2 靜態定位static
靜態定位是所有元素的默認定位方式，當position屬性的取值為static時，可以將元素定位于靜態位置。 所謂靜態位置就是各個元素在HTML文檔流中默認的位置
11.3 相對定位relative
相對定位是將元素相對于它在標準流中的位置進行定位，當position屬性的取值為relative時，可以將元素定位于相對位置。
對元素設置相對定位后，可以通過邊偏移屬性改變元素的位置，但是它在文檔流中的位置仍然保留，而且移動的位置是相對于自身原來的位置來說的
注意： 相對定位最重要的一點是，它可以通過邊偏移移動位置，但是原來的所占的位置，繼續占有,移動的距離，是按照原來的自身的位置來移動
就是說，相對定位的盒子仍在標準流中，它后面的盒子仍以標準流方式對待它。
11.4 絕對定位absolute
當position屬性的取值為absolute時，可以將元素的定位模式設置為絕對定位。
注意： 絕對定位最重要的一點是，它可以通過邊偏移移動位置，但是它完全脫標，完全不占位置。
- 設置了絕對定位的元素，若所有父元素都沒有定位，以瀏覽器為準對齊(document文檔)
- 絕對定位是將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。
- 如果只是給盒子指定了 定位，但是沒有給與邊偏移，則改盒子以標準流來顯示排序，和上一個盒子的底邊對齊，但是不占有位置。
- 父元素使用相對定位，子元素使用絕對定位是非常常用的定位模式
- 子元素的偏移量是相對于父元素padding及以內來定的，不到border
11.5 固定定位fixed
固定定位是絕對定位的一種特殊形式，它以瀏覽器窗口作為參照物來定義網頁元素。當position屬性的取值為fixed時，即可將元素的定位模式設置為固定定位。
當對元素設置固定定位后，它將脫離標準文檔流的控制，始終依據瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動也不管瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。
固定定位有兩點：
- 固定定位的元素跟父親沒有任何關系，只認瀏覽器。
- 固定定位完全脫標，不占有位置，不隨著滾動條滾動。
元素添加了 絕對定位和固定定位之后， 元素模式也會發生轉換， 都轉換為 行內塊模式， 因此 比如 行內元素 如果添加了 絕對定位或者 固定定位后，可以不用轉換模式，直接給高度和寬度就可以了
11.6 疊放次序（z-index）
在CSS中，要想調整重疊定位元素的堆疊順序，可以對定位元素應用z-index層疊等級屬性，其取值可為正整數、負整數和0。
比如： z-index: 2;
注意：
z-index的默認屬性值是0，取值越大，定位元素在層疊元素中越居上。
如果取值相同，則根據書寫順序，后來居上。
后面數字一定不能加單位。
只有相對定位，絕對定位，固定定位有此屬性，其余標準流，浮動，靜態定位都無此屬性，亦不可指定此屬性。
12.元素的顯示與隱藏
12.1 display 顯示
display 設置或檢索對象是否及如何顯示。
display : none 隱藏對象 與它相反的是 display:block 除了轉換為塊級元素之外，同時還有顯示元素的意思。
特點： 隱藏之后，不再保留位置。
12.2 visibility 可見性
設置或檢索是否顯示對象。
visible : 對象可視
hidden : 對象隱藏
特點： 隱藏之后，繼續保留原有位置。
12.3 overflow 溢出
檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。
visible : 不剪切內容也不添加滾動條。
auto : 超出自動顯示滾動條，不超出不顯示滾動條
hidden : 不顯示超過對象尺寸的內容，超出的部分隱藏掉
scroll : 不管超出內容否，總是顯示滾動條
13.CSS用戶界面樣式
13.1 鼠標樣式cursor
設置或檢索在對象上移動的鼠標指針采用何種系統預定義的光標形狀。
cursor : default 小白 | pointer 小手 | move 移動 | text 文本
盡量不要用hand 因為 火狐不支持 pointer ie6以上都支持的盡量用
13.2 防止拖拽文本域resize
resize：none 這個單詞可以防止 火狐 谷歌等瀏覽器隨意的拖動 文本域
14.vertical-align 垂直對齊
vertical-align : baseline |top |middle |bottom
設置或檢索對象內容的垂直對其方式。
vertical-align 不影響塊級元素中的內容對齊，它只針對于 行內元素或者行內塊元素，特別是行內塊元素， 通常用來控制圖片和表單等。
15.CSS精靈圖
一個網頁中往往會應用很多小的背景圖像作為修飾，當網頁中的圖像過多時，服務器就會頻繁地接受和發送請求，這將大大降低頁面的加載速度。為了有效地減少服務器接受和發送請求的次數，提高頁面的加載速度，出現了CSS精靈圖技術
將一個頁面涉及到的所有零星背景圖像都集中到一張大圖中去，然后將大圖應用于網頁，這樣，當用戶訪問該頁面時，只需向服務發送一次請求，網頁中的背景圖像即可全部展示出來
要想精確定位到精靈圖中的某個小圖，就需要使用CSS的background-image、background-repeat和background-position屬性進行背景定位，其中最關鍵的是使用background-position屬性精確地定位
16.CSS常用技巧
16.1 margin 負值
制作網頁時，為了拉開元素之間的距離，常常給元素設置大于0的外邊距margin。其實，在實際工作中，為了實現一些特殊的效果，經常需要將元素的margin設置為負值
如：利用定位+margin負值實現盒子的水平或垂直居中，邊框的重疊顯示等
如要實現重疊效果，要注意以下技巧：
1.定位的盒子層級高于浮動和標準流。
2.提高定位盒子的層級用 z-index。
16.2 使用CSS寫出三角形
原理：CSS中一個盒子的四個邊框在將其加寬并設置不同顏色后可以發現，四個邊框的銜接處是斜線，四個邊框實際上是梯形，當盒子的寬高都變成0的時候，上下左右邊框就變成了四個朝向不同的三角形，需要一個方向的三角形只需要將另外幾個邊框不顯示即可
16.3 給網頁添加ico圖標
首先自己或者網頁美工制作小圖標。
利用 http://www.bitbug.net/ 進行轉換 生成的是： favicon.ico 的小圖標
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>引入小圖標 注意路徑！引入的link代碼一定只能放到head 標簽之中
ico圖標為了兼容性，我們放到根目錄下。
16.4 關于logo的優化
我們要在logo里面放一個h1標簽，就是為提權，說明這個盒子很重要。
我們繼續在h1 里面放一個鏈接a 要和 logo盒子一樣大。
注意 a鏈接 里面要放上網站標題。（是為了優化）
-
鏈接里面的文字對用戶體驗不好，這里不需要看見。 有兩種方法實現：
利用text-indent:-2000em; 或者 利用padding 擠開盒子 并且overflow 切割
給鏈接添加 title 提示文本 增強用戶體驗。
17.BFC(塊級格式化上下文)
BFC是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干
17.1 什么情況下可以讓元素產生BFC
float屬性不為none
position為absolute或fixed
display為inline-block, table-cell, table-caption, flex, inline-flex
overflow不為visible。
17.2 BFC元素所具有的特性
BFC布局規則特性：
1.在BFC中，盒子從頂端開始垂直地一個接一個地排列.
2.盒子垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰盒子的margin會發生重疊
3.在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說，則觸碰到右邊緣）。
4.BFC的區域不會與浮動盒子產生交集，而是緊貼浮動邊緣。
5.計算BFC的高度時，自然也會檢測浮動的盒子高度。
它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。
17.3 BFC的主要用途
(1) 清除元素內部浮動
只要把父元素設為BFC就可以清理子元素的浮動了，最常見的用法就是在父元素上設置overflow: hidden樣式，對于IE6加上zoom:1就可以了。
(2) 解決外邊距合并問題
屬于同一個BFC的兩個相鄰盒子的margin會發生重疊，那么我們創建不屬于同一個BFC的兩個相鄰盒子，就不會發生margin重疊了。
18.優雅降級和漸進增強
漸進增強 progressive enhancement：
針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：
一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
