HTML學(xué)習(xí)筆記（完）

概述

在網(wǎng)易云課堂學(xué)習(xí)李南江老師的《從零玩轉(zhuǎn)HTML5前端+跨平臺(tái)開發(fā)》時(shí)，所整理的筆記。
筆記內(nèi)容為根據(jù)個(gè)人需求所整理，并不完善，僅供參考。
于2018.05.16 23時(shí)學(xué)習(xí)完全部課程。

1. WebStorm設(shè)置&快捷鍵

1.1 WebStorm設(shè)置

  • 代碼區(qū)背景色改成黑色

    File —— Setting —— Editor —— Colors&Fonts —— Scheme，選擇“Darcula”

  • 改字體大小

    File —— Setting —— Editor —— Colors&Fonts —— Fonts

  • 文檔內(nèi)容自動(dòng)換行

    File —— Setting —— Editor —— General —— Soft Wraps，勾選“Use soft wraps in editor”

1.2 WebStorm快捷鍵

  • 新建HTML文件：Ctrl + Alt + Insert
  • 快速將光標(biāo)移至行首/行末：Home/End
  • 光標(biāo)在多行中閃爍（可同時(shí)輸入相同的內(nèi)容）：按住Alt不放, 然后再按住左鍵不放, 拖動(dòng)鼠標(biāo)即可
  • 快速?gòu)?fù)制光標(biāo)所在行所有內(nèi)容：Ctrl + D
  • 快速刪除表表所在行所有內(nèi)容：Ctrl + X
  • 自動(dòng)在一段內(nèi)容的前后加上標(biāo)簽：Ctrl + Alt + T，回車，然后輸入對(duì)應(yīng)的標(biāo)簽即可
  • 快速注釋：Ctrl + /，要取消注釋則再按一下Ctrl + /

1.3 快捷編輯

  • 快速生成無(wú)序列表：ul>li*數(shù)字，即可快速生成一個(gè)有“數(shù)字”項(xiàng)的無(wú)序列表，“數(shù)字為1時(shí)可省略。

2. 字符集

<html>
    <head>
        <meta charset=“UTF-8” />
    </head>
    <body>
        ......
    </body>
</html>

常用字符集：

  • GBK
  • UTF-8

注意：

  • 在HTML文件中指定的字符集必須和保存這個(gè)文件的字符集一致，否則還是會(huì)出現(xiàn)亂碼。
  • 所以僅僅指定字符集不一定能解決亂碼問題，還需要保存文件的時(shí)候，文件的保存格式必須和指定的字符集一致才能保證沒有亂碼。

3. DTD文檔聲明

在HTML文件第一行告訴瀏覽器，當(dāng)前網(wǎng)頁(yè)用的是哪個(gè)版本的HTML規(guī)范來(lái)編寫的。

HTML5:

<!DOCTYPE html>

該聲明是向下兼容的，即兼容HTML和XHTML。

4. 標(biāo)簽

4.1 img標(biāo)簽

作用

  • 插入圖片

代碼

<img src="圖片路徑">

屬性

  • width：寬度
  • height：高度
    - 如果只指定了width/height，系統(tǒng)會(huì)自動(dòng)根據(jù)寬高比調(diào)整height/width
  • title：鼠標(biāo)懸停時(shí)顯示的內(nèi)容
  • alt：圖片掛掉后顯示的內(nèi)容

4.2 br標(biāo)簽

作用

  • 換行

代碼

<br>

注意：

盡量別用，用p標(biāo)簽代替。

4.3 a標(biāo)簽

作用

  • 超鏈接

代碼

<a href=“目標(biāo)地址”>要顯示的內(nèi)容（可以是文字也可以是圖片）</ a>

屬性

  • target
    • _self：在當(dāng)前頁(yè)打開鏈接，是默認(rèn)屬性
    • _blank：在新標(biāo)簽頁(yè)打開鏈接
  • title
    • 鼠標(biāo)懸停時(shí)顯示的內(nèi)容

4.4 base標(biāo)簽

作用

  • 統(tǒng)一當(dāng)前網(wǎng)頁(yè)所有超鏈接的打開方式（當(dāng)前頁(yè)跳轉(zhuǎn)/新窗口打開）

代碼

<head>
<base target=“_blank/_self”>
</head>

注意
如果base標(biāo)簽和a標(biāo)簽都指定了網(wǎng)頁(yè)打開方式，則以a標(biāo)簽指定的方式打開。

4.5 假鏈接

也就是空鏈接，沒有具體指向

代碼

  • #：點(diǎn)擊后會(huì)自動(dòng)返回網(wǎng)頁(yè)頂部，具有“回到頂部”的作用
  • javascript:：不會(huì)自動(dòng)返回網(wǎng)頁(yè)頂部

4.6 錨點(diǎn)

操作

  • 給目標(biāo)位置標(biāo)簽添加id屬性
  • 給a標(biāo)簽的href屬性添加對(duì)應(yīng)的#id

注意

  • 利用a標(biāo)簽做錨點(diǎn)是沒有過(guò)度動(dòng)畫的。
  • 利用a標(biāo)簽做錨點(diǎn)不僅可以跳轉(zhuǎn)到當(dāng)前頁(yè)面的指定位置，還可以跳轉(zhuǎn)到其他頁(yè)面的指定位置。方法：href屬性為指定頁(yè)面#id。

4.7 列表

無(wú)序列表（用得最多）

格式

<ul>
    <li>列表?xiàng)l目?jī)?nèi)容</li>
</ul>

應(yīng)用場(chǎng)景

  • 新聞列表
  • 商品列表
  • 導(dǎo)航條

注意
ul標(biāo)簽里面只放li標(biāo)簽，但是li標(biāo)簽里面還可以放其他標(biāo)簽

有序列表（用得最少，不建議用）

格式

<ol>
    <li>列表?xiàng)l目?jī)?nèi)容</li>
</ol>

應(yīng)用場(chǎng)景

  • 新聞列表
  • 商品列表
  • 導(dǎo)航條

注意
ol標(biāo)簽里面只放li標(biāo)簽，但是li標(biāo)簽里面還可以放其他標(biāo)簽

定義列表

格式

<dl>
    <dt>標(biāo)題</dt>
    <dd>標(biāo)題對(duì)應(yīng)的描述</dd>
</dl>

應(yīng)用場(chǎng)景

  • 網(wǎng)站底部相關(guān)信息
  • 圖文混排

注意

  • dl標(biāo)簽中只放dt和dd
  • 建議一個(gè)dt只對(duì)應(yīng)一個(gè)dd，當(dāng)需要豐富界面時(shí)，可以在dt和dd標(biāo)簽中添加其他標(biāo)簽。

4.8 表格標(biāo)簽table

格式

<table>
    <tr>
        <td></td>
    </tr>
</table>
  • table標(biāo)簽代表表格整體
  • tr標(biāo)簽代表表格的行
  • td標(biāo)簽表示表格中的單元格

屬性

  • 邊框（border）：默認(rèn)為0
  • 寬度（width）和高度（height）：可以給table標(biāo)簽和td標(biāo)簽使用
    • 給table標(biāo)簽用意味著設(shè)定了整個(gè)表格的寬高
    • 如果table標(biāo)簽設(shè)置了寬高，td標(biāo)簽再設(shè)置寬高時(shí)，不影響整個(gè)表格設(shè)置的寬高
  • 水平對(duì)齊（align）和垂直對(duì)齊（valign）：水平對(duì)齊都可以使用、垂直對(duì)齊只能給tr標(biāo)簽和td標(biāo)簽使用
  • 外邊距（cellspacing）和內(nèi)邊距（cellpadding）：只能給table標(biāo)簽使用
    • 外邊距默認(rèn)為2像素
    • 內(nèi)邊距默認(rèn)為1像素

細(xì)線表格

  • 給table標(biāo)簽設(shè)置bgcolor
  • 給tr標(biāo)簽設(shè)置bgcolor
  • 給table標(biāo)簽設(shè)置cellspacing="1px"

表格標(biāo)簽的其他標(biāo)簽

表格標(biāo)題標(biāo)簽：caption

  • caption一定要寫在table標(biāo)簽中，并緊跟在table標(biāo)簽后面，否則無(wú)效

標(biāo)題單元格標(biāo)簽：th

  • 定義當(dāng)前單元格為表格標(biāo)題欄，標(biāo)簽中的內(nèi)容會(huì)自動(dòng)居中&加粗

單元格合并

給td標(biāo)簽添加單元格合并屬性

  • 水平方向單元格合并：colspan
  • 垂直方向單元格合并：rowspan

4.9 表單標(biāo)簽form

