相對定位
position屬性可以控制Web瀏覽器如何以 及在何處顯示特定的元素贤旷。
可以使用position屬性把一個元素放置到網(wǎng) 頁中的任何位置广料。
可選值：
static
relative
absolute
fixed
一、相對定位
每個元素在頁面的文檔流中都有一個自然位置幼驶。相 對于這個位置對元素進行移動就稱為相對定位艾杏。
當將position屬性設(shè)置為relative時，則開啟了元素 的相對定位盅藻。
當開啟了相對定位以后购桑，可以使用
top、right氏淑、 bottom勃蜘、left
四個屬性對元素進行定位。
相對定位的特點
- 如果不設(shè)置元素的偏移量假残，元素位置不會發(fā)生改變缭贡。
- 相對定位不會使元素脫離文本流炉擅。元素在文本流中 的位置不會改變。
- 相對定位不會改變元素原來的特性阳惹。
- 相對定位會使元素的層級提升谍失，使元素可以覆蓋文 本流中的元素。
二莹汤、絕對定位
絕對定位指使元素相對于html元素或離他最近 的祖先定位元素進行定位快鱼。
當將position屬性設(shè)置為absolute時，則開啟 了元素的絕對定位纲岭。
當開啟了絕對定位以后抹竹，可以使用
top、right止潮、 bottom柒莉、left四個屬性對元素進行定位。
特點
絕對定位會使元素完全脫離文本流沽翔。
絕對定位的塊元素的寬度會被其內(nèi)容撐開兢孝。
絕對定位會使行內(nèi)元素變成塊元素。
一般使用絕對定位時會同時為其父元素指定一 個相對定位仅偎，以確保元素可以相對于父元素進 行定位跨蟹。
三、固定定位
固定定位的元素會被鎖定在屏幕的某個位置上橘沥，當 訪問者滾動網(wǎng)頁時窗轩，固定元素會在屏幕上保持不動。
當將position屬性設(shè)置為fixed時座咆，則開啟了元素的 固定定位痢艺。
當開啟了固定定位以后，可以使用
top介陶、right堤舒、bottom、left
四個屬性對元素進行定位哺呜。
固定定位的其他特性和絕對定位類似舌缤。
z-index
當元素開啟定位以后就可以設(shè)置z-index這 個屬性。
這個屬性可以提升定位元素所在的層級某残。
z-index可以指定一個整數(shù)作為參數(shù)国撵，值越 大元素顯示的優(yōu)先級越高，也就是z-index 值較大的元素會顯示在網(wǎng)頁的最上層玻墅。
父元素不會覆蓋子元素
設(shè)置元素背景
background-color
用來為元素設(shè)置背景
background-image
用來為元素設(shè)置背景圖片,需要用URL為其制定一個圖片地址
background-repeat
用于控制背景圖片的 重復方式
可選值：
repeat：默認值介牙，圖片左右上下平鋪
no-repeat：只顯示圖片一次，不會平鋪
repeat-x：沿x軸水平平鋪一張圖片
repeat-y：沿y軸水平平鋪一張圖片
background-position
用來精確控制背景 圖片在元素中的位置
可以通過三種方式來確定圖片在水平方向 和垂直方向的起點澳厢。
關(guān)鍵字：top right bottom left center
百分比
數(shù)值
background-attachment
用來設(shè)置背景圖 片是否隨頁面滾動
可選值：
scroll：隨頁面滾動
fixed：不隨頁面滾動
background
background是背景的簡寫屬性环础，通過這個 屬性可以一次性設(shè)置多個樣式囚似，而且樣式 的順序沒有要求。
例如：
background: green url(1.jpg) no-repeat center center fixed;
CSS Sprite
CSS Sprites是一種網(wǎng)頁圖片應用處理方式喳整。
通過這種方式我們可以將網(wǎng)頁中的零星圖 片集中放到一張大圖上。
這樣一來裸扶，一次請求便可以同時加載多張 圖片框都，大大提高了圖片的加載效率。
表格的基本設(shè)置
table呵晨、tr魏保、th、td
使用table標簽創(chuàng)建一個表格摸屠。
tr
表示表格中的一行谓罗。
tr
中可以編寫一個或多個th或td。
th
表示表頭季二。
td
表示表格中的一個單元格檩咱。
caption、thead胯舷、tbody刻蚯、tfoot
caption
表示表格的標題。
thead
表示表格的頭部桑嘶。
tbody
表示表格的主體炊汹。
tfoot
表示表格的底部。
合并單元格
合并單元格指將兩個或兩個以上的單元格 合并為一個單元格逃顶。
合并單元格可以通過在th或td中設(shè)置屬性 來完成讨便。
橫向合并
colspan
縱向合并
rowspan
表格的樣式
text-align
設(shè)置文本的水平對齊。
vertical-align
設(shè)置文本的垂直對齊以政。
可選值：
top霸褒、baseline、middle盈蛮、bottom
border-spacing：邊框間距
border-collapse：合并邊框
collapse：合并邊框
separate：不合并邊框
表單
input
是表單項
type屬性可選值：
text：文本框
password：密碼框
submit：提交按鈕
radio：單選按鈕
checkbox：多選框
reset ：重置按鈕
selection option
select
用于創(chuàng)建一個下拉列表傲霸。
option
表示下拉列表中的列表項。
optgroup
用于為列表項分組眉反。
textarea 文本域
可用于輸入多行信息
可用屬性：
cols：文本域的列數(shù)
rows：文本域的行數(shù)
fieldset昙啄、legend、label
fieldset
用來為表單項進行分組寸五。
legend
用于指定每組的名字梳凛。
label
標簽用來為表單項定義描述文字。
整體代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單</title>
<style type="text/css">
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>用戶信息</legend>
<label for="um">用戶名</label>
<input id="um" type="text" name="username" value="我是value"><br><br>
<label for="pwd">密碼</label>
<input id="pwd" type="password" name="password"><br><br>
</fieldset>
<fieldset>
<legend>用戶愛好</legend>
性別<input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
<input type="radio" name="gender" value="female" checked="checked" id="female"><label for="female">女</label>
<br><br>
愛好<input type="checkbox" name="hobby" value="zq">足球
<input type="checkbox" name="hobby" value="lq">籃球
<input type="checkbox" name="hobby" value="ymq" checked="checked">羽毛球
<input type="checkbox" name="hobby" value="ppq" checked="checked">乒乓球
<br><br>
</fieldset>
你喜歡的明星
<select name="start">
<optgroup label="女明星">
<option value="fbb">范冰冰</option>
<option value="lxr">林心如</option>
<option value="zw">趙薇</option>
</optgroup>
<optgroup label="男明星">
<option value="zbs" selected="selected">趙本山</option>
<option value="ldh">劉德華</option>
<option value="zjl">周杰倫</option>
</optgroup>
</select>
<br><br>
自我介紹<textarea name="info"></textarea>
<br><br>
<input type="submit" value="注冊" />
<input type="reset">
<input type="button" value="按鈕">
<br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按鈕</button>
</form>
</body>
</html>
效果如下：
