• 1. 定位----position
  • 1. 不開啟定位--static
  • 2. 相對定位-relative
  • 3. 絕對定位--absolute
  • 4.固定定位---fixed
• 2. 元素的層級---z-index
• 3. 透明度 ----opacity
• 4. 背景---background-image
  • 1. 背景的偏移與定位
  • 2. 雪碧圖-----優(yōu)化按鈕閃爍問題
• 5. 簡寫背景屬性
• 6. 表格----table
• 7. 長表格
• 8. 表格的布局
• 9. clearfix
• 9.表單
  • 1. form----創(chuàng)建表單
  • 2. filedset
  • 3. input ----文本框
  • 4. lable
  • 5. 單選按鈕
  • 6. 多選框
  • 7. 下拉列表
  • 8. 下拉列表分組---optgroup
  • 9 .文本域---text---多行輸入
  • 10. 按鈕---input
  • 11. 按鈕---button

1. 定位----position

定位指的就是將指定的元素擺放到頁面的任意位置,通過定位可以任意的擺放元素.通過position來設(shè)置元素的定位.

• 可選值
  • static:默認值,元素沒有開啟定位
  • relative:相對定位
  • absolute:絕對定位
  • fixed:固定定位,絕對定位的一種.

1. 不開啟定位--static

position: static;
left:100px
<!-- 不開啟定位,有偏移量也不移動 -->

position != static時,即為開啟了定位;

2. 相對定位-relative

• position: relative;
  1. 當開啟了元素的相對定位以后，而不設(shè)置偏移量時浆西，元素不會發(fā)生任何變化
  2. 相對定位是相對于元素在文檔流中原來的位置進行定位
  3. 相對定位的元素不會脫離文檔流,元素移動后原來的位置還在
  4. 相對定位會使元素提升一個層級
  5. 相對定位不會改變元素的性質(zhì)洲尊，塊還是塊怔鳖，內(nèi)聯(lián)還是內(nèi)聯(lián)
  6. 相對定位不會導(dǎo)致元素的寬度丟失
• 設(shè)置偏移量;
  • left：元素相對于其定位位置的左側(cè)偏移量
  • right：元素相對于其定位位置的右側(cè)偏移量
  • top：元素相對于其定位位置的上邊的偏移量
  • bottom：元素相對于其定位位置下邊的偏移量
    • left:100px
  • 偏移量一般需要設(shè)置兩個,水平 垂直

3. 絕對定位--absolute

• 絕對定位：
  1. 開啟絕對定位澈段，會使元素脫離文檔流
  2. 開啟絕對定位以后匕得，如果不設(shè)置偏移量变泄，則元素的位置不會發(fā)生變化,但由于開啟絕對定位脫離了文檔流,定位元素后面的元素會上移
  3. 絕對定位是相對于離他最近的秋麸、開啟了定位的祖先元素進行定位的（一般情況嗜诀，開啟了子元素的絕對定位猾警，都會同時開啟父元素的相對定位）
     • 如果所有的祖先元素都沒有開啟定位，則會相對于瀏覽器窗口左上角(0px 0px)進行定位
  4. 絕對定位會使元素提升一個層級
  5. 內(nèi)聯(lián)元素變成塊元素隆敢，對內(nèi)聯(lián)元素設(shè)置的寬高生效,塊元素的寬度和高度默認都被內(nèi)容撐開
• 偏移量:-----水平 垂直
  • left:200px;
  • left:200px;

4.固定定位---fixed

• position:fixed;
  特殊的絕對定位它的大部分特點都和絕對定位一樣
• 固定定位與絕對定位的不同:
  • 固定定位永遠都會相對于瀏覽器窗口進行定位
  • 固定定位會固定在瀏覽器窗口某個位置发皿，不會隨滾動條滾動
  • IE6不支持固定定位
• 偏移量: --左右 上下
  • left:100px;
  • top:200px;

2. 元素的層級---z-index

• z-index:指定一個正整數(shù),設(shè)置元素層級,值越高會優(yōu)先顯示
  • 如果定位元素的層級是一樣，則下邊的元素會蓋住上邊的
  • z-index只能對開啟定位的元素使用,沒有開啟定位的元素不能使用
  • 父元素的層級再高,也不能高過子元素

3. 透明度 ----opacity

• opacity:設(shè)置元素北京的透明,值在:0-1之間
  • 0 :完全透明
  • 1 :完全不透明
  • 0.5:半透明