表單就是專門用來(lái)收集用戶信息的

格式

<form>
    <表單元素>
</form>

常見表單元素：

input標(biāo)簽

輸入標(biāo)簽，重點(diǎn)是type屬性。

type屬性值說(shuō)明：

  • text：明文輸入框，配合value可以設(shè)置默認(rèn)值
  • password：暗文輸入框，配合value可以設(shè)置默認(rèn)值
  • radio：?jiǎn)芜x框
    注意：
    • 要實(shí)現(xiàn)單選效果，必須給同類別的單選框都添加一個(gè)相同值得name屬性
    • 要實(shí)現(xiàn)默認(rèn)選中某個(gè)單選框，需要添加checked屬性，并賦值“checked”
    • checked屬性可以不賦值實(shí)現(xiàn)相同的效果，但企業(yè)開發(fā)中一般推薦賦值
  • checkbox：復(fù)選框
  • button：普通按鈕，配合value可以設(shè)置按鈕上的文字。
  • image：圖片按鈕，配合src加載圖片，實(shí)現(xiàn)圖片按鈕功能。
  • reset：重置按鈕，用于情況表單中已經(jīng)填寫好的數(shù)據(jù)。默認(rèn)按鈕上顯示“重置”，可以配合value更改默認(rèn)文字。
  • submit：提交按鈕，將表單中填寫好的數(shù)據(jù)到遠(yuǎn)程服務(wù)器。要實(shí)現(xiàn)以上功能要具備兩個(gè)條件：
    • 給form標(biāo)簽添加action屬性，通過(guò)這個(gè)屬性指定遠(yuǎn)程服務(wù)器的地址。
    • 給需要提交到服務(wù)器的表單元素添加一個(gè)name屬性
  • hidden：隱藏域，配合提交按鈕將一些數(shù)據(jù)默默的提交到服務(wù)器。需要學(xué)習(xí)Ajax

label標(biāo)簽

把文字和輸入框關(guān)聯(lián)起來(lái)

格式

  • 給文字添加label標(biāo)簽
  • 給input添加id屬性
  • 在label標(biāo)簽中用for屬性將其與input中的id綁定

注意
也可以直接給文字&輸入框添加label標(biāo)簽，但是不推薦。

datalist標(biāo)簽

格式

<datalist>
    <option>待選項(xiàng)內(nèi)容</option>
</datalist>

綁定

  • 給datalist標(biāo)簽設(shè)置id
  • 給input標(biāo)簽添加list屬性并賦上需綁定的datalist標(biāo)簽的id值

注意
不推薦使用，因?yàn)槎鄶?shù)瀏覽器不支持。

除了按鈕類型的input標(biāo)簽以外，其他類型的標(biāo)簽都可以通過(guò)value屬性來(lái)指定將來(lái)提交到服務(wù)器的值

非input標(biāo)簽

select標(biāo)簽

下拉列表

格式
格式一

<select>
    <option>列表數(shù)據(jù)</option>
</select>

格式二

<select>
    <optgroup label=“分組名稱”>
        <option>列表數(shù)據(jù)</option>
    </optgroup>
</select>

注意

  • 不能輸入內(nèi)容
  • 可以用selected屬性設(shè)置默認(rèn)選項(xiàng)
  • 可以給option標(biāo)簽外包裹一個(gè)optgroup標(biāo)簽，并在label屬性中設(shè)置值來(lái)給下拉列表中的數(shù)據(jù)分類
textarea標(biāo)簽

定義一個(gè)多行的輸入框

格式
<textarea></textarea>

注意

  • 默認(rèn)情況下可以無(wú)限換行
  • 默認(rèn)情況下有自己的寬度和高度，可以通過(guò)cols和rows屬性來(lái)調(diào)整列數(shù)和行數(shù)，但是依然可以無(wú)限往下輸內(nèi)容
  • 默認(rèn)情況下輸入框是可以手動(dòng)拉伸調(diào)整的

4.10 video標(biāo)簽

格式一
<video src=“資源路徑”></video>

格式二

<video>
    <source src=“webm格式文件路徑” type=“video/webm”></source>
    <source src=“mp4格式文件路徑” type=“video/mp4”></source>
    <source src=“ogg格式文件路徑” type=“video/ogg”></source>
</video>

屬性

  • autoplay：自動(dòng)播放屬性
  • controls：控制條屬性
  • poster：視頻封面
  • loop：循環(huán)播放，一般用于廣告視頻
  • preload：預(yù)加載視頻，preload屬性和autoplay屬性向沖
  • muted：靜音
  • width：寬度
  • height：高度

注意

  • video只支持三種格式：webm、mp4、ogg
  • 各瀏覽器支持的視頻格式不同，因此建議用格式二來(lái)解決瀏覽器不支持的問題。采用格式二，瀏覽器會(huì)依次嘗試，直到播放可以支持的格式。
  • 一些不支持html5標(biāo)簽的（老版本）瀏覽器，可以通過(guò)一個(gè)叫html5media的JS框架來(lái)實(shí)現(xiàn)支持video標(biāo)簽

4.11 audio標(biāo)簽

格式一
<audio src=“資源路徑”></audio>

格式二

<audio>
    <source src=“wav格式文件路徑” type=“audio/wav”></source>
    <source src=“mp3格式文件路徑” type=“audio/mp3”></source>
    <source src=“ogg格式文件路徑” type=“audio/ogg”></source>
</audio>

屬性

  • autoplay：自動(dòng)播放屬性
  • controls：控制條屬性
  • loop：循環(huán)播放，一般用于廣告視頻
  • preload：預(yù)加載視頻，preload屬性和autoplay屬性向沖
  • muted：靜音

4.12 詳情和概要標(biāo)簽

格式

<details>
    <summary>概要信息</summary>
    詳情信息
</details>

4.13 marquee標(biāo)簽（滾動(dòng)條&公告欄）

格式
<marquee>滾動(dòng)內(nèi)容</marquee>

屬性

  • direction：滾動(dòng)方向，默認(rèn)從右到左。left、right、up、down
  • scrollamount：移動(dòng)速度
  • loop：滾動(dòng)次數(shù)
  • behavior：
    • slide：滾動(dòng)到邊界就停止
    • alternate：滾動(dòng)到邊界就彈回

注意
marquee標(biāo)簽不是W3C推薦的，但是各大瀏覽器對(duì)其支持特別好

4.14 更多標(biāo)簽

  • strong標(biāo)簽：定義重要性強(qiáng)調(diào)的文字，相當(dāng)于以前的b標(biāo)簽，加粗效果
  • ins標(biāo)簽：定義插入的文字，相當(dāng)于以前的u標(biāo)簽，下劃線效果
  • em標(biāo)簽：定義強(qiáng)調(diào)的文字，相當(dāng)于以前的i標(biāo)簽，傾斜效果
  • del標(biāo)簽：定義被刪除的文字，相當(dāng)于以前的s標(biāo)簽，刪除線效果

4.15 字符實(shí)體

  • &nbsp：空格
  • &lt：小于號(hào) <
  • &gt：大于號(hào) >
  • &copy：版權(quán)符號(hào)?

4.16 div和span標(biāo)簽

div作用：一般用于配合CSS完成網(wǎng)站基本布局

span作用：一般用于配合CSS修改網(wǎng)頁(yè)中的一些局部信息

div和span的區(qū)別

  • div會(huì)單獨(dú)占領(lǐng)一行，而span不會(huì)單獨(dú)占領(lǐng)一行
  • div是一個(gè)容器級(jí)的標(biāo)簽，而span是一個(gè)文本級(jí)的標(biāo)簽

容器級(jí)的標(biāo)簽和文本級(jí)的標(biāo)簽的區(qū)別

  • 容器級(jí)的標(biāo)簽中可以嵌套其他所有的標(biāo)簽
  • 文本級(jí)的標(biāo)簽中只能嵌套文字/超鏈接/圖片

5. CSS

格式

<style type="text/css">
    標(biāo)簽名稱{
        屬性名稱：屬性對(duì)應(yīng)的值;
        ......
    }
</style>

5.1 文字屬性

樣式屬性

  • font-style
    • 正常：normal，默認(rèn)值
    • 傾斜：italce

粗細(xì)屬性

  • font-weight
    • 單詞取值：
      • 加粗：bold
      • 比加粗更粗：bolder
      • 細(xì)線：lighter，默認(rèn)值
    • 數(shù)值取值：100~900之間整百的數(shù)值

大小屬性

  • font-size

    注意點(diǎn)：后面一定要帶單位px。

