定位：
- 定位指的就是將指定的元素擺放到頁面的任意位置
通過定位可以任意的擺放元素 - 通過position屬性來設置元素的定位
可選值：
static：默認值，元素沒有開啟定位
relative：開啟元素的相對定位
absolute：開啟元素的絕對定位
fixed：開啟元素的固定定位（也是絕對定位的一種）
- 相對定位
當元素的position屬性設置為relative時，則開啟了元素的相對定位
1.當開啟了元素的相對定位以后，而不設置偏移量時，元素不會發生任何變化
2.相對定位是相對于元素在文檔流中原來的位置進行定位
3.相對定位的元素不會脫離文檔流
4.相對定位會使元素提升一個層級
5.相對定位不會改變元素的性質，塊還是塊，內聯還是內聯
當開啟了元素的定位（position屬性值是一個非static的值）時，可以通過left right top bottom四個屬性來設置元素的偏移量
left：元素相對于其定位位置的左側偏移量
right：元素相對于其定位位置的右側偏移量
top：元素相對于其定位位置的上邊的偏移量
bottom：元素相對于其定位位置下邊的偏移量
通常偏移量只需要使用兩個就可以對一個元素進行定位，一般選擇水平方向的一個偏移量和垂直方向的偏移量來為一個元素進行定位
- 絕對定位
當position屬性值設置為absolute時，則開啟了元素的絕對定位
絕對定位：
1.開啟絕對定位，會使元素脫離文檔流
2.開啟絕對定位以后，如果不設置偏移量，則元素的位置不會發生變化
3.絕對定位是相對于離他最近的、開啟了定位的祖先元素進行定位的（一般情況，開啟了子元素的絕對定位，都會同時開啟父元素的相對定位）如果所有的祖先元素都沒有開啟定位，則會相對于瀏覽器窗口進行定位
4.絕對定位會使元素提升一個層級
5.絕對定位會改變元素的性質：
內聯元素變成塊元素，
塊元素的寬度和高度默認都被內容撐開
- 固定定位
當元素的position屬性設置fixed時，則開啟了元素的固定定位
固定定位也是一種絕對定位，它的大部分特點都和絕對定位一樣
不同的是：
固定定位永遠都會相對于瀏覽器窗口進行定位
固定定位會固定在瀏覽器窗口某個位置，不會隨滾動條滾動
IE6不支持固定定位
元素色層級
如果定位元素的層級是一樣，則下邊的元素會蓋住上邊的
- 通過z-index屬性可以用來設置元素的層級
- 可以為z-index指定一個正整數作為值，該值將會作為當前元素的層級，層級越高，越優先顯示
- 對于沒有開啟定位的元素不能使用z-index
設置元素的透明背景
opacity可以用來設置元素背景的透明，它需要一個0-1之間的值
0 表示完全透明
1 表示完全不透明
0.5 表示半透明
opacity屬性在IE8及以下的瀏覽器中不支持
IE8及以下的瀏覽器需要使用如下屬性代替
alpha(opacity=透明度)
透明度，需要一個0-100之間的值
0 表示完全透明
100 表示完全不透明
50 半透明
這種方式支持IE6，但是這種效果在IE Tester中無法測試
背景
- 使用background-image來設置背景圖片
語法：background-image:url(相對路徑);
- 如果背景圖片大于元素，默認會顯示圖片的左上角
- 如果背景圖片和元素一樣大，則會將背景圖片全部顯示
- 如果背景圖片小于元素大小，則會默認將背景圖片平鋪以充滿元素
可以同時為一個元素指定背景顏色和背景圖片，這樣背景顏色將會作為背景圖片的底色
一般情況下設置背景圖片時都會同時指定一個背景顏色
background-repeat用于設置背景圖片的重復方式
可選值：
repeat，默認值，背景圖片會雙方向重復（平鋪）
no-repeat，背景圖片不會重復，有多大就顯示多大
repeat-x， 背景圖片沿水平方向重復
repeat-y，背景圖片沿垂直方向重復
- 背景偏移和定位
背景圖片默認是貼著元素的左上角顯示
通過background-position可以調整背景圖片在元素中的位置
可選值：
該屬性可以使用 top right left bottom center中的兩個值來指定一個背景圖片的位置
top left 左上
bottom right 右下
如果只給出一個值，則第二個值默認是center
也可以直接指定兩個偏移量
第一個值是水平偏移量
- 如果指定的是一個正值，則圖片會向右移動指定的像素
- 如果指定的是一個負值，則圖片會向左移動指定的像素
第二個是垂直偏移量 - 如果指定的是一個正值，則圖片會向下移動指定的像素
- 如果指定的是一個負值，則圖片會向上移動指定的像素
background-attachment用來設置背景圖片是否隨頁面一起滾動
可選值：
scroll，默認值，背景圖片隨著窗口滾動
fixed，背景圖片會固定在某一位置，不隨頁面滾動
不隨窗口滾動的圖片，我們一般都是設置給body，而不設置給其他元素
- 背景固定
當背景圖片的background-attachment設置為fixed時，背景圖片的定位永遠相對于瀏覽器的窗口
按鈕
- 雪碧圖
做完功能以后，發現在第一次切換圖片時，會發現圖片有一個非常快的閃爍，這個閃爍會造成一次不佳的用戶體驗
產生問題的原因：
背景圖片是以外部資源的形式加載進網頁的，瀏覽器每加載一個外部資源就需要單獨的發送一次請求
但是我們的外部資源并不是同時加載，瀏覽器會在資源被使用時才去加載資源
我們這個練習，一上來瀏覽器只會加載link.png
由于hover和active的狀態沒有馬上觸發，所以hover.png和active.png并不是立即加載的
當hover被觸發時，瀏覽器才去加載hover.png
當active被觸發時，瀏覽器才去加載active.png
由于加載圖片需要一定的時間，所以在加載和顯示過程會有一段時間，背景圖片無法顯示，導致出現閃爍的情況
為了解決該問題，可以將三個圖片整合為一張圖片，這樣可以同時將三張圖片一起加載，就不會出現閃爍的問題了然后再通過background-position來切換要顯示的圖片的位置，這種技術叫做圖片整合技術（CSS-Sprite）
優點：
1 將多個圖片整合為一張圖片里，瀏覽器只需要發送一次請求，可以同時加載多個圖片，提高訪問效率，提高了用戶體驗。
2 將多個圖片整合為一張圖片，減小了圖片的總大小，提高請求的速度，增加了用戶體驗
表格
- 在HTML中，使用table標簽來創建一個表格
在table標簽中使用tr來表示表格中的一行，有幾行就有幾對tr
在tr中需要使用td來創建一個單元格，有幾個單元格就有幾個td
rowspan用來設置縱向的合并單元格
<td rowspan="2">B4</td>
colspan橫向的合并單元格
<td colspan="2">D3</td>
- 表格樣式
table和td邊框之間默認有一個距離，通過border-spacing屬性可以設置這個距離
border-collapse可以用來設置表格的邊框合并
如果設置了邊框合并，則border-spacing自動失效
/鼠標移入到tr以后，改變顏色/
tr:hover{
background-color: yellow;
}
有一些情況下表格是非常的長的，這時就需要將表格分為三個部分，表頭，表格的主體，表格底部
在HTML中為我們提供了三個標簽：
thead 表頭
tbody 表格主體
tfoot 表格底部
這三個標簽的作用，就來區分表格的不同的部分，他們都是table的子標簽，都需要直接寫到table中，tr需要寫在這些標簽當中
thead中的內容，永遠會顯示在表格的頭部
tfoot中的內容，永遠都會顯示表格的底部
tbody中的內容，永遠都會顯示表格的中間
如果表格中沒有寫tbody，瀏覽器會自動在表格中添加tbody
并且將所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通過table > tr 無法選中行 需要通過tbody > tr
- 表格布局
以前表格更多的情況實際上是用來對頁面進行布局的，但是這種方式早已被CSS所淘汰了
表格的列數由td最多的那行決定
表格是可以嵌套，可以在td中在放置一個表格
子元素和父元素相鄰的垂直外邊距會發生重疊，子元素的外邊距會傳遞給父元素
使用空的table標簽可以隔離父子元素的外邊距，阻止外邊距的重疊
經過修改后的clearfix是一個多功能的樣式，既可以解決高度塌陷，又可以確保父元素和子元素的垂直外邊距不會重疊
- 表單
表單的作用就是用來將用戶信息提交給服務器的
比如：百度的搜索框 注冊 登錄這些操作都需要填寫表單
使用form標簽創建一個表單
form標簽中必須指定一個action屬性，該屬性指向的是一個服務器的地址
當我們提交表單時將會提交到action屬性對應的地址
使用input來創建一個文本框，它的type屬性是text
如果希望表單項中的數據會提交到服務器中，還必須給表單項指定一個name屬性
name表示提交內容的名字
用戶填寫的信息會附在url地址的后邊以查詢字符串的形式發送給服務器
url地址?查詢字符串
格式：
屬性名=屬性值&屬性名=屬性值&屬性名=屬性值&……
在文本框中也可以指定value屬性值，該值將會作為文本框的默認值顯示
- 下拉列表
使用select來創建一個下拉列表
下拉列表的name屬性需要指定給select，而value屬性需要指定給option
可以通過在option中添加selected="selected"來將選項設置為默認選中
當為select添加一個multiple="multiple"，則下拉列表變為一個多選的下拉列表