• 在ie8 以及以下不能用,解決方法如下:
  • filter:alpha(opacity=50);----(0-100)
    • 0:完全透明
    • 100:完全不透明
    • 50:半透明

4. 背景---background-image

• background-image:url(img/2.jpg)
  • 圖片使用相對路徑
• 如果元素小于圖片的大小,默認顯示左上角的圖片,
• 元素等于圖片大小,講北京圖片全部顯示
• 如果元素大于圖片的大小,默認用圖片大小來平鋪鋪滿整個元素
  • 圖片不平鋪元素時的設(shè)置---background-repeat
    • background-repeate:repeate默認值,背景圖片會雙方向(水平 垂直)重鋪(平鋪)
    • background-repeate:no-repeat 不平鋪
    • background-repeate:repeate-x----水平方向平鋪
    • background-repeate:repeate-y----垂直方向平鋪
• 同時為元素指定背景顏色和背景圖片,背景顏色在背景圖片的后面

.body{
    background-color:#bfa
    background-image:url(../img/1.jpg)       
}

• 可以用圖片平鋪的效果來實現(xiàn)背景顏色是漸變的導(dǎo)航條
  • 截取漸變顏色的導(dǎo)航條,垂直方向上的1px
  • 設(shè)置x方向的平鋪

1. 背景的偏移與定位

• background-position:調(diào)整背景圖片在元素中的位置

• 可選項:

  • 該屬性可以使用 top right left bottom center中的兩個值來指定一個背景圖片的位置
    • top left
    • bottom left
    • center center
  • 如果中給出一個值,則第二個值默認是center

• xpx ypx---直接給定兩個偏移量

  • 第一個值是水平偏移量
    • 如果指定的是一個正值拂蝎，則圖片會向右移動指定的像素
    • 如果指定的是一個負值穴墅，則圖片會向左移動指定的像素
  • 第二個是垂直偏移量
    • 如果指定的是一個正值，則圖片會向下移動指定的像素
    • 如果指定的是一個負值温自，則圖片會向上移動指定的像素

• background-attachment用來設(shè)置背景圖片是否隨頁面一起滾動

  • 可選值：
    • scroll玄货，默認值，背景圖片隨著窗口滾動
    • fixed悼泌，背景圖片會固定在某一位置松捉，不隨頁面滾動
  • 不隨窗口滾動的圖片，我們一般都是設(shè)置給body馆里，而不設(shè)置給其他元素

2. 雪碧圖-----優(yōu)化按鈕閃爍問題

• 問題描述:當我們?yōu)橐粋€按鈕在不同的狀態(tài)下設(shè)置不同的亮度時, 做完功能以后隘世，發(fā)現(xiàn)在第一次切換圖片時，會發(fā)現(xiàn)圖片有一個非仇伲快的閃爍丙者，這個閃爍會造成一次不佳的用戶體驗

• 產(chǎn)生問題的原因：
  背景圖片是以外部資源的形式加載進網(wǎng)頁的，瀏覽器每加載一個外部資源就需要單獨的發(fā)送一次請求,但是我們的外部資源并不是同時加載营密，瀏覽器會在資源被使用時才去加載資源,我們這個練習(xí)械媒，一上來瀏覽器只會加載link.png
  由于hover和active的狀態(tài)沒有馬上觸發(fā)，所以hover.png和active.png并不是立即加載的,當hover被觸發(fā)時评汰，瀏覽器才去加載hover.png,當active被觸發(fā)時纷捞，瀏覽器才去加載active.png
  由于加載圖片需要一定的時間侣集，所以在加載和顯示過程會有一段時間，背景圖片無法顯示兰绣，導(dǎo)致出現(xiàn)閃爍的情況

• 解決問題:

  • 為了解決該問題世分，可以將三個圖片整合為一張圖片，這樣可以同時將三張圖片一起加載缀辩，就不會出現(xiàn)閃爍的問題了
  • 然后再通過background-position來切換要顯示的圖片的位置臭埋，這種技術(shù)叫做圖片整合技術(shù)（CSS-Sprite）
  • 優(yōu)點：
    1. 將多個圖片整合為一張圖片里，瀏覽器只需要發(fā)送一次請求臀玄，可以同時加載多個圖片瓢阴，提高訪問效率，提高了用戶體驗健无。
    2. 將多個圖片整合為一張圖片荣恐，減小了圖片的總大小，提高請求的速度累贤，增加了用戶體驗