字體屬性

  • font-family

    注意點(diǎn)：取值是中文時(shí)，需要用""或''將字體名稱括起來(lái)。

    知識(shí)點(diǎn)：

    • 可以給字體設(shè)置備選方案

      格式：font-family："字體1","備選字體1",...;

    • 如何分別給網(wǎng)頁(yè)內(nèi)的中英文設(shè)置不同的字體

      格式：font-family："英文字體","中文字體";

    網(wǎng)頁(yè)開發(fā)中常見的字體：

    • 中文：宋體、黑體、微軟雅黑
    • 英文：Arial、Times New Roman

文字屬性的縮寫

格式

font:style weight size family;

注意

  • style和weigh屬性可以省略，size和family屬性不可以省略
  • style和weigh屬性可以互換位置，size和family屬性不可以互換位置，且必須寫在所有屬性的最后

文字陰影

格式：

text-shadow:水平偏移 垂直偏移 模糊度 陰影顏色;

注意點(diǎn)：

  • 可以簡(jiǎn)寫為text-shadow:水平偏移 垂直偏移 模糊度;。
  • 默認(rèn)情況下陰影的顏色和盒子內(nèi)容的顏色一致。

5.2 文本屬性

裝飾屬性

  • text-decoration
    • 下劃線：underline
    • 刪除線：line-through
    • 上劃線：overline
    • 無(wú)裝飾：none，常見于去掉超鏈接的下劃線

水平對(duì)齊屬性

  • text-align
    • 居中：center
    • 左對(duì)齊：left
    • 右對(duì)齊：right

縮進(jìn)屬性

  • text-indent
    • 縮進(jìn)兩個(gè)字符：2em，em是一個(gè)文字寬度的單位

5.3 顏色屬性

格式：color：值;

取值

  • 英文單詞

  • RGB：rgb(0255,0255,0~255);

  • RGBA：rgba(0255,0255,0255,01);

    a代表透明度（0~1）：值越小越透明

  • 十六進(jìn)制：#FFEE00;

  • 十六進(jìn)制縮寫：#FE0;

5.4 CSS選擇器

標(biāo)簽選擇器

作用：根據(jù)指定的標(biāo)簽名稱，選擇當(dāng)前頁(yè)面中所有指定的標(biāo)簽，然后設(shè)置屬性。

格式：

標(biāo)簽名稱{
    屬性：值;
    ...
}

注意點(diǎn)

  • 標(biāo)簽選擇器選中的是當(dāng)前界面中所有的標(biāo)簽，而不能單獨(dú)選中某一個(gè)標(biāo)簽。
  • 標(biāo)簽選擇器無(wú)論標(biāo)簽藏得多深都能選中。
  • 只要是HTML中的標(biāo)簽就可以作為標(biāo)簽選擇器（h/a/img/ul/ol/dl/input...）。

id選擇器

作用：根據(jù)指定的id名稱找到對(duì)應(yīng)的標(biāo)簽，然后設(shè)置屬性。

格式：

#id名稱{
    屬性：值;
    ...
}

注意點(diǎn)

  • 每個(gè)HTML標(biāo)簽都有一個(gè)屬性叫做id
  • 在同一個(gè)界面中id的名稱不可重復(fù)
  • 在編寫id選擇器時(shí)一定要在id名稱前面加上#
  • id的名稱只能由字母、數(shù)字、下劃線組成，名稱不能以數(shù)字開頭，不能喝HTML標(biāo)簽重名。
  • 網(wǎng)站開發(fā)中一般不用id選擇器，因?yàn)閕d是留給JS使用的。

類（class）選擇器

作用：根據(jù)指定的類名稱找到對(duì)應(yīng)的標(biāo)簽，然后設(shè)置屬性。

格式

.類名稱{
    屬性：值;
    ...
}

注意點(diǎn)

  • 每個(gè)HTML標(biāo)簽都有一個(gè)class屬性。

  • 每個(gè)頁(yè)面中的class名稱可以重復(fù)。

  • 在編寫class選擇器時(shí)一定要在名稱前面加上.

  • 命名規(guī)范和id選擇器的命名規(guī)范一樣。

  • 類名就是專門用來(lái)給某個(gè)特定的標(biāo)簽設(shè)置樣式的。

  • 在HTML中每個(gè)標(biāo)簽可以同時(shí)綁定多個(gè)類名。

    格式：<標(biāo)簽名稱 class="類名1 類名2 ..."

后代選擇器

作用：找到指定標(biāo)簽的所有后代標(biāo)簽，設(shè)置屬性。

格式

標(biāo)簽名稱1 標(biāo)簽名稱2{
    屬性：值;
}

注意點(diǎn)

  • 后代選擇器必須用空格隔開
  • 后代不僅僅是兒子，也包括孫子、重孫等等。
  • 后代選擇器不僅僅可以使用標(biāo)簽，可以使用其他選擇器。
  • 后代選擇器可以無(wú)限延伸下去。

子元素選擇器

作用：找到指定標(biāo)簽中所有特定的直接子元素，然后設(shè)置屬性。

格式

標(biāo)簽名稱1>標(biāo)簽名稱2{
    屬性：值;
}

注意點(diǎn)

  • 子元素選擇器只會(huì)查找兒子，不會(huì)查找其他被嵌套的標(biāo)簽
  • 子元素選擇器之間要用>符號(hào)鏈接，并且不能有空格
  • 子元素選擇器不僅僅可以使用標(biāo)簽名稱，還可以使用其他選擇器
  • 子元素選擇器可以通過(guò)>符號(hào)一直延續(xù)查找下去

交集選擇器

作用：給所有選擇器選中的標(biāo)簽中，相交的那部分標(biāo)簽設(shè)置屬性

格式

選擇器1選擇器2{
    屬性：值;
}

注意點(diǎn)

  • 選擇器和選擇器之間沒有任何的連接符號(hào)
  • 選擇器可以使用標(biāo)簽名稱/id名稱/class名稱
  • 一般不推薦使用

并集選擇器

作用：給所有選擇器選中的標(biāo)簽設(shè)置屬性

格式

選擇器1,選擇器2{
    屬性：值;
}

注意點(diǎn)

  • 選擇器之間用,鏈接
  • 選擇器可以使用標(biāo)簽名稱/id名稱/class名稱

兄弟選擇器

相鄰兄弟選擇器

作用：給指定選擇器后面緊跟的那個(gè)選擇器選中的標(biāo)簽設(shè)置屬性

選擇器1+選擇器2{
    屬性:值;
}

注意點(diǎn)

  • 相鄰兄弟選擇器必須通過(guò)+連接
  • 相鄰兄弟選擇器只能選中緊跟其后的那個(gè)標(biāo)簽，不能選中被隔開的標(biāo)簽。
通用兄弟選擇器

作用：給指定選擇器后面的所有選擇器選中的所有標(biāo)簽設(shè)置屬性

選擇器1~選擇器2{
    屬性:值;
}

注意點(diǎn)

  • 通用兄弟選擇器必須用~連接
  • 通用兄弟選擇器選中的是指定選擇器后面某個(gè)選擇器選中的所有標(biāo)簽，無(wú)論有沒有被隔開都可以選中。

序選擇器

用法

  • 同級(jí)別的第幾個(gè)
    • 標(biāo)簽:first-child 選中同級(jí)別中的第一個(gè)標(biāo)簽
    • 標(biāo)簽:last-child 選中同級(jí)別中的最后一個(gè)標(biāo)簽
    • 標(biāo)簽:nth-child(n) 選中同級(jí)別中的第n個(gè)標(biāo)簽
    • 標(biāo)簽:nth-last-child(n) 選中同級(jí)別中的倒數(shù)第n個(gè)標(biāo)簽
    • 標(biāo)簽:only-child 選中父元素中唯一的一個(gè)標(biāo)簽
  • 同類型的第幾個(gè)
    • 標(biāo)簽:first-of-type 選中同級(jí)別中同類型中的第一個(gè)標(biāo)簽
    • 標(biāo)簽:last-of-type 選中同級(jí)別中同類型中的最后一個(gè)標(biāo)簽
    • 標(biāo)簽:nth-of-type(n) 選中同級(jí)別中同類型中的第n個(gè)標(biāo)簽
    • 標(biāo)簽:nth-last-of-type(n) 選中同級(jí)別中同類型中的倒數(shù)第n個(gè)標(biāo)簽
    • 標(biāo)簽:only-of-type 唯一類型的某個(gè)標(biāo)簽

關(guān)于n的其他用法

  • n=odd 選中奇數(shù)
  • n=even 選中偶數(shù)
  • xn+y x.y是用戶自定義的數(shù)字；n是計(jì)數(shù)器，從0開始遞增

屬性選擇器

