一. 地址

1. 相對地址

相對於引用文件本身去定位被引用的文件地址，相對地址的定義技巧：

“ ./ ” 表示當前文件所在目錄下
“ ../ ” 表示當前文件所在目錄下的上一級目錄

2. 絕對地址

相對於磁盤的位置去定位文件的地址:

例如:<img src="C:\course5\03day\images\001.jpg" alt="圖片" />

絕對地址在整體文件遷移時會因爲磁盤和頂層目錄的改變而找不到文件，相對地址就沒有這個問題。

二. CSS盒子模型

盒子模型解釋

元素在頁面中顯示成一個方塊，類似一個盒子，CSS盒子模型就是使用現實中盒子來做比喻，幫助我們設置元素對應的樣式。盒子模型示意圖如下：

把元素叫做盒子，設置對應的樣式分別爲：盒子的寬度(width)、盒子的高度(height)、盒子的邊框(border)、盒子內的內容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。

設置寬高 width height

width:200px;  /* 設置內容的寬度，不是盒子整體寬度 */ 
height:200px; /* 設置內容的高度，不是盒子整體高度 */

設置邊框 border

設置一邊的邊框，比如頂部邊框，可以按如下設置：

border-top:10px solid red;

其中10px表示線框的粗細；solid表示線性。

設置其它三個邊的方法和上面一樣，把上面的’top’換成’left’就是設置左邊，換成’right’就是設置右邊，換成’bottom’就是設置底邊。

四個邊如果設置一樣，可以將四個邊的設置合併成一句：

border:10px solid red;

設置內間距 padding

設置盒子四邊的內間距，可設置如下：

padding-top：20px;     /* 設置頂部內間距20px */ 
padding-left:30px;     /* 設置左邊內間距30px */ 
padding-right:40px;    /* 設置右邊內間距40px */ 
padding-bottom:50px;   /* 設置底部內間距50px */

上面的設置可以簡寫如下：

/* 四個值按照順時針方向，分別設置的是 上 右 下 左  四個方向的內邊距值。 */
padding：20px 40px 50px 30px;

padding後面還可以跟3個值，2個值和1個值，它們分別設置的項目如下：

padding：20px 40px 50px; /* 設置頂部內邊距爲20px，左右內邊距爲40px，底部內邊距爲50px */ 
padding：20px 40px; /* 設置上下內邊距爲20px，左右內邊距爲40px*/ 
padding：20px; /* 設置四邊內邊距爲20px */

設置外間距margin
外邊距的設置方法和padding的設置方法相同，將上面設置項中的’padding’換成’margin’就是外邊距設置方法。

外間距居中技巧
如果子元素是塊元素，且它的寬度小於父元素，可以將子元素左右設置auto來水平居中子元素

/* 子元素上下外邊距設爲0，左右設置爲auto */
margin:0px auto;

盒子的真實尺寸
盒子的width和height值固定時，如果盒子增加border和padding，盒子整體的尺寸會變大，所以盒子的真實尺寸爲：

盒子寬度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

三. 列表標籤

前端中列表分爲兩種:

有序列表

無序列表

1. 無序列表

無序列表一般應用在佈局中的新聞標題列表和文章標題列表以及菜單，它是含有語義的，標籤結構如下：

使用方式:         ul>li{列表標題}*3


<ul>
    <li>列表標題</li>
    <li>列表標題</li>
    <li>列表標題</li>
</ul>

列表的內容一般是可以鏈接的，點擊鏈接到新聞或者文章的具體內容，所以具體結構一般是這樣的：