5. 簡寫背景屬性

background-color:red;
background-image:url(/img/1.jpg);
background-position:center center;
background-repeat: no-repeat;
background-attachment:fixed;
<!-- 簡寫背景屬性 -->
background:red  url(/img/1.jpg) center center no-repeat fixed

• 沒有數(shù)量要求,沒有順序要求,不寫的樣式就是用默認值

6. 表格----table

• table創(chuàng)建表格
• th :創(chuàng)建表頭,會有默認的字體,加粗
• tr創(chuàng)建表格中的行,有幾行就有幾個tr
• td創(chuàng)建單元格,有幾個單元格就創(chuàng)建幾個td,或者說列

• rowspan用來設(shè)置縱向的合并單元格
• colspan用來設(shè)置縱向的合并單元格
• border-collapse可以用來設(shè)置表格的邊框合并
  • border-collapse: collapse;
• border-spacing
  • table和td邊框之間默認有一個距離叠穆，通過border-spacing屬性可以設(shè)置這個距離

<body>
    <!-- table創(chuàng)建表格 -->
    <table border="1" width="40%" align="center">
        <!-- tr創(chuàng)建表格中的行,有幾行就有幾個tr -->
        <tr>
            <!-- td創(chuàng)建單元格,有幾個單元格就創(chuàng)建幾個td,或者說列 -->
            <td>A1</td>
            <td>A2</td>
            <td>A3</td>
            <td>A4</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>B2</td>
            <td>B3</td>
            <!-- rowspan用來設(shè)置縱向的合并單元格 -->
            <td>B4</td>
        </tr>
        <tr>
            <td>C1</td>
            <td>C2</td>
            <td rowspan="2">C3</td>
            <td>C4</td>
        </tr>
        <tr>
            <td>D1</td>
            <td>D2</td>
            <!-- <td>D3</td> -->
            <td>D4</td>
        </tr>
        <tr>
            <td>E1</td>
            <td>E2</td>
            <!-- colspan用來設(shè)置縱向的合并單元格 -->
            <td colspan="2">E3</td>
            <!-- <td>E4</td> -->
        </tr>
    </table>
</body>

• 設(shè)置表格的樣式

<style type="text/css">


    table{
        /*設(shè)置表格的寬度*/
        width: 300px;
        /*居中*/
        margin: 0 auto;
        /*邊框*/
        /*border:1px solid black;*/
        /*table和td邊框之間默認有一個距離，通過border-spacing屬性可以設(shè)置這個距離*/
        /*border-spacing: 10px;*/
        /*
        border-collapse可以用來設(shè)置表格的邊框合并
        如果設(shè)置了邊框合并臼膏，則border-spacing自動失效
        */
        border-collapse: collapse;
        /*設(shè)置背景樣式*/
        /*background-color: #bfa;*/
    }
        /*設(shè)置邊框*/
    th, td{
        border: 1px solid black;
    }
    /*設(shè)置隔行變色*/
        /*ie8不支持,ie9以及以上支持*/
    tbody > tr:nth-child(even){
        background-color: #bfa;
    }
    /*鼠標移入到tr以后舔亭，改變顏色*/
        /*ie6不支持*/
    tr:hover{
        background-color: yellow;
    }       
</style>

7. 長表格

• 表格
  • thead 表頭,永遠會顯示在表格的頭部
  • tbody 表格主體,永遠都會顯示表格的中間
  • tfoot 表格底部,永遠都會顯示表格的底部
  • 三者的顯示和代碼順序無關(guān),通常情況下,將thead tfoot 寫在一起,便于修改和檢查
• 三個部分的分析
  • 這三個標簽的作用抬旺，就來區(qū)分表格的不同的部分馁痴，他們都是table的子標簽按灶，都需要直接寫到table中，tr需要寫在這些標簽當中
  • 如果表格中沒有寫tbody始鱼，瀏覽器會自動在表格中添加tbody,并且將所有的tr都放到tbody中仔掸，所以注意tr并不是table的子元素，而是tbody的子元素
    • 通過table > tr 無法選中行 需要通過tbody > tr

<thead>
    <tr>
        <th>日期</th>
        <th>收入</th>
        <th>支出</th>
        <th>合計</th>
    </tr>
</thead>


<tfoot>
    <tr>
        <td></td>
        <td></td>
        <td>合計</td>
        <td>100</td>
    </tr>
</tfoot>