作用：根據(jù)指定的屬性名稱找到對(duì)應(yīng)的標(biāo)簽，然后設(shè)置屬性

用法

  • 標(biāo)簽[attribute]

  • 標(biāo)簽[attribute=value]：最常用于區(qū)分input屬性

  • 標(biāo)簽[attribute|=value]：同下

    標(biāo)簽[attribute^=value]：屬性的取值是否以什么開頭

  • 標(biāo)簽[attribute$=value]：屬性的取值是否以什么結(jié)尾

  • 標(biāo)簽[attribute~=value]：同下

    標(biāo)簽[attribute*=value]：取值是否包含某個(gè)特定的值

通配符選擇器

作用：給當(dāng)前頁(yè)面所有標(biāo)簽設(shè)置屬性

用法

*{
    屬性:值;
}

注意點(diǎn)：因選擇了當(dāng)前頁(yè)面所有標(biāo)簽，所以當(dāng)頁(yè)面標(biāo)簽多時(shí)，性能就會(huì)降低，所以不推薦使用。

<a name="wys">偽元素選擇器</a>

作用：

給指定標(biāo)簽的內(nèi)容前面或后面添加一個(gè)子元素

格式：

選擇器名稱::before{
    /*指定添加的子元素中存儲(chǔ)的內(nèi)容*/
    content:"內(nèi)容";
    /*指定添加的子元素的寬高*/
    width:值;
    height:值;
    /*指定添加的子元素的顯示模式*/
    display:值;
    /*隱藏添加的子元素*/
    visibility:值;
}

選擇器名稱::after{
    /*指定添加的子元素中存儲(chǔ)的內(nèi)容*/
    content:"內(nèi)容";
    /*指定添加的子元素的寬高*/
    width:值;
    height:值;
    /*指定添加的子元素的顯示模式*/
    display:值;
    /*隱藏添加的子元素*/
    visibility:值;
}

a標(biāo)簽的偽類選擇器

a標(biāo)簽的偽類選擇器是專門用來(lái)修改a標(biāo)簽不同狀態(tài)下的樣式的。

a標(biāo)簽的狀態(tài)：

  • 默認(rèn)狀態(tài)，從未被訪問過(guò)，藍(lán)色+下劃線
  • 被訪問過(guò)狀態(tài)，紫色+下劃線
  • 鼠標(biāo)長(zhǎng)按狀態(tài)，紅色+下劃線
  • 鼠標(biāo)懸停時(shí)狀態(tài)

格式：

/*修改從未被放過(guò)狀態(tài)下的樣式*/
:link{
    屬性:值;
}

/*修改被訪問過(guò)狀態(tài)下的樣式*/
:visited{
    屬性:值;
}

/*修改鼠標(biāo)懸停狀態(tài)下的樣式*/
:hover{
    屬性:值;
}

/*修改鼠標(biāo)長(zhǎng)按狀態(tài)下的樣式*/
:active{
    屬性:值;
}

注意點(diǎn)：

  1. a標(biāo)簽的偽類選擇器可以單獨(dú)出現(xiàn)，也可以一起出現(xiàn)
  2. a標(biāo)簽的偽類選擇器如果一起出現(xiàn)，那么有嚴(yán)格的順序要求。編寫的順序必須要按照link visited hover active的順序編寫，即愛恨原則（love&hate）。
  3. 如果默認(rèn)狀態(tài)的樣式和被訪問過(guò)狀態(tài)的樣式一樣，那么可以縮寫——寫到標(biāo)簽選擇器中。
  4. 在企業(yè)開發(fā)中編寫a標(biāo)簽的偽類選擇器最好都寫在標(biāo)簽選擇器的后面
  5. 在企業(yè)開發(fā)中和a標(biāo)簽盒子相關(guān)的屬性（限時(shí)模式、寬高、padding、margin等）都寫在標(biāo)簽選擇器中
  6. 在企業(yè)開發(fā)中和a標(biāo)簽文字、背景相關(guān)的屬性都寫在偽類選擇器中

5.5 CSS大三特性

繼承性

作用

給父元素設(shè)置一些屬性，子元素也可以使用。

注意點(diǎn)

  • 并不是所有的屬性都可以繼承，只有以color/font-/text-/line開頭的屬性才可以繼承
  • 在CSS的繼承中不僅僅是兒子可以繼承，只要是后代都可以繼承
  • 繼承性中的特殊性
    • a標(biāo)簽的文字顏色和下劃線是不能繼承的
    • h標(biāo)簽的文字大小是不能繼承的

應(yīng)用場(chǎng)景

一般用于設(shè)置網(wǎng)頁(yè)上的一些共性信息，例如網(wǎng)頁(yè)的文字顏色、字體、文字大小內(nèi)容，一般為body{}

層疊性

作用

層疊性就是CSS處理沖突的能力。

注意點(diǎn)

層疊性只有在多個(gè)選擇器選中“同一個(gè)標(biāo)簽”，然后又設(shè)置了“相同的屬性”，才會(huì)發(fā)生層疊性。

優(yōu)先級(jí)

作用

當(dāng)多個(gè)選擇器選中同一個(gè)標(biāo)簽，并且給同一個(gè)標(biāo)簽設(shè)置相同的屬性時(shí)，如何層疊就由優(yōu)先級(jí)來(lái)確定。

優(yōu)先級(jí)判斷的三種方式

  • 是否直接選中（簡(jiǎn)介選中就是指繼承）

    如果是間接選中，那么就是誰(shuí)離目標(biāo)標(biāo)簽近就聽誰(shuí)的。

  • 是否是相同選擇器

    如果都是直接選中，并且都是同類型的選擇器，那么就是誰(shuí)寫在后面聽誰(shuí)的。

  • 不同選擇器

    如果都是直接選中，并且不是相同類型的選擇器，那么就會(huì)按照選擇器的優(yōu)先級(jí)來(lái)層疊。

    id>類>標(biāo)簽>通配符>繼承>瀏覽器默認(rèn)

!important

作用

用于提升某個(gè)直接選中標(biāo)簽的選擇器中的某個(gè)屬性的優(yōu)先級(jí)的，可以將被指定的屬性的優(yōu)先級(jí)提升為最高。

用法

在屬性: 值;的值后面;前面添加!important。

注意點(diǎn)

  • important只能用于直接選中，不能用于間接選中。
  • 通配符選擇器選中的標(biāo)簽也是直接選中。
  • !important只能提升被指定的屬性的優(yōu)先級(jí)，其他的屬性的優(yōu)先級(jí)不會(huì)被提升。
  • !important必須寫在屬性值的分號(hào)前面。
  • !important前面的感嘆號(hào)不能省略。
權(quán)重問題

作用

當(dāng)多個(gè)選擇器混合在一起使用時(shí)，我們可以通過(guò)計(jì)算權(quán)重來(lái)判斷誰(shuí)的優(yōu)先級(jí)最高

權(quán)重規(guī)則

  • 首先計(jì)算選擇器中有多少個(gè)id，id多的選擇器優(yōu)先級(jí)最高
  • 如果id個(gè)數(shù)一樣，那么再看類名的個(gè)數(shù)，類名個(gè)數(shù)多的優(yōu)先級(jí)最高
  • 如果類名的個(gè)數(shù)一樣，那么再看標(biāo)簽名稱的個(gè)數(shù)，標(biāo)簽名稱個(gè)數(shù)多的優(yōu)先級(jí)最高
  • 如果id個(gè)數(shù)一樣，類名個(gè)數(shù)一樣，標(biāo)簽名稱個(gè)數(shù)也一樣，那么就不會(huì)繼續(xù)往下計(jì)算了，那么此時(shí)誰(shuí)在寫后面聽誰(shuí)的；也就是說(shuō)優(yōu)先級(jí)如果一樣，那么誰(shuí)寫在后面聽誰(shuí)的。

注意點(diǎn)

  • 只有選擇器是直接選中標(biāo)簽的才需要計(jì)算權(quán)重

5.6 CSS元素的顯示模式

在HTML中HTML將所有的標(biāo)簽分為兩類，分別是容器級(jí)和文本級(jí)；

在CSS中CSS也將所有的標(biāo)簽分為兩類，分別是塊級(jí)元素和行內(nèi)元素。

塊級(jí)元素=容器級(jí)標(biāo)簽+p標(biāo)簽

行內(nèi)元素=文本級(jí)標(biāo)簽-p標(biāo)簽

