絕對(duì)定位
絕對(duì)定位指使元素相當(dāng)于html元素或離他最近的祖先元素進(jìn)行的定位
當(dāng)position設(shè)置為absolute時(shí)，開啟絕對(duì)定位
特點(diǎn)：
絕對(duì)定位會(huì)使元素完全脫離文本流
絕對(duì)定位的塊元素的寬度會(huì)被其內(nèi)容撐開
絕對(duì)定位會(huì)使行內(nèi)元素變成塊元素
固定定位
固定定位的元素會(huì)被鎖定在屏幕的某個(gè)位置上，當(dāng)訪問者滾蛋網(wǎng)頁(yè)時(shí)，固定元素會(huì)在屏幕上保持不動(dòng)
當(dāng)position設(shè)置為fixed時(shí)開啟固定定位
1、元素的層級(jí):
如果定位元素的層級(jí)是一樣，則下邊的元素會(huì)蓋住上邊的
通過z-index屬性可以用來(lái)設(shè)置元素的層級(jí)
可以為z-index指定一個(gè)正整數(shù)作為值，該值將會(huì)作為當(dāng)前元素的層級(jí)，層級(jí)越高，越優(yōu)先顯示
對(duì)于沒有開啟定位的元素不能使用z-index
2、設(shè)置圖片背景:
background-image: url()
background-repeat用于設(shè)置背景圖片的重復(fù)方式
可選值：
repeat，默認(rèn)值，背景圖片會(huì)雙方向重復(fù)（平鋪）
no-repeat，背景圖片不會(huì)重復(fù)，有多大就顯示多大
repeat-x， 背景圖片沿水平方向重復(fù)
repeat-y，背景圖片沿垂直方向重復(fù)
3、背景偏移和定位：
背景圖片默認(rèn)是貼著元素的左上角顯示
通過background-position可以調(diào)整背景圖片在元素中的位置
可選值：
該屬性可以使用 top right left bottom center中的兩個(gè)值來(lái)指定一個(gè)背景圖片的位置
top left 左上
bottom right 右下
如果只給出一個(gè)值，則第二個(gè)值默認(rèn)是center
也可以直接指定兩個(gè)偏移量
第一個(gè)值是水平偏移量
如果指定的是一個(gè)正值，則圖片會(huì)向右移動(dòng)指定的像素
如果指定的是一個(gè)負(fù)值，則圖片會(huì)向左移動(dòng)指定的像素
第二個(gè)是垂直偏移量
如果指定的是一個(gè)正值，則圖片會(huì)向下移動(dòng)指定的像素
如果指定的是一個(gè)負(fù)值，則圖片會(huì)向上移動(dòng)指定的像素
background-attachment用來(lái)設(shè)置背景圖片是否隨頁(yè)面一起滾動(dòng)
可選值：
scroll，默認(rèn)值，背景圖片隨著窗口滾動(dòng)
fixed，背景圖片會(huì)固定在某一位置，不隨頁(yè)面滾動(dòng)
不隨窗口滾動(dòng)的圖片，我們一般都是設(shè)置給body，而不設(shè)置給其他元素
4、背景定位：
當(dāng)背景圖片的background-attachment設(shè)置為fixed時(shí)，
背景圖片的定位永遠(yuǎn)相對(duì)于瀏覽器的窗口
background-attachment: fixed;
5、雪碧圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按鈕練習(xí)</title>
<style type="text/css">
.btn:link{
/*將a轉(zhuǎn)換為塊元素*/
display: block;
/*設(shè)置寬高*/
width: 93px;
height: 29px;
/*設(shè)置背景圖片*/
background-image: url(img/btn/btn2.png);
/*設(shè)置背景圖片不重復(fù)*/
background-repeat: no-repeat;
}
.btn:hover{
/*當(dāng)是hover狀態(tài)時(shí)，希望圖片可以向左移動(dòng)*/
background-position: -93px 0px;
}
.btn:active{
/*當(dāng)是active狀態(tài)時(shí)，希望圖片再向左移動(dòng)*/
background-position: -186px 0px;
}
</style>
</head>
<body>
<!-- 創(chuàng)建一個(gè)超鏈接 -->
<a href="#" class="btn"></a>
</body>
</html>
6、背景屬性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡(jiǎn)寫背景屬性</title>
<style type="text/css">
body{
height: 5000px;
/*設(shè)置一個(gè)背景顏色*/
/*background-color: #bfa;*/
/*設(shè)置一個(gè)背景圖片*/
/*background-image: url(img/3.png);*/
/*設(shè)置背景不重復(fù)*/
/*background-repeat: no-repeat;*/
/*設(shè)置背景圖片的位置*/
/*background-position: center center;*/
/*設(shè)置背景圖片不隨滾動(dòng)條滾動(dòng)*/
/*background-attachment: fixed;*/
background-color: #bfa;
/*background
- 通過該屬性可以同時(shí)設(shè)置所有背景相關(guān)的樣式
- 沒有順序的要求，誰(shuí)在前睡在后都行
- 也沒有數(shù)量的要求，不寫的樣式就使用默認(rèn)值
*/
background: #bfa url(img/3.png) center center no-repeat fixed;
}
</style>
</head>
<body>
</body>
</html>
7、表格：
在HTML中，使用table標(biāo)簽來(lái)創(chuàng)建一個(gè)表格
在table標(biāo)簽中使用tr來(lái)表示表格中的一行，有幾行就有幾對(duì)tr
在tr中需要使用td來(lái)創(chuàng)建一個(gè)單元格，有幾個(gè)單元格就有幾個(gè)td
rowspan用來(lái)設(shè)置縱向的合并單元格
colspan橫向的合并單元格
html表格
table常用標(biāo)簽
1、table標(biāo)簽：聲明一個(gè)表格
2、tr標(biāo)簽：定義表格中的一行
3、td和th標(biāo)簽：定義一行中的一個(gè)單元格，td代表普通單元格，th表示表頭單元格
table常用屬性：
1、border 定義表格的邊框
2、cellpadding 定義單元格內(nèi)內(nèi)容與邊框的距離
3、cellspacing 定義單元格與單元格之間的距離
4、align 設(shè)置單元格中內(nèi)容的水平對(duì)齊方式,設(shè)置值有：left | center | right
5、valign 設(shè)置單元格中內(nèi)容的垂直對(duì)齊方式 top | middle | bottom
6、colspan 設(shè)置單元格水平合并
7、rowspan 設(shè)置單元格垂直合并
傳統(tǒng)布局：
傳統(tǒng)的布局方式就是使用table來(lái)做整體頁(yè)面的布局，布局的技巧歸納為如下幾點(diǎn)：
1、定義表格寬高，將border、cellpadding、cellspacing全部設(shè)置為0
2、單元格里面嵌套表格
3、單元格中的元素和嵌套的表格用align和valign設(shè)置對(duì)齊方式
4、通過屬性或者css樣式設(shè)置單元格中元素的樣式
傳統(tǒng)布局目前應(yīng)用：
1、快速制作用于演示的html頁(yè)面
2、商業(yè)推廣EDM制作(廣告郵件