<tbody>
    <tr>
        <td>2017.03.01</td>
        <td>500</td>
        <td>300</td>
        <td>2000</td>
    </tr>
    <tr>
        <td>2017.03.01</td>
        <td>500</td>
        <td>300</td>
        <td>2000</td>
    </tr>
    <tr>
        <td>2017.03.01</td>
        <td>500</td>
        <td>300</td>
        <td>2000</td>
    </tr>
</body>

8. 表格的布局

• table>(tr>td)*3
• 表格的列數(shù)由td最多的那行決定
• 表格是可以嵌套医清，可以在td中在放置一個表格

9. clearfix

<style type = 'text/css'>
    .clearfix:befor,.clearfix:after{
        content: '';
        display: table;
        clear: both;
    }
    .clearfix{
        zoom:1;
    }
</style>
<body>
    <div class="box3 clearfix">
        <div class="box4"></div>
    </div>

    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>

9.表單

• 表單的作用就是用來將用戶信息提交給服務(wù)器的
  • 比如：百度的搜索框 注冊 登錄這些操作都需要填寫表單

1. form----創(chuàng)建表單

* form標簽中必須指定一個action屬性起暮，該屬性指向的是一個服務(wù)器的地址
    * 當我們提交表單時將會提交到action屬性對應(yīng)的地址
* 使用form創(chuàng)建的僅僅是一個空白的表單，我們還需要向form中添加不同的表單項

2. filedset

* 在表單中可以使用fieldset來為表單項進行分組状勤，可以將表單項中的同一組放到一個fieldset中
* 在fieldset可以使用legend子標簽鞋怀，來指定組名

3. input ----文本框

* 使用input來創(chuàng)建一個文本框，它的type屬性是text
    * 如果希望表單項中的數(shù)據(jù)會提交到服務(wù)器中持搜，還必須給表單項指定一個name屬性,name表示提交內(nèi)容的名字

* 用戶填寫的信息會附在url地址的后邊以查詢字符串的形式發(fā)送給服務(wù)器:url地址?查詢字符串
    * 格式：  
    屬性名=屬性值&屬性名=屬性值&屬性名=屬性值&……
* 在文本框中也可以指定value屬性值密似，該值將會作為文本框的默認值顯示

4. lable

* 該標簽可以指定一個for屬性，該屬性的值需要指定一個表單項的id值

5. 單選按鈕

• 使用input來創(chuàng)建一個單選按鈕葫盼，它的type屬性使用radio
• 單選按鈕通過name屬性進行分組残腌，name屬性相同是一組按鈕
• 像這種需要用戶選擇但是不需要用戶直接填寫內(nèi)容的表單項，還必須指定一個value屬性，這樣被選中的表單項的value屬性值將會最終提交給服務(wù)器
• 如果希望在單選按鈕或者是多選框中指定默認選中的選項抛猫，則可以在希望選中的項中添加checked

6. 多選框

使用input創(chuàng)建一個多選框蟆盹，它的type屬性使用checkbox

7. 下拉列表

• 使用select來創(chuàng)建一個下拉列表

  • 下拉列表的name屬性需要指定給select，而value屬性需要指定給option

  • 可以通過在option中添加selected="selected"來將選項設(shè)置為默認選中

  • 當為select添加一個multiple="multiple"闺金，則下拉列表變?yōu)橐粋€多選的下拉列表

8. 下拉列表分組---optgroup

• 同一個optgroup中的選項是一組,
• 可以通過label屬性來指定分組的名字

9 .文本域---text---多行輸入

<body>
    自我介紹<textarea name="info"></textarea>
</body>

10. 按鈕---input

• 提交按鈕
  • 提交按鈕可以將表單中的信息提交給服務(wù)器
  • 使用input創(chuàng)建一個提交按鈕逾滥，它的type屬性值是submit
  • 在提交按鈕中可以通過value屬性來指定按鈕上的文字

      <input type="submit" value="注冊" />
  

• 重置按鈕

  <!-- <input type="reset">可以創(chuàng)建一個重置按鈕，點擊重置按鈕以后表單中內(nèi)容將會恢復(fù)為默認值 -->
  <input type="reset">
  

• 單純按鈕

  <!-- 使用input type=button可以用來創(chuàng)建一個單純的按鈕败匹，這個按鈕沒有任何功能寨昙，只能被點擊 -->
  <input type="button" value="按鈕">
  

11. 按鈕---button

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按鈕</button>