塊級(jí)元素和行內(nèi)元素的區(qū)別

  • 塊級(jí)元素會(huì)獨(dú)占一行，行內(nèi)元素不會(huì)獨(dú)占一行

  • 塊級(jí)元素：如果沒有設(shè)置寬度，那么默認(rèn)和父元素一樣寬；如果設(shè)置了寬高那么就按照設(shè)置的來(lái)顯示。

    行內(nèi)元素：如果沒有設(shè)置寬度，那么默認(rèn)和內(nèi)容一樣寬；行內(nèi)元素是不可以設(shè)置寬度和高度的。

    行內(nèi)塊級(jí)元素：能夠讓元素既能夠不獨(dú)占一行，又可以設(shè)置寬度和高度。

5.7 CSS元素顯示模式轉(zhuǎn)換

塊級(jí)元素、行內(nèi)元素、行內(nèi)塊級(jí)元素三者之間可以相互轉(zhuǎn)換

方法：

設(shè)置元素的display屬性

  • block 轉(zhuǎn)換為塊級(jí)元素
  • inline 轉(zhuǎn)換為行內(nèi)元素
  • inline-block 轉(zhuǎn)換為行內(nèi)塊級(jí)元素

5.8 CSS背景和精靈圖

背景顏色

用法：background-color: 值;

取值：

  • 英文單詞

  • RGB：rgb(0255,0255,0~255);

  • RGBA：rgba(0255,0255,0255,01);

    a代表透明度（0~1）：值越小越透明

  • 十六進(jìn)制：#FFEE00;

  • 十六進(jìn)制縮寫：#FE0;

背景圖片

用法：background-image:url();

注意點(diǎn)：

  • 在括號(hào)內(nèi)填寫圖片地址，地址可以是本地地址，也可以是網(wǎng)絡(luò)地址。
  • 如果圖片大小比標(biāo)簽的大小小，圖片會(huì)自動(dòng)在水平和垂直方向填滿標(biāo)簽。

背景平鋪屬性

用法：background-repeat: 值；

取值

  • repeat：默認(rèn)，在水平和垂直方向平鋪
  • no-repeat：不平鋪
  • repeat-x：水平平鋪
  • repeat-y：垂直平鋪

應(yīng)用場(chǎng)景

可以通過(guò)背景圖片的平鋪來(lái)降低圖片的大小，提升網(wǎng)頁(yè)的訪問速度。

背景定位

用法：background-position: 水平值 垂直值;

取值

  • 具體方位名詞
    • 水平值：left center right
    • 垂直值：top center bottom
  • 具體像素

注意點(diǎn)：填寫像素時(shí)一定要寫單位px

背景關(guān)聯(lián)

作用：默認(rèn)情況下背景圖片會(huì)隨著滾動(dòng)條滾動(dòng)而滾出界面，修改背景圖片和滾動(dòng)條的關(guān)聯(lián)方式可以實(shí)現(xiàn)背景圖片不跟隨滾動(dòng)條的效果。

用法：background-attachment:值;

取值

  • scroll：默認(rèn)，背景圖片跟隨滾動(dòng)條滾動(dòng)。
  • fixed：背景圖片不跟隨滾動(dòng)條滾動(dòng)。

背景縮寫

用法：background:背景顏色 背景圖片 平鋪方式 關(guān)聯(lián)方式 定位方式;

注意點(diǎn)

  • 任何一個(gè)都可以省略

CSS精靈圖

作用：可以減少請(qǐng)求的次數(shù)，降低服務(wù)器的處理壓力，需要配合背景圖片和背景定位來(lái)實(shí)現(xiàn)。

5.9 盒模型

邊框?qū)傩?/h4>

用法：

  • 連寫

    • 同時(shí)設(shè)置四條邊框

      border:邊框的寬度 邊框的樣式 邊框的顏色;

    • 分別設(shè)置四條邊框

      border-top:邊框的寬度 邊框的樣式 邊框的顏色;

      border-bottom:邊框的寬度 邊框的樣式 邊框的顏色;

      border-left:邊框的寬度 邊框的樣式 邊框的顏色;

      border-right:邊框的寬度 邊框的樣式 邊框的顏色;

    • 分別設(shè)置四條邊框

      border-width：上 右 下 左

      border-style：上 右 下 左

      border-color：上 右 下 左

      注意點(diǎn)：取值省略時(shí)的規(guī)律

      上右下左→上右下：左邊=右邊

      上右下左→上右：左邊=右邊、下邊=上邊

      上右下左→上：右下左邊=上邊

  • 不連寫

    border-top-width：設(shè)置上邊框的寬度

    border-top-style：設(shè)置上邊框的樣式

    border-top-color：設(shè)置上邊框的顏色

    border-right-width：設(shè)置右邊框的寬度

    border-right-style：設(shè)置右邊框的樣式

    border-right-color：設(shè)置右邊框的顏色

    border-bottom-width：設(shè)置下邊框的寬度

    border-bottom-style：設(shè)置下邊框的樣式

    border-bottom-color：設(shè)置下邊框的顏色

    border-left-width：設(shè)置左邊框的寬度

    border-left-style：設(shè)置左邊框的樣式

    border-left-color：設(shè)置左邊框的顏色

取值

  • 邊框樣式
    • solid：實(shí)線
    • dashed：虛線

內(nèi)邊距

邊框和內(nèi)容的距離就是內(nèi)邊距

格式

  • 非連寫

    padding-top: 值;
padding-right: 值;
padding-bottom: 值;
padding-left: 值;

  • 連寫

    padding:上 右 下 左

    注意點(diǎn)：取值省略時(shí)的規(guī)律

    上右下左→上右下：左邊=右邊

    上右下左→上右：左邊=右邊、下邊=上邊

    上右下左→上：右下左邊=上邊

注意點(diǎn)

  • 給標(biāo)簽設(shè)置內(nèi)邊距之后，標(biāo)簽占有的寬度和高度會(huì)發(fā)生變化。
  • 內(nèi)邊距也會(huì)有背景顏色。

外邊距

標(biāo)簽和標(biāo)簽之間的距離就是外邊距

格式

  • 非連寫

    margin-top: 值;
margin-right: 值;
margin-bottom: 值;
margin-left: 值;

  • 連寫

    margin:上 右 下 左

    注意點(diǎn)：取值省略時(shí)的規(guī)律

    上右下左→上右下：左邊=右邊

    上右下左→上右：左邊=右邊、下邊=上邊

    上右下左→上：右下左邊=上邊

注意點(diǎn)

  • 外邊距是沒有背景顏色的。

  • 在默認(rèn)布局的垂直方向上，默認(rèn)情況下外邊距是不會(huì)疊加的，會(huì)出現(xiàn)合并現(xiàn)象，誰(shuí)的外邊距比較大就聽誰(shuí)的。

    W3C-CSS 外邊距合并

    image

  • 在嵌套的盒子中margin:0 auto可以是使盒子自動(dòng)水平居中，但是無(wú)法垂直居中。

盒子模型

HTML中所有的標(biāo)簽都可以設(shè)置：

  • 寬度/高度：指定可以存放內(nèi)容的區(qū)域
  • 內(nèi)邊距：填充物
  • 邊框：盒子的邊框
  • 外邊距：盒子和盒子之間的間隙

盒子的寬度和高度

  • 內(nèi)容的寬度和高度

    就是通過(guò)標(biāo)簽的width和height屬性設(shè)置的寬度和高度

  • 元素的寬度和高度

    寬度=左邊框+左內(nèi)邊距+width+右內(nèi)邊距+右邊框

    高度 同理

  • 元素空間的寬度和高度

    寬度=左外邊距+左邊框+左內(nèi)邊距+width+右內(nèi)邊距+右邊框+右外邊距

    高度 同理

盒子box-sizing屬性

保證盒子新增padding或border之后，盒子元素的寬度和高度不變

取值

  • content-box

    元素的寬高=邊框+內(nèi)邊距+內(nèi)容寬高

  • border-box

    元素的寬高=width屬性

盒子陰影

格式：

box-shadow:水平偏移 垂直偏移 模糊度 陰影擴(kuò)展 陰影顏色 內(nèi)外陰影;

注意點(diǎn)：

  • 盒子陰影分內(nèi)外陰影，默認(rèn)是外陰影。
  • 可以簡(jiǎn)寫為box-shadow:水平偏移 垂直偏移 模糊度;。
  • 默認(rèn)情況下陰影的顏色和盒子內(nèi)容的顏色一致。

清空默認(rèn)邊距

原因及作用

在企業(yè)開發(fā)中為了更好的空值盒子的寬高和計(jì)算盒子的寬高等等。<u>所以在企業(yè)開發(fā)中，編寫代碼之前第一件事情就是清空默認(rèn)的邊距。</u>

用法:在CSS中添加

*{
    margin: 0;
    padding: 0;
}

