絕對定位
絕對定位指使元素相當于html元素或離他最近的祖先元素進行的定位
當position設置為absolute時攒霹，開啟絕對定位
特點：
絕對定位會使元素完全脫離文本流
絕對定位的塊元素的寬度會被其內(nèi)容撐開
絕對定位會使行內(nèi)元素變成塊元素
固定定位
固定定位的元素會被鎖定在屏幕的某個位置上昔瞧，當訪問者滾蛋網(wǎng)頁時，固定元素會在屏幕上保持不動
當position設置為fixed時開啟固定定位
1贝咙、元素的層級:
如果定位元素的層級是一樣，則下邊的元素會蓋住上邊的
通過z-index屬性可以用來設置元素的層級
可以為z-index指定一個正整數(shù)作為值纯续，該值將會作為當前元素的層級牧抵，層級越高，越優(yōu)先顯示
對于沒有開啟定位的元素不能使用z-index
2班利、設置圖片背景:
background-image: url()
background-repeat用于設置背景圖片的重復方式
可選值：
repeat饥漫，默認值，背景圖片會雙方向重復（平鋪）
no-repeat罗标，背景圖片不會重復庸队，有多大就顯示多大
repeat-x积蜻， 背景圖片沿水平方向重復
repeat-y，背景圖片沿垂直方向重復
3彻消、背景偏移和定位：
背景圖片默認是貼著元素的左上角顯示
通過background-position可以調(diào)整背景圖片在元素中的位置
可選值：
該屬性可以使用 top right left bottom center中的兩個值來指定一個背景圖片的位置
top left 左上
bottom right 右下
如果只給出一個值竿拆，則第二個值默認是center
也可以直接指定兩個偏移量
第一個值是水平偏移量
如果指定的是一個正值，則圖片會向右移動指定的像素
如果指定的是一個負值宾尚，則圖片會向左移動指定的像素
第二個是垂直偏移量
如果指定的是一個正值丙笋，則圖片會向下移動指定的像素
如果指定的是一個負值，則圖片會向上移動指定的像素
background-attachment用來設置背景圖片是否隨頁面一起滾動
可選值：
scroll煌贴，默認值御板，背景圖片隨著窗口滾動
fixed，背景圖片會固定在某一位置牛郑，不隨頁面滾動
不隨窗口滾動的圖片怠肋，我們一般都是設置給body，而不設置給其他元素
4淹朋、背景定位：
當背景圖片的background-attachment設置為fixed時笙各，
背景圖片的定位永遠相對于瀏覽器的窗口
background-attachment: fixed;
5、雪碧圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按鈕練習</title>
<style type="text/css">
.btn:link{
/*將a轉(zhuǎn)換為塊元素*/
display: block;
/*設置寬高*/
width: 93px;
height: 29px;
/*設置背景圖片*/
background-image: url(img/btn/btn2.png);
/*設置背景圖片不重復*/
background-repeat: no-repeat;
}
.btn:hover{
/*當是hover狀態(tài)時础芍，希望圖片可以向左移動*/
background-position: -93px 0px;
}
.btn:active{
/*當是active狀態(tài)時酪惭，希望圖片再向左移動*/
background-position: -186px 0px;
}
</style>
</head>
<body>
<!-- 創(chuàng)建一個超鏈接 -->
<a href="#" class="btn"></a>
</body>
</html>
6、背景屬性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡寫背景屬性</title>
<style type="text/css">
body{
height: 5000px;
/*設置一個背景顏色*/
/*background-color: #bfa;*/
/*設置一個背景圖片*/
/*background-image: url(img/3.png);*/
/*設置背景不重復*/
/*background-repeat: no-repeat;*/
/*設置背景圖片的位置*/
/*background-position: center center;*/
/*設置背景圖片不隨滾動條滾動*/
/*background-attachment: fixed;*/
background-color: #bfa;
/*background
- 通過該屬性可以同時設置所有背景相關(guān)的樣式
- 沒有順序的要求者甲，誰在前睡在后都行
- 也沒有數(shù)量的要求，不寫的樣式就使用默認值
*/
background: #bfa url(img/3.png) center center no-repeat fixed;
}
</style>
</head>
<body>
</body>
</html>
7砌创、表格：
在HTML中虏缸，使用table標簽來創(chuàng)建一個表格
在table標簽中使用tr來表示表格中的一行，有幾行就有幾對tr
在tr中需要使用td來創(chuàng)建一個單元格嫩实，有幾個單元格就有幾個td
rowspan用來設置縱向的合并單元格
colspan橫向的合并單元格
html表格
table常用標簽
1刽辙、table標簽：聲明一個表格
2、tr標簽：定義表格中的一行
3甲献、td和th標簽：定義一行中的一個單元格宰缤，td代表普通單元格，th表示表頭單元格
table常用屬性：
1晃洒、border 定義表格的邊框
2慨灭、cellpadding 定義單元格內(nèi)內(nèi)容與邊框的距離
3、cellspacing 定義單元格與單元格之間的距離
4球及、align 設置單元格中內(nèi)容的水平對齊方式,設置值有：left | center | right
5氧骤、valign 設置單元格中內(nèi)容的垂直對齊方式 top | middle | bottom
6、colspan 設置單元格水平合并
7吃引、rowspan 設置單元格垂直合并
傳統(tǒng)布局：
傳統(tǒng)的布局方式就是使用table來做整體頁面的布局筹陵，布局的技巧歸納為如下幾點：
1刽锤、定義表格寬高，將border朦佩、cellpadding并思、cellspacing全部設置為0
2、單元格里面嵌套表格
3语稠、單元格中的元素和嵌套的表格用align和valign設置對齊方式
4宋彼、通過屬性或者css樣式設置單元格中元素的樣式
傳統(tǒng)布局目前應用：
1、快速制作用于演示的html頁面
2颅筋、商業(yè)推廣EDM制作(廣告郵件