ul>(li>a[href=#]{列表標題 $})*3

<ul>
    <li><a href="#">列表標題 1</a></li>
    <li><a href="#">列表標題 2</a></li>
    <li><a href="#">列表標題 3</a></li>
</ul>

顯示效果:

2. 有序列表

使用方式:         ol>li{列表標題}*3

<ol>
    <li>列表標題</li>
    <li>列表標題</li>
    <li>列表標題</li>
</ol>

顯示效果:

寫列表標籤的時候, 我們可以去掉前面的點或者是序號:
- css <style> li { list-style:none; /* 取消列表前面的序號或者是點 */ } </style>

四. HTML表單

表單用於蒐集不同類型的用戶輸入，表單由不同類型的標籤組成，相關標籤及屬性用法如下：

1、<form>標籤定義整體的表單區域

action屬性定義表單數據提交地址

method屬性定義表單提交的方式，一般有“get”方式和“post”方式

使用方式:

<form action="" method="">

</form>

2、<label>標籤爲表單元素定義文字標註

label 的 for 屬性值可以和 input 的 id 名書寫一致, 使 label 的點擊也能夠觸發 input 的聚焦

label的使用方式:
<label for="">Male</label>
<label for="">Female</label>

label的for屬性設置: 
<label for="male">用戶名:
<input type="text" id="male">

3、<input>標籤定義通用的表單元素

type屬性
- type=”text” 定義單行文本輸入框
- type=”password” 定義密碼輸入框
- type=”radio” 定義單選框
- type=”checkbox” 定義複選框
- type=”file” 定義上傳文件
- type=”submit” 定義提交按鈕
- type=”reset” 定義重置按鈕
- type=”button” 定義一個普通按鈕
value屬性定義表單元素的值
name屬性定義表單元素的名稱，此名稱是提交數據時的鍵名

使用方法:

<input type="text" name="username" placeholder="請您輸入姓名">

<input type="password" name="password">

<input type="radio" name="gender" value="1"> 男
<input type="radio" name="gender" value="0"> 女

<input type="checkbox" name="hobby" value="1"> 唱歌

<input type="file" name="file"> 

<input type="submit">
<input type="reset">
<input type="button" value="按鈕1">

4、<textarea>標籤定義多行文本輸入框

使用方法:
<textarea name="" placeholder="提示信息..." id="" cols="30" rows="10">
    textarea的使用
</textarea>

5、<select>標籤定義下拉表單元素

6、<option>標籤與<select>標籤配合，定義下拉表單元素中的選項

使用方法: 

創建帶有 4 個選項的選擇列表：
<select name="province" id="">
    <option value="1">北京</option>
    <option value="2">河北</option>
    <option value="3">河南</option>
    <option value="4">湖北</option>
</select>

註冊表單實例：

<form action="http://www..." method="get">
        <p>
            <label>姓名：</label>
            <input type="text" name="username" />
        </p>
        <p>
            <label>密碼：</label>
            <input type="password" name="password" />
        </p>
        <p>
            <label>性別：</label>
            <input type="radio" name="gender" value="0" /> 男
            <input type="radio" name="gender" value="1" /> 女
        </p>
        <p>
            <label>愛好：</label>
            <input type="checkbox" name="like" value="sing" /> 唱歌
            <input type="checkbox" name="like" value="run" /> 跑步
            <input type="checkbox" name="like" value="swiming" /> 游泳
        </p>
        <p>
            <label>照片：</label>
            <input type="file" name="person_pic">
        </p>
        <p>
            <label>個人描述：</label>
            <textarea name="about"></textarea>
        </p>
        <p>
            <label>籍貫：</label>
            <select name="site">
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">廣州</option>
                <option value="3">深圳</option>
            </select>
        </p>
        <p>
            <input type="submit" name="" value="提交">
            <input type="reset" name="" value="重置">
        </p>
</form>

單行文本框文字提示

placeholder 設置input輸入框的默認提示文字。
表單包含很多內容, 例如:
- 單選: radio
- 多選: checkbox
- 密碼: password
- 文本: text
- 按鈕: reset, submit, file
- 多行文本輸入: textarea
- 下拉菜單: select option
表單( form )可以直接提交: 提交方法包含 get post
- action: 提交的服務器地址
- method: 提交的方法

五. 表格元素及相關樣式

1、<table>標籤

聲明一個表格

2、<tr>標籤

定義表格中的行

3、<td>和<th>標籤

定義列以及列中的標題

td代表列，th表示列中的標題部分(加粗)

它們的常用屬性如下：

colspan 設置單元格水平合併，設置值是數值
rowspan 設置單元格垂直合併，設置值是數值

表格相關樣式屬性

border-collapse 設置表格的邊線合併，如：border-collapse:collapse;
border=’1’ 可以設置table的邊框大小
text-align 可以設置對齊方式: left right center

總結:

在網頁中, 表格用一般用 table 標籤來做
表格中分爲行和列
表格中的行爲 tr 標籤
表格中的列爲 td 標籤
其中每一列都可以有一個標題, 我們可以使用 th 標籤

<table>
    <tr>
        <th>標題一</th>
        <th>標題二</th>
        <th>標題三</th>
        <th>標題四</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

顯示效果:

六. CSS屬性進階

1.文本常用樣式屬性進階：

text-align 設置文字水平對齊方式，如text-align:center 設置文字水平居中
text-indent 設置文字首行縮進，如：text-indent:32px; 設置文字首行縮進32px

CSS部分: 
<style>
    .box {
        width:80px;
        height:30px;
        background: pink;
        text-align: center;
    }
    .pbox {
        /* css裏面默認的字體大小是16px */
        font-size: 20px;
        text-indent: 32px;
    }
</style>

HTML部分:
<div class="box">
    <p>
        你好世界
    </p>
</div>
<p class="pbox">
    hello,world
</p>

2. display屬性

作用: 第一個決定了當前元素是否應該顯示, 第二個決定了當前元素應該以什麼類型顯示

display 屬性規定元素應該生成的框的類型。

display 的默認屬性值是 inline, 此元素會被顯示爲內聯元素

display屬性是用來設置元素的類型及隱藏的，常用的屬性有：

none 元素隱藏且不佔位置

block 此元素會被顯示爲塊元素

inline 此元素會被顯示爲內聯元素

inline-block 行內塊元素 ( 瞭解 )

CSS部分: 
<style>
    div {
        display: inline;  
    }

    a {
        display: block;
    }

    .pbox {
        width: 200px;
        height: 200px;
        background: pink;
        display: none;
    }
</style>

HTML部分:
<div>
    <div>這是個div</div>
    <div>div裏邊的div</div>

    <a href="#">這是第一個鏈接</a>
    <a href="#">這是第二個鏈接</a>

    <p class="pbox" style="display:block">
    </p>
</div>

font:

font: 樣式屬性是一個集合, 可以吧關於 font 的都放到這個屬性裏面:

使用方法:

<style>
    div {
       font:  bold italic 18px/20px  arial; 
    }
</style>


HTML部分:
<div>這是div裏面的文字</div>

其中: arial 是一種字體, 和微軟雅黑一樣.

font-size 和 font-family 的值是必需的。

font-style 定義字體的風格

normal: 正常

italic: 瀏覽器會顯示一個2斜體的字體樣式。

font-variant 能把字體變小一號並且全大寫顯示 small-caps 變小一號並且全大寫顯示 normal 正常

font-weight 是否加粗 bold 是加粗 normal 正常

font-size/line-height 字體大小 / 行高大小

font-family 字體類型

3. CSS元素溢出

當子元素的尺寸超過父元素的尺寸時，需要設置父元素顯示溢出的子元素的方式，設置的方法是通過overflow屬性來設置。

overflow的設置項：

1、visible 默認值。內容不會被修剪，會呈現在元素框之外。

2、hidden 內容會被修剪，並且其餘內容是不可見的。

3、scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容。

4、auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其餘的內容。

CSS部分: 
<style>
    div {
        width:100px;
        height:100px;
        overflow: auto;
    }
</style>

HTML部分:
<div>
    格嘰格嘰~
    <br><br>
    格嘰格嘰~~
    <br><br>
    格嘰~格嘰~~
    <br><br>
</div>

七. 定位

![timg (2)](images/timg (2).jpg)

把某一個標籤, 安置到某一個位置去, 這個過程稱爲定位.

1. 文檔流概念( 瞭解 )

文檔流，是指盒子按照 HTML 標籤編寫的順序依次從上到下，從左到右排列，塊元素佔一行，行內元素在一行之內從左到右排列，先寫的先排列，後寫的排在後面，每個盒子都佔據自己的位置。

2. 定位分類:

我們可以使用 CSS 的 position 屬性來設置元素的定位類型，position 的設置項如下：

static 默認值. 沒有定位: 元素出現在正常的流中(忽略top, bottom, left, right 或者 z-index 聲明)
relative 生成相對定位元素，一般是將父級設置相對定位，子級設置絕對定位，子級就以父級作爲參照來定位，否則子級相對於body來定位。
absolute: 生成絕對定位元素，元素脫離文檔流，不佔據文檔流的位置，可以理解爲漂浮在文檔流的上方，相對於上一個設置了定位的父級元素來進行定位，如果找不到，則相對於body元素進行定位。
fixed: 生成固定定位的元素，相對於瀏覽器窗口進行定位。

元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。

定位元素的偏移

定位的元素還需要用left、right、top或者bottom來設置相對於參照元素的偏移值。

1. 相對定位:

相對定位是相對於該元素在文檔流中的原始位置,即以自己原始位置爲參照物. 有趣的是: 即使設置了元素的相對定位以及偏移值, 元素還佔有原來的位置, 即佔據文檔流的空間.對象遵循正常文檔流, 但依據 top, left, right, bottom等屬性在正常文檔流中偏移位置. 而其層疊通過 z-index 屬性定義

注意: position: relative 的主要用法是: 方便絕對定位元素找到參照物.

CSS部分: 
<style>
    .con {
        width:300px;
        height:300px;
        border:1px solid black;
        margin:0px auto;
    }

    .con div {
        width:200px;
        height:70px;
        margin:10px;
    }

    .box01 {
        background:lightgreen;
        /* 設置相對定位 */
        position:relative;
        left:50px;
        top:50px;
    }

    .box02 {
        background: lightskyblue
    }

    .box03 {
        background: lightpink;
    }
</style>


HTML部分:
<!-- .con>.box01+.box02+.box03 -->
<div class="con">
    <div class="box01">1</div>
    <div class="box02">2</div>
    <div class="box03">3</div>
</div>

2. 絕對定位:

定義: 設置爲絕對定位的元素框從文檔流完全刪除, 並相對於最近的已定位祖先元素定位, 如果元素沒有已定位的祖先元素,那麼他的位置相對於最初的包含塊( 即body元素 ). 元素原先在正常文檔流中所佔的空間會關閉, 就好像該元素原來不存在一樣. 元素定位後生成一個塊級框, 而不論原來它在正常流中生成何種類型的框.

重點: 如果父級設置了 position 屬性, 例如: position: relative, 那麼子元素就會以父級的左上角爲原點進行定位. 這樣能很好的解決自適應網站的標籤偏離問題, 即父級爲自適應, 那我子元素就設置position:absolute; 父元素設置position: relative; 然後top, bottom, right, left 用百分比寬度表示.

總結: 參照物用相對定位, 子元素用絕對定位, 並且保證相對定位參照物不會偏移即可.

<style>
    .con{
        width:300px;
        height:300px;
        border:1px solid black;
        margin:0px auto;
        /* 父級設置爲相對定位，不設置偏移，子級就可以以它爲參照做絕對定位 */
        position: relative;
        /* 設置父級的溢出隱藏 */
        overflow: hidden;
    }

    .con div{
        width:200px;
        height:70px;
        margin:10px;
    }

    .box01{
        background:lightgreen;
        /* 設置絕對定位 */
        position:absolute;
        left:131px;
        top:50px;
    }

    .box02{
        background: lightskyblue
    }

    .box03{
        background: lightpink;
    }
</style>


HTML部分:
<!-- .con>.box01+.box02+.box03 -->
<div class="con">
    <div class="box01">1</div>
    <div class="box02">2</div>
    <div class="box03">3</div>
</div>

3. 固定定位

fixed: 對象脫離正常文檔流, 使用 top, right, bottom, left等屬性以窗口爲參照點進行定位, 當出現滾動條時, 對象不會隨着滾動.

而其層疊通過 z-index 屬性定義.

注意點: 一個元素若設置了 position: absolute | fixed; 則該元素就不能設置 float. 這是一個常識性知識點, 因爲這是兩個不同的流, 一個是浮動流, 另一個是定位流. 但是 relative 卻可以. 因爲它原本所佔的空間仍然佔據文檔流.

理論上, 被設置爲 fixed 的元素會被定位於瀏覽器敞口的一個指定座標, 不論窗口是否滾動, 他都會固定在這個位置.

<style>
    .con{
        width:300px;
        height:300px;
        border:1px solid black;
        margin:0px auto;
    }

    .con div{
        width:200px;
        height:70px;
        margin:10px;
    }

    .box01{
        background:lightgreen;
        /* 設置固定定位 */
        position:fixed;
        right:131px;
        bottom:50px;
    }

    .box02{
        background: lightskyblue
    }

    .box03{
        background: lightpink;
    }
</style>

HTML部分:
<!-- .con>.box01+.box02+.box03 -->
<div class="con">
    <div class="box01">1</div>
    <div class="box02">2</div>
    <div class="box03">3</div>
</div>

3. 元素層級

絕對定位元素是浮動在正常的文檔流之上的，可以用 z-index 屬性來設置元素的層級

例如:

僞代碼如下:2

.box01{
    ......
    position:absolute;  /* 設置了絕對定位 */
    left:200px;         /* 相對於參照元素左邊向右偏移200px */
    top:100px;          /* 相對於參照元素頂部向下偏移100px */
    z-index:10          /* 將元素層級設置爲10 */
}

CSS部分: 
<style>
    .con{
        width:300px;
        height:300px;
        border:1px solid black;
        margin:0px auto;
        position: relative;
    }

    .con div{
        width:200px;
        height:70px;
        margin:10px;
        position:absolute;
    }

    .box01{
        background:lightgreen;
        left:0px;
        top:0px;

        /* 設置定位元素的層級 */
        z-index:6;
    }

    .box02{
        background: lightskyblue;
        left:30px;
        top:30px;
        z-index:7;
    }
    .box03{
        background: lightpink;
        left:60px;
        top:60px;
        z-index:8;
    }
</style>

HTML部分: 
<!-- .con>.box01+.box02+.box03 -->
<div class="con">
    <!-- 如果不設置z-index屬性，定位元素的層級安裝代碼書寫的順序，先寫的排列在下面，後寫的排列在上面 -->
    <div class="box01">1</div>
    <div class="box02">2</div>
    <div class="box03">3</div>
</div>

4 . 練習: 用固定定位創建彈窗

<style>
    .pop{
        width:500px;
        height:300px;
        border:1px solid black;
        background:white;
        position: fixed;

        /* 彈框水平垂直居中的寫法： */
        left:50%;
        top:50%;
        margin-left:-251px;
        margin-top:-151px;
        /* 設置彈框的層級,設置比較大的值，蓋住其他所有的元素*/
        z-index:9999;
    }
    .pop h3{
        margin:5px;
        background: lightskyblue;
        line-height:40px;
    }

    .mask{
        position:fixed;
        left:0px;
        top:0px;
        width:100%;
        height:100%;
        background:black;
        z-index:9998;

        /* 設置背景的透明度 */
        opacity:0.3;
        /* 透明度兼容寫法，兼容IE */
        filter:alpha(opacity=30);

    }

    /* 設置pop_con的隱藏，可以同時將彈框和背景隱藏起來 */
    .pop_con{
        display:none;
    }  
</style>

HTML部分:
<h1>網頁內容</h1>
<div class="pop_con" style="display:block">
    <div class="pop">
        <h3>彈框標題</h3>
        <p>彈框的文字內容</p>
    </div>
    <div class="mask"></div>
</div>

八. 頁面嵌套

在一個頁面中可以開一個局部的窗口，嵌入另外一個頁面

製作這樣的功能我們一般使用: iframe 標籤來實現

使用方法: 

<iframe src="" frameborder="">

</iframe>

src: 設置另一個網頁的地址

frameborder: 設置這個局部窗口邊框的粗細

提升:

iframe 可以和 a 標籤搭配使用, 呈現切換的效果:

我們知道 a 標籤有 target 屬性:

target=”_blank” : 新開一個瀏覽器窗口顯示鏈接的頁面

如果 target 的值和 iframe 的 name 值保持相同, 則 a 標籤切換後的 href 將作用到 iframe 的 src 上:

<a href="001.html" target="name">001頁面</a>
<a href="002.html" target="name">002頁面</a>
<a href="003.html" target="name">003頁面</a>

<iframe src="001.html" frameborder="0" name="name"></iframe>

九. 元素居中顯示技巧

1. 居中顯示:

想要使某個元素能夠居中顯示, 需要設置其 margin 屬性爲: 0px auto:

CSS部分:
<style>
.box{
    width: 300px; 
    height: 300px;
    background: gold;
    margin:0px auto;
}
</style>

HTML部分: 
<div class="box"></div>

總結:

如果想要某個元素居中, 則需要設置他的 margin : 0px auto;
多個元素想要居中, 則每個單獨的元素都需要設置該屬性.
margin: 0px auto; =====> margin: 0px auto 0px auto; (上, 右, 下, 左)

十. CSS權重值計算 ( 簡單瞭解 )

什麼是權重值:

例子: 根據分數, 決定排名

小明的分數: 總分( 550 )

英語: 100

數學: 130

語文: 90

理綜: 230

小紅的分數: 總分 ( 530 )

英語: 110

數學: 120

語文: 100

理綜: 200

因爲小明的分數 > 小紅的分數 , 所以小明的排名高於小紅的排名

我們上面說的各個學科, 其實就相當於各個選擇器, 各學科有分數, 各選擇器也有分數, 分數相加最高的顯示在最上面, 覆蓋掉分數低的. 各個選擇器的分數就是權重.

1.權重瞭解

內聯樣式的權重值最高: 1000 (內聯: 寫在標籤上的樣式)
標籤選擇器的權重值爲最低: 1
類選擇器的權重值爲: 10 ( 瞭解 )
僞類選擇器權重值爲: 10 ( 瞭解 )
id 選擇器的權重值爲: 100

CSS部分:
<style>
    /* 權重值：1 */
    div{
        color:red;
    }

    /* 權重值：1+10+10+1=22 */
    body .con .box h3{
        color: blue;
    }

    /* 權重值：10+10+1=21 */
    .con .box h3{
        color:red;
    }
</style>

HTML部分:
<!-- style的權重值：1000 -->
<div style="color:blue">這是一個div</div>
<div class="con">
    <div class="box">
        <h3>這是一個h3標籤</h3>
    </div>
</div>

前端（二）

一. 地址

1. 相對地址

2. 絕對地址

二. CSS盒子模型

三. 列表 標籤

1. 無序列表

2. 有序列表

四. HTML表單

五. 表格元素及相關樣式

六. CSS屬性進階

1.文本常用樣式屬性進階：

2. display屬性

3. CSS元素溢出

七. 定位

1. 文檔流概念( 瞭解 )

2. 定位分類:

1. 相對定位:

2. 絕對定位:

3. 固定定位

3. 元素層級

4 . 練習: 用固定定位創建彈窗

八. 頁面嵌套

九. 元素居中顯示技巧

1. 居中顯示:

十. CSS權重值計算 ( 簡單瞭解 )

1.權重瞭解

三. 列表標籤