注意點(diǎn)

  • 通配符選擇器會(huì)找到當(dāng)前界面中所有的標(biāo)簽，所以性能不好。不推薦使用。

  • 高效清空默認(rèn)邊距：百度搜索“yui css reset”,或直接點(diǎn)擊CSS Reset

行高和字號(hào)

行高：line-height

5.10 網(wǎng)頁(yè)布局方式

  • 標(biāo)準(zhǔn)流（文檔流、普通流）排版方式
  • 浮動(dòng)流排版方式
  • 定位流排版方式

標(biāo)準(zhǔn)流（文檔流、普通流）排版方式

瀏覽器默認(rèn)排版方式，有兩種排版方式：垂直排版（塊級(jí)元素）和水平排版（行內(nèi)元素、行內(nèi)塊級(jí)元素）。

浮動(dòng)流排版方式

是一種“半脫離標(biāo)準(zhǔn)流”的排版方式，<u>只有水平排版方式，且只有左對(duì)齊和右對(duì)齊兩個(gè)屬性</u>。

格式

float:left;

float:right;

特點(diǎn)

  • 在浮動(dòng)流中不區(qū)分塊級(jí)元素、行內(nèi)元素、行內(nèi)塊級(jí)元素，均可水平排版。
  • 在浮動(dòng)流中不區(qū)分塊級(jí)元素、行內(nèi)元素、行內(nèi)塊級(jí)元素，均可設(shè)置寬高。
  • 綜上所述，浮動(dòng)流中的元素和標(biāo)準(zhǔn)流中的行內(nèi)塊級(jí)元素很像。

浮動(dòng)元素排序規(guī)則

  • 相同方向上的浮動(dòng)元素，先浮動(dòng)的元素會(huì)顯示在前面，后浮動(dòng)的元素會(huì)顯示在后面。
  • 不同方向上的浮動(dòng)元素，左浮動(dòng)會(huì)找左浮動(dòng)，右浮動(dòng)會(huì)找右浮動(dòng)。
  • 浮動(dòng)元素浮動(dòng)之后的位置，由浮動(dòng)元素浮動(dòng)之前在標(biāo)準(zhǔn)流中的位置來(lái)確定。

浮動(dòng)元素高度問題

  • 在標(biāo)準(zhǔn)流中內(nèi)容的高度可以撐起父元素的高度
  • 在浮動(dòng)流中浮動(dòng)的元素不可以撐起父元素的高度

清除浮動(dòng)

  • 方式一：給前面一個(gè)父元素設(shè)置高度

    注意點(diǎn)：在企業(yè)開發(fā)中，我們能不寫高度就不寫高度，所以這種方式用得很少

  • 方式二：給后面的盒子添加clear屬性

    取值：

    none：默認(rèn)取值，按照浮動(dòng)元素的排序規(guī)則來(lái)排序（左浮動(dòng)找左浮動(dòng)，右浮動(dòng)找右浮動(dòng)）

    left：不要找前面的左浮動(dòng)元素

    right：不要找前面的右浮動(dòng)元素

    both：不要找前面的左浮動(dòng)元素和右浮動(dòng)元素

    注意點(diǎn)：

    一般直接使用clear:both;

    添加clear屬性后的標(biāo)簽，margin屬性會(huì)失效。

  • 方式三：隔墻法

    • 外墻法：在兩個(gè)標(biāo)簽中間添加一個(gè)塊級(jí)元素（如div），并給該元素設(shè)置clear:both;屬性。

      注意點(diǎn)：

      外墻法可以讓第二個(gè)標(biāo)簽使用margin-top屬性，但是不可以讓第一個(gè)標(biāo)簽使用margin-bottom屬性。

    • 內(nèi)墻法：在第一個(gè)標(biāo)簽所有子元素最后添加一個(gè)塊級(jí)元素（如div），并給該元素設(shè)置clear:both;屬性。

      注意點(diǎn)：

      內(nèi)墻法既可以讓第二個(gè)標(biāo)簽使用margin-top屬性，也可以讓第一個(gè)標(biāo)簽使用margin-bottom屬性。

    區(qū)別：

    外墻法不能撐起第一個(gè)標(biāo)簽的高度，而內(nèi)墻法可以撐起第一個(gè)標(biāo)簽的高度。

    注意點(diǎn)：

    企業(yè)開發(fā)中不常使用隔墻法。

  • 方法四：利用偽元素選擇器，給前一個(gè)標(biāo)簽的后面添加一個(gè)塊級(jí)元素。

    方法：

    選擇器名稱::after{
    /*指定添加的子元素的內(nèi)容為空*/
    content: "";
    /*指定添加的子元素為塊級(jí)元素*/
    display: block;
    /*指定添加的子元素的高為0*/
    height: 0;
    /*設(shè)置添加的子元素看不見*/
    visibility: hidden;
    /*給添加的子元素設(shè)置clear:both;*/
    clear: both;
}
/*僅僅有上面的CSS，會(huì)出現(xiàn)不兼容IE6的情況，要想兼容IE6還需要添加下面的代碼*/
選擇器名稱{
  *zoom:1;
}

  • 方法五：給前一個(gè)選擇器添加overflow: hidden;

    作用：

    • 可以將超出選擇器方位的內(nèi)容裁剪掉
    • 清除浮動(dòng)，但是也會(huì)出現(xiàn)不兼容IE6的情況，需要添加一條*zoom:1;
    • 可以通過(guò)overflow: hidden;讓里面的盒子設(shè)置margin-top之后，外面的盒子不被頂下來(lái)

定位流排版方式

  • 相對(duì)定位
  • 絕對(duì)定位
  • 固定定位
  • 靜態(tài)定位
相對(duì)定位

就是相對(duì)于自己以前在標(biāo)準(zhǔn)流中的位置來(lái)移動(dòng)。

用法：

position:relative;

注意點(diǎn)：

  • 需要配合top right bottom left來(lái)使用
  • 相對(duì)定位是不脫離標(biāo)準(zhǔn)流的，會(huì)繼續(xù)在標(biāo)準(zhǔn)流中占用一份空間。
  • 在相對(duì)定位中同一個(gè)方向上的定位屬性只能使用一個(gè)。
  • 由于相對(duì)定位是不脫離標(biāo)準(zhǔn)流的，所以在相對(duì)定位中是區(qū)分塊級(jí)元素、行內(nèi)元素和行內(nèi)塊級(jí)元素的。
  • 由于相對(duì)定位是不脫離標(biāo)準(zhǔn)流的，并且相對(duì)定位的元素會(huì)占用標(biāo)準(zhǔn)流中的位置，所以當(dāng)給相對(duì)定位的元素設(shè)置margin、padding等屬性的時(shí)候會(huì)影響到標(biāo)準(zhǔn)流的布局。

應(yīng)用場(chǎng)景：

  • 用于對(duì)元素的進(jìn)行微調(diào)
  • 配合后面學(xué)習(xí)的絕對(duì)定位來(lái)使用
絕對(duì)定位

絕對(duì)定位就是相對(duì)于body來(lái)定位

用法：

position:absolute;

規(guī)律/參考點(diǎn)：

以下提到的“定位流”指的是相對(duì)定位、絕對(duì)定位、固定定位，不包含靜態(tài)定位。

  • 默認(rèn)情況下所有的絕對(duì)定位的元素，無(wú)論有沒有祖先元素，都會(huì)以body作為參考點(diǎn)。
  • 如果一個(gè)絕對(duì)定位的元素有祖先元素，并且祖先元素也是定位流，那么這個(gè)絕對(duì)定位的元素就會(huì)以定位流的那個(gè)祖先元素作為參考點(diǎn)。
  • 如果一個(gè)絕對(duì)定位的元素有祖先元素，并且祖先元素也是定位流，而且祖先元素中有多個(gè)元素都是定位流，那么這個(gè)絕對(duì)定位的元素會(huì)以離它最近的那個(gè)定位流的祖先元素為參考點(diǎn)。

注意點(diǎn)：

  • 需要配合top right bottom left來(lái)使用
  • 絕對(duì)定位的元素是脫離標(biāo)準(zhǔn)流的
  • 絕對(duì)定位的元素是不區(qū)分塊級(jí)元素、行內(nèi)元素和行內(nèi)塊級(jí)元素的
  • 如果一個(gè)絕對(duì)定位的元素是以body作為參考點(diǎn)，那么其實(shí)是以網(wǎng)頁(yè)首屏的寬度和高度作為參考點(diǎn)，而不是以整個(gè)網(wǎng)頁(yè)的寬度和高度作為參考點(diǎn)。
  • 一個(gè)絕對(duì)定位的元素會(huì)忽略祖先元素的padding屬性。

