定位：
- 定位指的就是將指定的元素?cái)[放到頁(yè)面的任意位置
通過(guò)定位可以任意的擺放元素 - 通過(guò)position屬性來(lái)設(shè)置元素的定位
- 可選值：
static：默認(rèn)值钳垮，元素沒(méi)有開(kāi)啟定位
relative：開(kāi)啟元素的相對(duì)定位
absolute：開(kāi)啟元素的絕對(duì)定位
fixed：開(kāi)啟元素的固定定位（也是絕對(duì)定位的一種)
relative
當(dāng)元素的position屬性設(shè)置為relative時(shí)吭练，則開(kāi)啟了元素的相對(duì)定位
1.當(dāng)開(kāi)啟了元素的相對(duì)定位以后冕茅，而不設(shè)置偏移量時(shí)榕订，元素不會(huì)發(fā)生任何變化
2.相對(duì)定位是相對(duì)于元素在文檔流中原來(lái)的位置進(jìn)行定位
3.相對(duì)定位的元素不會(huì)脫離文檔流
4.相對(duì)定位會(huì)使元素提升一個(gè)層級(jí)
5.相對(duì)定位不會(huì)改變?cè)氐男再|(zhì)平夜，塊還是塊，內(nèi)聯(lián)還是內(nèi)聯(lián)
position: relative;
當(dāng)開(kāi)啟了元素的定位（position屬性值是一個(gè)非static的值）時(shí)卸亮，可以通過(guò)left right top bottom四個(gè)屬性來(lái)設(shè)置元素的偏移量
- left：元素相對(duì)于其定位位置的左側(cè)偏移量
- right：元素相對(duì)于其定位位置的右側(cè)偏移量
- top：元素相對(duì)于其定位位置的上邊的偏移量
- bottom：元素相對(duì)于其定位位置下邊的偏移量
通常偏移量只需要使用兩個(gè)就可以對(duì)一個(gè)元素進(jìn)行定位忽妒，
一般選擇水平方向的一個(gè)偏移量和垂直方向的偏移量來(lái)為一個(gè)元素進(jìn)行定位
absolute
當(dāng)position屬性值設(shè)置為absolute時(shí)，則開(kāi)啟了元素的絕對(duì)定位
絕對(duì)定位：
position:absolite;
1.開(kāi)啟絕對(duì)定位兼贸，會(huì)使元素脫離文檔流
2.開(kāi)啟絕對(duì)定位以后段直，如果不設(shè)置偏移量，則元素的位置不會(huì)發(fā)生變化
3.絕對(duì)定位是相對(duì)于離他最近的溶诞、開(kāi)啟了定位的祖先元素進(jìn)行定位的（一般情況鸯檬，開(kāi)啟了子元素的絕對(duì)定位，都會(huì)同時(shí)開(kāi)啟父元素的相對(duì)定位）如果所有的祖先元素都沒(méi)有開(kāi)啟定位螺垢，則會(huì)相對(duì)于瀏覽器窗口進(jìn)行定位
4.絕對(duì)定位會(huì)使元素提升一個(gè)層級(jí)
5.絕對(duì)定位會(huì)改變?cè)氐男再|(zhì)：
- 內(nèi)聯(lián)元素變成塊元素
- 塊元素的寬度和高度默認(rèn)都被內(nèi)容撐開(kāi)
fix
當(dāng)元素的position屬性設(shè)置fixed時(shí)喧务，則開(kāi)啟了元素的固定定位
固定定位也是一種絕對(duì)定位，它的大部分特點(diǎn)都和絕對(duì)定位一樣
position:fix;
- 不同的是：
固定定位永遠(yuǎn)都會(huì)相對(duì)于瀏覽器窗口進(jìn)行定位
固定定位會(huì)固定在瀏覽器窗口某個(gè)位置枉圃，不會(huì)隨滾動(dòng)條滾動(dòng)
IE6不支持固定定位
元素的層級(jí)
-
如果定位元素的層級(jí)是一樣功茴，則下邊的元素會(huì)蓋住上邊的
通過(guò)z-index屬性可以用來(lái)設(shè)置元素的層級(jí)
可以為z-index指定一個(gè)正整數(shù)作為值，該值將會(huì)作為當(dāng)前元素的層級(jí)孽亲，層級(jí)越高坎穿，越優(yōu)先顯示z-index:10;
對(duì)于沒(méi)有開(kāi)啟定位的元素不能使用z-index
-
設(shè)置元素的透明背景
opacity可以用來(lái)設(shè)置元素背景的透明，它需要一個(gè)0-1之間的值
0 表示完全透明
1 表示完全不透明
0.5 表示半透明opacity: 0.5; -
opacity屬性在IE8及以下的瀏覽器中不支持
IE8及以下的瀏覽器需要使用如下屬性代替
alpha(opacity=透明度)
透明度返劲，需要一個(gè)0-100之間的值
0 表示完全透明
100 表示完全不透明
50 半透明filter: alpha(opacity=50);
設(shè)置元素背景
使用background-image來(lái)設(shè)置背景圖片
語(yǔ)法：background-image:url(相對(duì)路徑);
-如果背景圖片大于元素玲昧，默認(rèn)會(huì)顯示圖片的左上角
-如果背景圖片和元素一樣大，則會(huì)將背景圖片全部顯示
-如果背景圖片小于元素大小篮绿，則會(huì)默認(rèn)將背景圖片平鋪以充滿元素-
可以同時(shí)為一個(gè)元素指定背景顏色和背景圖片孵延，這樣背景顏色將會(huì)作為背景圖片的底色
一般情況下設(shè)置背景圖片時(shí)都會(huì)同時(shí)指定一個(gè)背景顏色background-color: #bfa; background-image: url(img/1.png); background-repeat用于設(shè)置背景圖片的重復(fù)方式
-
可選值：
repeat，默認(rèn)值亲配，背景圖片會(huì)雙方向重復(fù)（平鋪）
no-repeat尘应，背景圖片不會(huì)重復(fù)，有多大就顯示多大
repeat-x弃榨， 背景圖片沿水平方向重復(fù)
repeat-y菩收，背景圖片沿垂直方向重復(fù)background-repeat: repeat-y;
背景的偏移與定位
背景圖片默認(rèn)是貼著元素的左上角顯示
通過(guò)background-position可以調(diào)整背景圖片在元素中的位置
- 可選值：
該屬性可以使用 top right left bottom center中的兩個(gè)值來(lái)指定一個(gè)背景圖片的位置
top left 左上
bottom right 右下
center中間
-
如果只給出一個(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-position: -50px -50px;
background-attachment
background-attachment用來(lái)設(shè)置背景圖片是否隨頁(yè)面一起滾動(dòng)
-
可選值：
scroll箱舞，默認(rèn)值，背景圖片隨著窗口滾動(dòng)
fixed拳亿，背景圖片會(huì)固定在某一位置晴股，不隨頁(yè)面滾動(dòng)
不隨窗口滾動(dòng)的圖片，我們一般都是設(shè)置給body肺魁，而不設(shè)置給其他元素background-attachment: fixed;
背景固定
body{
height: 5000px;
background-image: url(img/2.jpg);
background-repeat: no-repeat;
background-position: center;
/*
當(dāng)背景圖片的background-attachment設(shè)置為fixed時(shí)电湘，
背景圖片的定位永遠(yuǎn)相對(duì)于瀏覽器的窗口
*/
background-attachment: fixed;
}
簡(jiǎn)寫(xiě)背景屬性
沒(méi)有順序要求，沒(méi)有數(shù)量要求
background
- 通過(guò)該屬性可以同時(shí)設(shè)置所有背景相關(guān)的樣式
- 沒(méi)有順序的要求鹅经，誰(shuí)在前睡在后都行
- 也沒(méi)有數(shù)量的要求寂呛，不寫(xiě)的樣式就使用默認(rèn)值
background: #bfa url(img/3.png) center center no-repeat fixed;
表格
table創(chuàng)建表格
tr表示行
th表頭
td單元格
<body>
<!-- 在HTML中，使用table標(biāo)簽來(lái)創(chuàng)建一個(gè)表格 -->
<table border="1" width="40%" align="center">
<!-- 在table標(biāo)簽中使用tr來(lái)表示表格中的一行瘾晃，有幾行就有幾對(duì)tr -->
<tr>
<!-- 在tr中需要使用td來(lái)創(chuàng)建一個(gè)單元格贷痪，有幾個(gè)單元格就有幾個(gè)td -->
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
可以使用th標(biāo)簽來(lái)表示表頭中的內(nèi)容，它的用法和td一樣蹦误，不同的是它會(huì)有一些默認(rèn)效果
<table>
<tr>
<th>學(xué)號(hào)</th>
<th>姓名</th>
<th>性別</th>
<th>住址</th>
</tr>
橫向合并colspan="數(shù)字"劫拢，是幾就合并幾個(gè)單元格
<tr>
<td>D1</td>
<td>D2</td>
<!-- colspan橫向的合并單元格 -->
<td colspan="2">D3</td>
</tr>
縱向合并rowspan="2"
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<!-- rowspan用來(lái)設(shè)置縱向的合并單元格 -->
<td rowspan="2">B4</td>
</tr>
text-align：設(shè)置文本的水平對(duì)齊。
vertical-align：設(shè)置文本的垂直對(duì)齊强胰。
可選值：top舱沧、baseline、middle偶洋、bottom
-
border-spacing：邊框間距
table和td邊框之間默認(rèn)有一個(gè)距離狗唉，通過(guò)border-spacing屬性可以設(shè)置這個(gè)距離border-spacing: 10px; -
border-collapse：合并邊框
border-collapse可以用來(lái)設(shè)置表格的邊框合并
如果設(shè)置了邊框合并，則border-spacing自動(dòng)失效border-collapse: collapse; 可選值：
collapse：合并邊框
separate：不合并邊框
長(zhǎng)表格
有一些情況下表格是非常的長(zhǎng)的涡真，這時(shí)就需要將表格分為三個(gè)部分分俯，表頭，表格的主體哆料，表格底部
在HTML中為我們提供了三個(gè)標(biāo)簽：
thead 表頭
tbody 表格主體
tfoot 表格底部
這三個(gè)標(biāo)簽的作用缸剪，就來(lái)區(qū)分表格的不同的部分，他們都是table的子標(biāo)簽东亦，都需要直接寫(xiě)到table中杏节，tr需要寫(xiě)在這些標(biāo)簽當(dāng)中
thead中的內(nèi)容，永遠(yuǎn)會(huì)顯示在表格的頭部
tfoot中的內(nèi)容典阵，永遠(yuǎn)都會(huì)顯示表格的底部
tbody中的內(nèi)容奋渔，永遠(yuǎn)都會(huì)顯示表格的中間
如果表格中沒(méi)有寫(xiě)tbody，瀏覽器會(huì)自動(dòng)在表格中添加tbody
并且將所有的tr都放到tbody中壮啊，所以注意tr并不是table的子元素嫉鲸，而是tbody的子元素
通過(guò)table > tr 無(wú)法選中行 需要通過(guò)tbody > tr
<body>
<table>
頭部
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合計(jì)</th>
</tr>
</thead>
中間
<tbody>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
底部
<tfoot>
<tr>
<td></td>
<td></td>
<td>合計(jì)</td>
<td>100</td>
</tr>
</tfoot>
表格的布局
以前表格更多的情況實(shí)際上是用來(lái)對(duì)頁(yè)面進(jìn)行布局的，但是這種方式早已被CSS所淘汰了
表格的列數(shù)由td最多的那行決定
表格是可以嵌套歹啼，可以在td中在放置一個(gè)表格
<body>
<table border="1" width="50%">
<tr height="100px">
<td colspan="2"></td>
</tr>
<tr height="400px">
<td width="20%"></td>
<td width="80%">
<table border="1" width="100%" height="100%">
<tr height="100px">
<td width="20%"></td>
</tr>
<tr height="100px">
<td width="20%"></td>
</tr>
</table>
</td>
</tr>
<tr height="100px">
<td colspan="2"></td>
</tr>
</table>
</body>
完善clearfix
解決父子元素的外邊距重疊
.box1:before{
content: "";
/*display:table可以將一個(gè)元素設(shè)置為表格顯示*/
display: table;
}
解決父元素高度塌陷
.clearfix:after{
content: "";
display: block;
clear: both;
}
經(jīng)過(guò)修改后的clearfix是一個(gè)多功能的樣式玄渗，既可以解決高度塌陷座菠，又可以確保父元素和子元素的垂直外邊距不會(huì)重疊
合并并解決兼容性
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
表單
表單的作用就是用來(lái)將用戶信息提交給服務(wù)器的
比如：百度的搜索框 注冊(cè) 登錄這些操作都需要填寫(xiě)表單
-
使用form標(biāo)簽創(chuàng)建一個(gè)表單
form標(biāo)簽中必須指定一個(gè)action屬性，該屬性指向的是一個(gè)服務(wù)器的地址
當(dāng)我們提交表單時(shí)將會(huì)提交到action屬性對(duì)應(yīng)的地址<form action="demo075_target.html">
使用form創(chuàng)建的僅僅是一個(gè)空白的表單藤树，我們還需要向form中添加不同的表單項(xiàng)
-
在表單中可以使用fieldset來(lái)為表單項(xiàng)進(jìn)行分組浴滴，可以將表單項(xiàng)中的同一組放到一個(gè)fieldset中
<fieldset> <!-- 在fieldset可以使用legend子標(biāo)簽，來(lái)指定組名 --> <legend>用戶信息</legend> -
使用input來(lái)創(chuàng)建一個(gè)文本框岁钓，它的type屬性是text
如果希望表單項(xiàng)中的數(shù)據(jù)會(huì)提交到服務(wù)器中升略，還必須給表單項(xiàng)指定一個(gè)name屬性
name表示提交內(nèi)容的名字<input type="text" name="aaa"> -
用戶填寫(xiě)的信息會(huì)附在url地址的后邊以查詢字符串的形式發(fā)送給服務(wù)器
<form action="demo075_target.html" method="get">host
url地址?查詢字符串
-格式：method="get"
屬性名=屬性值&屬性名=屬性值&屬性名=屬性值&……
在文本框中也可以指定value屬性值，該值將會(huì)作為文本框的默認(rèn)值顯示
method="post"打包屡限，隱藏
-
在html中還為我們提供了一個(gè)專門(mén)用來(lái)選中表單中的提示文字的label標(biāo)簽label for="um"
該標(biāo)簽可以指定一個(gè)for屬性品嚣，該屬性的值需要指定一個(gè)表單項(xiàng)的id值<label for="um">用戶名</label> <!-- value是默認(rèn)值，提示信息用：placeholder="用戶名/郵箱/手機(jī)號(hào)" --> <input id="um" type="text" name="username" value="我是value"><br><br> -
密碼框type="password"
使用input創(chuàng)建一個(gè)密碼框囚霸，它的type屬性值是password<label for="pwd">密碼</label> <input id="pwd" type="password" name="password"><br><br>
- 單選按鈕type="radio"
- 使用input來(lái)創(chuàng)建一個(gè)單選按鈕腰根，它的type屬性使用radio
- 單選按鈕通過(guò)name屬性進(jìn)行分組，name屬性相同是一組按鈕
- 像這種需要用戶選擇但是不需要用戶直接填寫(xiě)內(nèi)容的表單項(xiàng)拓型，還必須指定一個(gè)value屬性额嘿，這樣被選中的表單項(xiàng)的value屬性值將會(huì)最終提交給服務(wù)器
如果希望在單選按鈕或者是多選框中指定默認(rèn)選中的選項(xiàng)，則可以在希望選中的項(xiàng)中添加checked="checked"屬性
性別<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>
-
多選框
- 使用input創(chuàng)建一個(gè)多選框劣挫，它的type屬性使用checkbox愛(ài)好<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">乒乓球
- 下拉列表
- 使用select來(lái)創(chuàng)建一個(gè)下拉列表
下拉列表的name屬性需要指定給select册养，而value屬性需要指定給option
可以通過(guò)在option中添加selected="selected"來(lái)將選項(xiàng)設(shè)置為默認(rèn)選中
當(dāng)為select添加一個(gè)multiple="multiple"，則下拉列表變?yōu)橐粋€(gè)多選的下拉列表
<select name="start">
<!--
在select中可以使用optgroup對(duì)選項(xiàng)進(jìn)行分組
同一個(gè)optgroup中的選項(xiàng)是一組
可以通過(guò)label屬性來(lái)指定分組的名字
-->
<optgroup label="女明星">
<!-- 在下拉列表中使用option標(biāo)簽來(lái)創(chuàng)建一個(gè)一個(gè)列表項(xiàng) -->
<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創(chuàng)建一個(gè)文本域
自我介紹<textarea name="info"></textarea> <br><br>
-
提交按鈕可以將表單中的信息提交給服務(wù)器
使用input創(chuàng)建一個(gè)提交按鈕压固，它的type屬性值是submit
在提交按鈕中可以通過(guò)value屬性來(lái)指定按鈕上的文字<input type="submit" value="注冊(cè)" /> -
創(chuàng)建一個(gè)重置按鈕球拦，點(diǎn)擊重置按鈕以后表單中內(nèi)容將會(huì)恢復(fù)為默認(rèn)值
<input type="reset"> -
創(chuàng)建一個(gè)單純的按鈕，這個(gè)按鈕沒(méi)有任何功能帐我，只能被點(diǎn)擊
<input type="button" value="按鈕"> -
除了使用input坎炼，也可以使用button標(biāo)簽來(lái)創(chuàng)建按鈕
這種方式和使用input類(lèi)似，只不過(guò)由于它是成對(duì)出現(xiàn)的標(biāo)簽拦键，使用起來(lái)更加的靈活<button type="submit">提交</button> <button type="reset">重置</button> <button type="button">按鈕</button>