水平居中：

  1. 設(shè)置絕對(duì)定位元素的left:50%;
  2. 設(shè)置絕對(duì)定位元素的margin-left:-元素寬度的一半px;
子絕父相

相對(duì)定位的弊端：相對(duì)定位不會(huì)脫離標(biāo)準(zhǔn)流，會(huì)繼續(xù)在標(biāo)準(zhǔn)流中占用一份空間，所以不利于布局。

絕對(duì)定位的弊端：默認(rèn)情況下絕對(duì)定位的元素會(huì)以body作為參考點(diǎn)，所以會(huì)隨著瀏覽器的寬度高度的變化而變化。

<u>鑒于以上情況，因此企業(yè)開發(fā)中都是相對(duì)定位和絕對(duì)定位相結(jié)合使用，而其中99.99%的組合是子絕父相——子元素使用絕對(duì)定位，父元素使用相對(duì)定位。</u>

固定定位

可以實(shí)現(xiàn)背景關(guān)聯(lián)background-attachment:fixed;的作用，即元素和滾動(dòng)條的關(guān)聯(lián)方式可以實(shí)現(xiàn)元素不跟隨滾動(dòng)條的效果。

用法：

position:fixed;

注意點(diǎn)：

  • 固定定位的元素是脫離標(biāo)準(zhǔn)流的，不會(huì)占用標(biāo)準(zhǔn)流中的空間
  • 固定定位和絕對(duì)定位一樣不區(qū)分行內(nèi)元素、塊級(jí)元素、行內(nèi)塊級(jí)元素。
  • IE6不支持固定定位。
靜態(tài)定位

所有元素默認(rèn)情況下就是靜態(tài)定位

z-index屬性

默認(rèn)情況下所有的元素都有一個(gè)默認(rèn)的z-index屬性，取值是0。z-index屬性的作用是專門用于控制定位流元素的覆蓋關(guān)系的。

覆蓋關(guān)系

  1. 默認(rèn)情況下定位流的元素會(huì)蓋住標(biāo)準(zhǔn)流的元素。
  2. 默認(rèn)情況下定位流的元素后面編寫的會(huì)蓋住前面編寫的。
  3. 如果定位流的元素設(shè)置了z-index屬性，那么z-index屬性值大的元素會(huì)顯示在z-index屬性值小的元素上面。

注意點(diǎn)：

  1. 從父現(xiàn)象

    1.1 如果兩個(gè)元素的父元素都沒有設(shè)置z-index屬性，那么誰(shuí)的z-index屬性值比較大，誰(shuí)就顯示在上面。

    1.2 如果兩個(gè)元素的父元素設(shè)置了z-index屬性，那么子元素的z-index屬性就會(huì)失效，也就是說(shuō)誰(shuí)的父元素的z-index屬性值比較大，誰(shuí)就會(huì)顯示在上面。

網(wǎng)頁(yè)布局總結(jié)

  • 垂直方向使用標(biāo)準(zhǔn)流，水平方向使用浮動(dòng)流。
  • 拿到一個(gè)很復(fù)雜的界面后如何入手？
    • 從上至下布局
    • 從外向內(nèi)布局
    • 水平方向可以先劃分為一左一右再對(duì)左邊或者右邊進(jìn)行進(jìn)一步布局

5.11 過(guò)渡模塊

過(guò)渡三要素

  1. 必須要有屬性發(fā)生變化
  2. 必須告訴系統(tǒng)哪個(gè)屬性需要執(zhí)行過(guò)渡效果
  3. 必須告訴系統(tǒng)過(guò)渡效果持續(xù)時(shí)長(zhǎng)

實(shí)現(xiàn)方法：

  1. 給元素添加偽類選擇器:hover，設(shè)置要實(shí)現(xiàn)過(guò)渡效果的屬性。
  2. 給元素設(shè)置過(guò)渡參數(shù)，參考格式。

格式：

/*高速系統(tǒng)那個(gè)屬性需要執(zhí)行過(guò)渡效果*/
transition-property:屬性;

/*告訴系統(tǒng)過(guò)渡效果持續(xù)的時(shí)長(zhǎng)*/
transition-duration:時(shí)長(zhǎng);

/*告訴系統(tǒng)延遲多少秒之后才開始過(guò)渡動(dòng)畫*/
transition-delay:時(shí)長(zhǎng);

/*告訴系統(tǒng)過(guò)渡動(dòng)畫的運(yùn)動(dòng)的速度*/
transition-timing-function:linear/ease/ease-in/ease-out/ease-in-out;

連寫：

transition: 過(guò)渡屬性 持續(xù)時(shí)長(zhǎng) 運(yùn)動(dòng)速度 延遲時(shí)間;

簡(jiǎn)寫：

transition:all 時(shí)長(zhǎng);

注意點(diǎn)：

  • 當(dāng)有多個(gè)屬性需要實(shí)現(xiàn)過(guò)渡效果時(shí)，用,隔開即可。
  • 連寫狀態(tài)下，如果想給多個(gè)屬性添加過(guò)渡效果也是用,隔開即可。
  • 連寫時(shí)可以省略后面的兩個(gè)參數(shù)，因?yàn)橹灰星懊鎯蓚€(gè)參數(shù)就已經(jīng)滿足了過(guò)渡的三要素。
  • 如果多個(gè)屬性運(yùn)動(dòng)的速度、延遲的時(shí)間、持續(xù)時(shí)間都一樣，可以使用簡(jiǎn)寫

編寫過(guò)渡效果的步驟：

  1. 不要管過(guò)渡，先編寫基本界面
  2. 修改我們認(rèn)為需要修改的屬性
  3. 再回過(guò)頭去給被修改屬性的那個(gè)元素添加過(guò)渡即可

5.12 2D轉(zhuǎn)換模塊

格式：

/*旋轉(zhuǎn)，dge代表旋轉(zhuǎn)的度數(shù)*/
transform:rotate(值dge);

/*平移*/
transform:translate(水平值px,垂直值px);

/*縮放，兩個(gè)參數(shù)一樣時(shí)，可以只寫一個(gè)參數(shù)*/
transform:scale(水平縮放倍數(shù),垂直縮放倍數(shù));

/*綜合*/
transform:rotate(值dge) translate(水平值px,垂直值px) scale(水平縮放倍數(shù),垂直縮放倍數(shù));

/*修改2D模塊的形變中心點(diǎn)*/
transform-origin:水平坐標(biāo)值 垂直坐標(biāo)值;

/*透視屬性*/
perspective:值;

注意點(diǎn)：

  • 旋轉(zhuǎn)后，坐標(biāo)軸也會(huì)跟著旋轉(zhuǎn)。
  • transform-origin的取值有三種形式
    • 具體像素
    • 百分比
    • 特殊關(guān)鍵字：left、top、bottom、right
  • rotate(值dge)默認(rèn)是將元素以Z坐標(biāo)軸旋轉(zhuǎn)，相當(dāng)于rotateZ(值dge)；如果想讓元素以X坐標(biāo)軸旋轉(zhuǎn)（上下方向），則rotateX(值dge)；如果想讓元素以Y坐標(biāo)軸旋轉(zhuǎn)（左右方向），則rotateY(值dge)。
  • translate(值px)默認(rèn)是將元素以Y軸平移，相當(dāng)于translateY(值px)；如果想讓元素以X坐標(biāo)軸旋轉(zhuǎn)（上下方向），則translateX(值px)；如果想讓元素以Z坐標(biāo)軸旋轉(zhuǎn)（前后方向），則translateZ(值px)。
  • 透視屬性，必須添加到需要呈現(xiàn)近大遠(yuǎn)小效果的元素的父元素上面。

5.13 動(dòng)畫模塊

動(dòng)畫模塊與過(guò)渡模塊的異同：

  • 相同點(diǎn)
    • 過(guò)渡和動(dòng)畫都是用來(lái)給元素添加動(dòng)畫的
    • 過(guò)渡和動(dòng)畫都是系統(tǒng)新增的一些屬性
    • 過(guò)渡和動(dòng)畫都是需要滿足三要素才會(huì)有動(dòng)畫效果
  • 不同點(diǎn)
    • 過(guò)渡必須人為觸發(fā)才會(huì)執(zhí)行動(dòng)畫，而動(dòng)畫不需要人為的觸發(fā)就可以執(zhí)行動(dòng)畫

動(dòng)畫三要素及格式：

  1. 告訴系統(tǒng)需要執(zhí)行哪個(gè)動(dòng)畫

    animation-name:自定義動(dòng)畫名;

  2. 告訴系統(tǒng)我們需要?jiǎng)?chuàng)建一個(gè)動(dòng)畫及內(nèi)容

    方法一：
@keyframes 自定義動(dòng)畫名 {
    from{
        
    }
    to{
        
    }
}

方法二：
@keyframes 自定義動(dòng)畫名{
 0%{
     
 }
 50%{
     
 }
 100%{
     
 }
}
可以寫0-100個(gè)動(dòng)畫狀態(tài)

  3. 告訴系統(tǒng)動(dòng)畫持續(xù)的時(shí)長(zhǎng)

    animation-duration:時(shí)長(zhǎng);

其他屬性：

/*告訴系統(tǒng)多少秒之后執(zhí)行動(dòng)畫*/
animation-delay:時(shí)長(zhǎng);

/*告訴系統(tǒng)動(dòng)畫執(zhí)行的速度*/
animation-timing-function:值;

/*告訴系統(tǒng)動(dòng)畫執(zhí)行的次數(shù)，取值為“infinite”時(shí)，表示無(wú)限次*/
animation-iteration-count:次數(shù);

/*告訴系統(tǒng)是否需要執(zhí)行往返動(dòng)畫，默認(rèn)為normal*/
animation-direction:alternate;

/*告訴系統(tǒng)當(dāng)前動(dòng)畫是否需要暫定，默認(rèn)running（執(zhí)行動(dòng)畫）*/
animation-play-state:paused;

/*告訴系統(tǒng)動(dòng)畫的等待狀態(tài)和結(jié)束狀態(tài)的樣式*/
animation-fill-mode:值;
取值：none：不做任何改變
     forwards：讓元素結(jié)束狀態(tài)保持最后一幀的樣式
     backwards：讓元素等待狀態(tài)時(shí)顯示第一幀的樣式
     both：即forwards和backwards。

連寫/簡(jiǎn)寫：

連寫：
animation:動(dòng)畫名稱 動(dòng)畫時(shí)長(zhǎng) 動(dòng)畫運(yùn)動(dòng)速度 延遲時(shí)間 執(zhí)行次數(shù) 往返動(dòng)畫;

簡(jiǎn)寫：
animation:動(dòng)畫名稱 動(dòng)畫時(shí)長(zhǎng);

5.14 3D轉(zhuǎn)換模塊

格式：

給元素的父元素添加
transform-style:preserve-3d;

5.15 背景相關(guān)

背景尺寸屬性

用法：

background-size:屬性;

屬性取值：

  • 默認(rèn)
  • 具體像素：寬px 高px
  • 百分比：寬% 高%
  • 寬度等比拉伸：auto 高px
  • 高度等比拉伸：寬px auto
  • cover：告訴系統(tǒng)圖片需要等比拉伸，并拉伸到寬度和高度都填滿為止
  • contain：告訴系統(tǒng)圖片需要等比拉伸，并拉伸到寬度或高度都填滿為止

背景圖片定位區(qū)域?qū)傩?/h4>

用法：

background-origin:屬性值;

屬性取值：

  • padding-box：默認(rèn)，圖片從padding開始顯示
  • border-box：圖片從border開始顯示
  • content-box：圖片從content開始顯示

背景繪制區(qū)域?qū)傩?/h4>

用法：

background-clip:屬性值;

屬性取值：

  • padding-box：從padding區(qū)域開始繪制背景
  • border-box：默認(rèn)，從border區(qū)域開始繪制背景
  • content-box：從content區(qū)域開始繪制背景

5.16 CSS書寫格式

書寫位置：

  1. 行內(nèi)樣式：直接將CSS代碼寫到開始標(biāo)簽中
  2. 內(nèi)嵌樣式：在一對(duì)head標(biāo)簽當(dāng)中寫上一對(duì)style標(biāo)簽，然后在style標(biāo)簽中編寫CSS代碼
  3. 外鏈樣式（企業(yè)開發(fā)中一般都使用這種方式）：新建一個(gè).css文件，把CSS代碼寫到這個(gè)文件中，然后通過(guò)link標(biāo)簽把這個(gè)文件和.html文件關(guān)聯(lián)起來(lái)
  4. 導(dǎo)入樣式：新建一個(gè).css文件，把CSS代碼寫到這個(gè)文件中，然后通過(guò)@import把這個(gè)文件和.html文件關(guān)聯(lián)起來(lái)

外鏈樣式和導(dǎo)入樣式的區(qū)別：

  1. 外鏈樣式是通過(guò)link標(biāo)簽關(guān)聯(lián)，而導(dǎo)入樣式是通過(guò)@import關(guān)聯(lián)，而@import是CSS2.1推出的，所以有兼容問題
  2. 外鏈樣式在顯示界面的時(shí)候，會(huì)先加載CSS樣式，再加載結(jié)構(gòu)，所以用戶看到界面時(shí)一定已經(jīng)設(shè)置了樣式；外鏈樣式在顯示界面的時(shí)候，會(huì)先加載結(jié)構(gòu)，再加載CSS樣式，所以用戶看到界面時(shí)不一定已經(jīng)設(shè)置了樣式。

靜態(tài)網(wǎng)站實(shí)踐

準(zhǔn)備工作

  1. 創(chuàng)建站點(diǎn)文件夾（可以用中文名），并在站點(diǎn)文件夾里創(chuàng)建子文件夾（不能用中文）：css、js、images文件夾和index.html

  2. 重置所有默認(rèn)的樣式和設(shè)置一些全局樣式，并且將設(shè)置樣式的css文件和對(duì)應(yīng)的界面關(guān)聯(lián)起來(lái)。

    /*1.默認(rèn)樣式*/
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}
legend{color:#000}
a{text-decoration:none;}


/*2.全局樣式*/
/*具體根據(jù)實(shí)際情況調(diào)整*/
body{
 font-family:"微軟雅黑";
 font-size:12px;
 color:#999
 background-color:#f5f5f5;
}

  3. 分析布局，劃分區(qū)域。

關(guān)于CSS

推薦將“重置所有默認(rèn)的樣式和設(shè)置一些全局樣式”創(chuàng)建為一個(gè)css文件，然后每個(gè)網(wǎng)頁(yè)再單獨(dú)創(chuàng)建一個(gè)對(duì)應(yīng)的css文件。

實(shí)踐補(bǔ)充知識(shí)點(diǎn)

  1. 因?yàn)長(zhǎng)ogo相當(dāng)于是企業(yè)的門面，所以企業(yè)開發(fā)中一般都會(huì)采用好h1標(biāo)簽包裹a標(biāo)簽，然后給a標(biāo)簽設(shè)置背景圖片的方式來(lái)呈現(xiàn)Logo。

    /*css代碼*/
h1{
    width:100%;
    height:100%;
}
h1>a{
    display:inline-block;
    width:100%;
    height:100%;
    background:url("Logo地址");
}

    /*html代碼*/
<h1><a href="" title="企業(yè)名稱"></a></h1>

  2. 當(dāng)圖片的寬度大于父元素時(shí)（廣告圖）

    1. 不能使用margin:0 auto;或者text-align:center;讓圖片居中。
    2. 可以使用定位流讓圖片居中，但是定位流的弊端也比較明顯：1.需要寫三行代碼；2.必須知道圖片的寬度。
    3. 推薦使用margin:0 -100%;，但是使用這種方法的前提是父元素必須設(shè)置text-align:center;。因?yàn)閳D片過(guò)大，瀏覽器底部會(huì)有滾動(dòng)條，這時(shí)可以給父元素設(shè)置overflow:hidden;。

  3. 伸縮布局？ul下面的li浮動(dòng)之后，使li之間的空隙均勻分布

    display:flex;
justify-content:space-berween;

  4. opacity:值;，這是給元素設(shè)置透明度（取值0~1）的，特點(diǎn)是該元素的子元素也會(huì)跟著透明。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽：!DOCTYPE 說(shuō)明：指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,520評(píng)論 1贊 41
  • HTML學(xué)習(xí)筆記（二） 使用列表 使用表格 使用表單 添加多媒體 <a name="1">使用列表</a> ...
    寒橋閱讀 872評(píng)論 0贊 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,090評(píng)論 1贊 92
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁(yè)的形式展示給用戶的，因此網(wǎng)頁(yè)是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁(yè)文件是用...
    阿啊阿吖丁閱讀 4,906評(píng)論 0贊 0
  • 作為一個(gè)二級(jí)考生來(lái)說(shuō)，在寒假前就念叨著寒假的時(shí)間要好好利用，練練二級(jí)的題。 但是一放假，就被回家的喜悅沖昏了頭腦，...
    八寶粥超好喝閱讀 479評(píng)論 10贊 2

友情鏈接更多精彩內(nèi)容