一、HTML和CSS簡介
HTML（Hypertext Markup Language）： 超文本標記語言。
• 它負責網頁的三個要素之中的結構。
• HTML使用標簽的的形式來標識網頁中的不同組成部分。
• 所謂超文本指的是超鏈接，使用超鏈接可 以讓我們從一個頁面跳轉到另一個頁面
一個最基本的HTML頁面：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>網頁標題</title> </head> <body> <h1>網頁正文</h1> </body> </html>
標簽
• HTML中的標記指的就是標簽。
• HTML使用標記標簽來描述網頁。
• 結構：
<標簽名>標簽內容</標簽名>
<標簽名 />
元素
• 我們還將一個完整的標簽稱為元素。
• 這里我們可以將元素和標簽認為是一個同義詞。
<h1>一級標題</h1>
上邊的h1我們就稱為元素
<p>我是一個<em>段落</em></p>
p也是一個元素，em是p的子元素，p是 em的父元素。
<body>
<p><em>內容</em></p>
</body>
• body也是一個元素。
• body是p和em的祖先元素。
• p和em是body的后代元素。
屬性
• 可以為HTML標簽設置屬性。
• 通過屬性為HTML元素提供附加信息。
• 屬性需要設置在開始標簽或自結束標簽中。
• 屬性總是以名稱/值對的形式出現。
• 比如：name=“value” • 有些屬性可以是任意值，有些則必須是指定值。
<h1 title="我是一個標題">標題</h1>
<img src="" alt="" />
常見屬性
• id – id屬性作為標簽的唯一標識，在同一個網頁中不能 出現相同的id屬性值。
• class – class屬性用來為標簽分組，擁有相同class屬性的 標簽我們認為就是一組，可以出現相同的class屬 性，可以為一個元素指定多個class。
• title – title屬性用來指定標簽的標題，指定title以后，鼠 標移入到元素上方時，會出現提示文字。
注釋
• HTML注釋中的內容不會在網頁中顯示。
• 格式: <!-- 注釋內容 -->
• 合理的使用注釋可以幫助開發人員理解網 頁的代碼。
• 注釋不能嵌套！
doctype
• 為了讓瀏覽器知道我們使用的HTML版本我 們還需要在網頁的最上邊添加一個doctype 聲明，來告訴瀏覽器網頁的版本。
• 我們使用的是html5的文 檔聲明 <!DOCTYPE html>
怪異模式
• 為了兼容一些舊的頁面，瀏覽器中設置了 兩種解析模式： – 標准模式（Standards Mode） – 怪異模式（Quirks Mode）
• 怪異模式解析網頁時會產生一些不可預期 的行為，所以我們應該避免怪異模式的出 現。
• 避免的最好方式就是在頁面中編寫正確的 doctype。
編碼問題
• 在計算機的內部，文件都是以二進制編碼 保存的。
• 所謂的二進制編碼就是指1和0，也就是我 們的所有內容都需要轉換為1和0。
• 中國兩個字在計算機的底層保存的可能要 轉換為10100101這種二進制碼，這一過程 稱為編碼。
• 計算機在讀取文件時需要將10100101在轉 換為中國給我們顯示這一過程稱為解碼。
字符集
• 這就帶來一個問題，中國到底是10100101 還是01011010到底由誰說了算。
• 所以我們還需要一個東西稱為字符集，字 符集規定了如何將文本轉換為二進制編碼。
• 常見的字符集：ASKII、ISO8859-1、GBK、 GB2312、UTF-8。
亂碼
• 如果我們保存文件時使用的是utf-8進行編 碼，而瀏覽器讀取頁面時使用gb2312，這 樣就會導致頁面中的內容不能正常顯示， 也就是我們所說的亂碼。
• 所以我們只需要統一兩者使用的字符集就 可以解決亂碼問題。
• 這里為了頁面有更好的使用性，我們一般 使用utf-8。
解決
• 保存文件的編碼我們直接通過編輯器即可 指定，接下來就是要告訴瀏覽器使用什么 字符集去解析文件。
• 在html5中只需要使用meta標簽即可完成 這個任務：
<meta charset="utf-8" />
<meta>
• 作用： – <meta> 標簽可提供有關頁面的元信息，比如 針對搜索引擎和更新頻度的描述和關鍵詞。
– <meta> 標簽位於文檔的頭部，不包含任何內 容。<meta> 標簽的屬性定義了與文檔相關聯 的名稱/值對。
meta的用法
• 設置頁面的字符集 – <meta charset="utf-8">
• 設置網頁的描述 – <meta name="description" content="">
• 設置網頁的關鍵字 – <meta name="keywords" content="">
• 請求的重定向 – <meta http-equiv="refresh" content="5;url=地址"/>
常用標簽
<html>
• 作用： – <html>標簽用於告訴瀏覽器這個文檔中包含 的信息是用HTML編寫的。
• 用法： – 所有的網頁的內容都需要編寫到html標簽中， 一個頁面中html標簽只能有一個。
– html標簽中有兩個子標簽head和body。
<head>
• 作用： – <head>標簽用來表示網頁的元數據，head中 包含了瀏覽器和搜索引擎使用的其他不可見信 息。
• 用法： – head標簽作為html標簽的子元素的出現，一 個網頁中只能有一個head。
<title>
• 作用： – <title>標簽表示網頁的標題，一般會在網頁的標 題欄上顯示。
– title標簽中的文字，是頁面優化的最重要因素。在 搜索引擎的搜索時最先看到的、最醒目的內容。
• 用法： – 建議將title標簽緊貼着head標簽編寫，這樣搜索 引擎可以快速檢索到標題標簽。
– 網站中的多個頁面的title也不應該重復，這樣不利 於搜索隱藏檢索。
<body>
• 作用： – <body>標簽用來設置網頁的主體，所有在頁 面中能看到的內容都應該編寫到body標簽中。
• 用法： – body標簽作為html的子標簽使用。
<h1>~<h6>
• 作用： – h1~h6都是網頁中的標題標簽，用來表示網頁 中的一個標題，不同的是，從h1~h6重要性越 來越低。
– 標題標簽相當於正文的標題，通常認為重要性 僅次於頁面的title。
– 一般標題標簽我們只會使用到h3，h3以后的標 題標簽對於搜索引擎就沒有什么意義了。
– 一個頁面中只會使用一個h1標簽。
<p>
• 作用： – <p>標簽表示網頁中的一個段落。
– 一般瀏覽器會在段落的前和后各加上一個換行， 也就是段落會在頁面中自成一行。
<br />
• 作用 – <br />標簽表示一個換行標簽，使用br標簽可 以使br標簽后的內容另起一行。
<hr />
• 作用： – <hr />標簽是水平線標簽，使用hr標簽可以在 頁面中打印一條水平線，水平線可以將頁面分 成上下兩個部分。
<img />
• 作用： – < img />標簽是圖片標簽，可以用來向頁面中 引入一張外部的圖片。
• 屬性： – src • 指向一個外部的圖片的路徑。
– alt • 圖片的描述
<a>
• 作用： – <a>標簽是超鏈接標簽，通過a標簽，可以快 速跳轉到其他頁面。
• 屬性： – href • 指向一個鏈接地址
– target • 設置打開目標頁面的位置，可選值：_blank新窗口、 _self當前窗口。
實體（轉義字符）
• 在HTML中預留了一些字符。這些預留字符是不能在網頁中直接使用的。 比如<和>,我們不能直接在頁面中使用<和 >號，因為瀏覽器會將它解析為html標簽。為了可以使用這些預留字符，我們必須在 html中使用字符實體。
• 語法: &實體名;
字符實體
• 小於號< – <
• 大於號> – >
• 空格 –
• 和符號& – &
• 版權© – ©
• 引號” – "
• 注冊商標® – ®
• 商標™ – ™
CSS
• 層疊樣式表 (Cascading Style Sheets)
• css可以用來為網頁創建樣式表，通過樣式 表可以對網頁進行裝飾。
• 所謂層疊，可以將整個網頁想象成是一層 一層的結構，層次高的將會覆蓋層次低的。
• 而css就可以分別為網頁的各個層次設置樣 式。
基本語法
• CSS的樣式表由一個一個的樣式構成，一個 樣式又由選擇器和聲明塊構成。
• 語法： – 選擇器 {樣式名:樣式值；樣式名:樣式值; }
– p {color:red; font-size:12px;}
編寫的位置
行內樣式（內聯樣式）
• 可以直接將樣式寫到標簽內部的style屬性 中，這種樣式不用填寫選擇器，直接編寫 聲明即可。<p style="color: red;font-size: 30px"></p>
• 這種方式編寫簡單，定位准確。但是由於 直接將css代碼寫到了html標簽的內部，導 致結構與表現耦合，同時導致樣式不能夠 復用，所以這種方式我們不使用。
內部樣式表
• 可以直接將樣式寫到<style>標簽中。
• 這樣使css獨立於html代碼，而且可以同時為 多個元素設置樣式，這是我們使用的比較多的 一種方式。
• 但是這種方式，樣式只能在一個頁面中使用， 不能在多個頁面中重復使用。
<style> p{color:red; font-size: 30px;} </style>
外部樣式表
• 可以將所有的樣式保存到一個外部的css文 件中，然后通過<link>標簽將樣式表引入 到文件中。
• 這種方式將樣式表放入到了頁面的外部， 可以在多個頁面中引入，同時瀏覽器加載 文件時可以使用緩存，這是我們開發中使 用的最多的方式。
<link rel="stylesheet" type="text/css" href="style.css">
二、CSS選擇器
元素選擇器 標簽名{ }
id選擇器 #id {}
類選擇器 .class{}
通配選擇器 *{}
並集選擇器 選擇器1,選擇器2,選擇器N{}
交集選擇器 選擇器1選擇器2選擇器N{}
后代元素選擇器 祖先元素 后代元素{}
子元素選擇器 父元素 > 子元素 {}
標簽之間的關系
• 祖先元素 – 直接或間接包含后代元素的元素。
• 后代元素 – 直接或間接被祖先元素包含的元素。
• 父元素 – 直接包含子元素的元素。 • 子元素 – 直接被父元素包含的元素。
• 兄弟元素 – 擁有相同父元素的元素。
偽類和偽元素
• 正常鏈接 a:link
• 訪問過的鏈接 a:visited（只能定義字體顏色）
• 鼠標滑過的鏈接 a:hover
• 正在點擊的鏈接 a:active
• 獲取焦點 :focus
• 指定元素前 :before
• 指定元素后 :after
• 選中的元素 ::selection
其他選擇器
給段落定義樣式
• 首字母 :first-letter
• 首行 – :first-line
屬性選擇器
[屬性名] 選取含有指定屬性的元素
[屬性名="屬性值"] 選取屬性值等於指定值的元素
[屬性名~="屬性值"]
[屬性名|="屬性值"]
[屬性名^="屬性值"] 選取屬性值以指定內容開頭的元素
[屬性名$="屬性值"] 選取屬性值以指定內容結尾的元素
[屬性名*="屬性值"] 選取屬性值中包含指定內容的元素
子元素選擇器
• :first-child – 選擇第一個子標簽
• :last-child – 選擇最后一個子標簽
• :nth-child – 選擇指定位置的子元素
• :first-of-type – 尋找指定類型中的第一個子元素
• :last-of-type – 尋找指定類型中的最后一個子元素
• :nth-of-type – 選擇指定類型的子元素
兄弟元素選擇器
– 查找后邊一個兄弟元素 • 兄弟元素 + 兄弟元素{}
– 查找后邊所有的兄弟元素 • 兄弟元素 ~ 兄弟元素{}
否定偽類
從一組元素中將符合要求的元素剔除出去
語法 :not(選擇器){}
樣式的繼承
為祖先元素設置樣式，會同時應用到它的后代元素上，這一特性稱為樣式的繼承。
通過樣式的繼承可以將一些樣式統一設置個祖先元素，這樣所有的后代都會應用到相同的樣式。
但是並不是所有的樣式都會繼承，比如：背景相關的，邊框相關的，定位相關的。具體參考文檔
選擇器的優先級
不同的選擇器有不同的權重值：
– 內聯樣式：權重是1000
– id選擇器：權重是100
– 類、屬性、偽類選擇器：權重是10
– 元素選擇器：權重是1
– 通配符：權重是0
當樣式發生沖突時，需要將相關的選擇器優先級進行求和計算，優先級高的優先顯示，如果優先級一樣，則顯示靠后的樣式
優先級計算時，總大小不能超過他的最大的數量級
可以在樣式后邊添加一個!important，如果樣式中添加了該內容，則該樣式將會獲取最大的優先級，將會優先於所有的樣式顯示，包括內聯樣式，但是這個屬性要慎用。
選擇器的性能
瀏覽器在解析一組選擇器時，是從后邊往前一個一個的解析的
如果選擇器編寫過於長的話，瀏覽器解析起來性能會比較差，所以在編寫選擇器時，越短越好。
*通配選擇器，性能也比較差，要避免使用通配選擇器
三、文本標簽及樣式
文本標簽
<em>和<strong>
• em標簽用於表示一段內容中的着重點。
• strong標簽用於表示一個內容的重要性。
• 這兩個標簽可以單獨使用，也可以一起使 用。
• 通常em顯示為斜體，而strong顯示為粗體。
<i>和<b>
• i標簽會使文字變成斜體。
• b標簽會使文字變成粗體。
• 這兩個標簽和em和strong類似，但是這兩 個標簽沒有語義。
• 所以根據html5標准，當我們只想設置文本 特殊顯示，而不需要強調內容時就可以使 用i和b標簽。
<small>
• small標簽表示細則一類的旁注，通常包括 免責聲明、注意事項、法律限制、版權信 息等。
• 瀏覽器在顯示small標簽時會顯示一個比父 元素小的字號。
<cite>
• 使用cite標簽可以指明對某內容的引用或參 考。例如，戲劇、文章或圖書的標題，歌 曲、電影、照片或雕塑的名稱等。
<blockquote>和<q>
• blockquote和q表示標記引用的文本。
• blockquote用於長引用，q用於短引用。
• 在兩個標簽中還可以使用cite屬性來表示引 用的地址。
<sup>和<sub>
• sup和sub用於定義上標和下標。
• 上標主要用於表示類似於103中的3。
• 下標則用於表示類似余H2O中的2。
<ins>和<del>
• ins表示插入的內容，顯示時通常會加上下 划線。
• del表示刪除的內容，顯示時通常會加上刪 除線。
<code>和<pre>
• 如果你的內容包含代碼示例或文件名，就 可以使用code元素。
• pre元素表示的是預格式化文本，可以使用 pre包住code來表示一段代碼。
列表
列表相關的元素都是塊元素，他們之間可以互相嵌套
去除項目符號 list-style:none
有序列表
使用ol和li來創建一個有序列表。
<ol>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ol>
無序列表
使用ul和li來創建一個無序列表。
<ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> </ul>
定義列表
使用dl、dd、dt來創建一個定義列表。
<dl> <dt>定義項1</dt> <dd>定義描述1</dd> <dt>定義項2</dt> <dd>定義描述2</dd> <dt>定義項3</dt> <dd>定義描述3</dd> </dl>
單位
長度單位
• px – 如果我們將一個圖片放大的話，我們會發現一個圖片 是有一個一個的小色塊構成的，這一個小色塊就是一 個像素，也就是1px，對於不同的顯示器來說一個像素 的大小是不同的。
• 百分比 – 也可以使用一個百分數來表示一個大小，百分比是相 對於父元素來說的，如果父元素使用的大小是16px， 則100%就是16px，200%就是32px。
• em – em和百分比類似，也是相對於父元素說的，1em = 1font-size，1em就相 當於100%，2em相當於200%，1.5em相當於150%。
顏色單位
英文單詞
•直接使用英文單詞來表示顏色 red green blue orange
RGB值
• 也可以使用計算機中常用的RGB值來表示 顏色。可以使用0~255的數值，也可以使 用0%~100%的百分比數。RGB(100%,0%,0%) RGB(0,255,0)
• 第一個數表示紅色的濃度，第二個數表示 綠色濃度，第三個數表示藍色的濃度。
RGBA
• RGBA表示一個顏色和RGB類似，只不過比 RGB多了一個A（alpha）來表示透明度， 透明度需要一個0-1的值。0表示完全透明， 1表示完全不透明。 RGBA(255,100,5,0.5)
十六進制顏色
• 用的最多的顏色是十六進制符號。一個顏色值， 比如：#6600FF實際上包含了三組十六進制的 數字。
• 上邊的例子中66代表紅色的濃度，00代表綠 色的濃度，FF代表了藍色的濃度。最后的顏色 是由這些指定濃度的紅綠藍混合而成的。
• 如果每一組數中的兩個數字都相同，就可以把 十六進制的數字縮短為只有3個字符，如將 #6600FF縮短為#60F。
文本樣式
font-size用來指定文字的大小。
font-family可以指定標簽中文字使用 的字體。 一般來說只有用戶計算機中安裝了我們指 定的字體時，它才會顯示，否則這行代碼 是沒有意義的。通過font-family可以同時指定多個字體。 瀏覽器會優先使用第一 個，如果沒有找到則使用第二個，以此類 推。
字體分類 • serif（襯線字體） • sans-serif（非襯線字體） • monospace （等寬字體） • cursive （草書字體） • fantasy （虛幻字體） • 以上這些分類都是一些大的分類，並沒有 涉及具體的類型，如果將字體指定為這些 格式，瀏覽器會自己選擇指定類型的字體。
font-style用來指定文本的斜體。 – 指定斜體：font-style:italic – 指定非斜體：font-style:normal
font-weight用來指定文本的粗體。 – 指定粗體：font-weight:bold – 指定非粗體：font-weight:normal
font-variant屬性可以將字母類型設置為小 型大寫。在該樣式中，字母看起來像是稍 微縮小了尺寸的大寫字母。
font可以一次性同時設置多個字體的樣式。
• 語法： – font:加粗 斜體 小型大寫 大小/行高 字體
• 這里前邊幾個加粗、斜體和小型大寫的順 序無所謂，也可以不寫，但是大小和字體 必須寫且必須寫到后兩個。
line-height用於設置行高，行高越大則行 間距越大。 行間距 = line-height – font-size
text-transform樣式用於將元素中的字母全 都變成大小。
– 大寫：text-transform:uppercase
– 小寫：text-tansform:lowercase
– 首字母大寫：text-transform:capitalize
– 正常：text-transform:none
text-decoration屬性，用來給文本添加各 種修飾。通過它可以為文本的上方、下方 或者中間添加線條。 • 可選值： – underline – overline – line-through – none
letter-spacing用來設置字符之間的間距。 word-spacing用來設置單詞之間的間距。 這兩個屬性都可以直接指定一個長度或百 分數作為值。正數代表的是增加距離，而 負數代表減少距離。
text-align用於設置文本的對齊方式。 可選值： – left：左對齊 – right：右對齊 – justify：兩邊對齊 – center：居中對齊
text-indent用來設置首行縮進。 該樣式需要指定一個長度，並且只對第一 行生效。
四、盒子模型
CSS中將每一個元素都設置為了一個矩形的盒子
將所有的元素都設置為盒子，是為了方便頁面的布局
當這些元素都是盒子以后，我們的布局就變成了在頁面中擺放盒子
一個盒子我們會分成幾個部分：
– 內容區(content)
• 內容區指的是盒子中放置內容的區域，也就是元素 中的文本內容，子元素都是存在於內容區中的。
• 如果沒有為元素設置內邊距和邊框，則內容區大小 默認和盒子大小是一致的。
• 通過width和height兩個屬性可以設置內容區的大 小。
• width和height屬性只適用於塊元素。
– 內邊距(padding)
• 內邊距指的就是元素內容區與邊框以內 的空間。
• 默認情況下width和height不包含padding的大小。
• 使用padding屬性來設置元素的內邊距。
• 例如： – padding:10px 20px 30px 40px – 這樣會設置元素的上、右、下、左四個方向的內邊距。
• padding:10px 20px 30px; – 分別指定上、左右、下四個方向的內邊距
• padding:10px 20px; – 分別指定上下、左右四個方向的內邊距
• padding:10px; – 同時指定上左右下四個方向的內邊距
• 同時在css中還提供了padding-top、padding-right、paddingright、padding-bottom分別用來指定四個方向的內邊距。
– 邊框(border)
• 可以在元素周圍創建邊框，邊框是元素可見框的最外部。
• 可以使用border屬性來設置盒子的邊框： – border:1px red solid; – 上邊的樣式分別指定了邊框的寬度、顏色和樣式。
• 也可以使用border-top/left/right/bottom分別指定上右下左 四個方向的邊框。
• 和padding一樣，默認width和height並包括邊框的寬度。
• 邊框可以設置多種樣式： none（沒有邊框） dotted（點線） dashed（虛線） solid（實線） double（雙線） groove（槽線） ridge（脊線） inset（凹邊） outset（凸邊）
– 外邊距(margin)
• 外邊距是元素邊框與周圍元素相距的空間。
• 使用margin屬性可以設置外邊距。
• 用法和padding類似，同樣也提供了四個方向的 margin-top/right/bottom/left。
• 當將左右外邊距設置為auto時，瀏覽器會將左右外 邊距設置為相等，所以這行代碼margin:0 auto可 以使元素居中。
盒模型相關樣式
display
可選值： block：設置元素為塊元素 inline：設置元素為行內元素 inline-block：設置元素為行內塊元素 none：隱藏元素（元素將在頁面中完全消失）
visibility
可選值： – visible：可見的 – hidden：隱藏的
overflow
可選值： visible：默認值 scroll：添加滾動條 auto：根據需要添加滾動條 hidden：隱藏超出盒子的內容
文檔流
• 文檔流指的是文檔中可現實的對象在排列時所占用的位置。
• 將窗體自上而下分成一行行，並在每行中按從左至右的順序排 放元素，即為文檔流。
• 也就是說在文檔流中元素默認會緊貼到上一個元素的右邊，如 果右邊不足以放下元素，元素則會另起一行，在新的一行中繼 續從左至右擺放。
• 這樣一來每一個塊元素都會另起一行，那么我們如果想在文檔 流中進行布局就會變得比較麻煩。
塊元素：1.塊元素在文檔流中自上向下排列；2.塊元素在文檔流中寬度默認是父元素的100%；3.塊元素在文檔流中高度默認被內容撐開
內聯元素：1.內聯元素在文檔流中自左向右排列，如果一行中不足以容下所有的內聯元素，則換到下一行，繼續自左至右排列；2.內聯元素在文檔流中寬度和高度默認都被內容撐開
布局
浮動
• 所謂浮動指的是使元素脫離原來的文本流，在父元素中浮動起來。
• 浮動使用float屬性。 可選值： – none：不浮動 – left：向左浮動 – right：向右浮動
• 特點：1.元素浮動以后會完全脫離文檔流；2.浮動以后元素會一直向父元素的最上方移動；3.直到遇到父元素的邊框或者其他的浮動元素，會停止移動；4.如果浮動元素的上邊是一個塊元素，則浮動元素不會覆蓋塊元素；5.浮動元素不會超過他上邊的浮動的兄弟元素，最多一邊齊；6.浮動元素不會覆蓋文字，文字會自動環繞在浮動元素的周圍，可以通過浮動來實現文字環繞的效果
• 浮動以后元素的特點：元素浮動以后，會使其完全脫離文檔流。
塊元素脫離文檔流以后：1.不會獨占一行；2.寬度和高度都被內容撐開
內聯元素脫離文檔流以后會變成塊元素
清除浮動
• clear屬性可以用於清除元素周圍的浮動對元素的影響。
• 也就是元素不會因為上方出現了浮動元素而改變位置。
• 可選值： – left：忽略左側浮動 – right：忽略右側浮動 – both：忽略全部浮動 – none：不忽略浮動，默認值
高度塌陷：
父元素在文檔流中高度默認是被子元素撐開的，當子元素脫離文檔流以后，將無法撐起父元素的高度，也就會導致父元素的高度塌陷。父元素的高度一旦塌陷所有元素的位置將會上移，導致整個頁面的布局混亂
解決方法：1.開啟父元素的BFC（1.設置元素浮動；2.設置元素絕對定位；3.設置元素的類型為inline-block；4.設置overflow為一個非默認值，一般都是使用overflow:hidden來開啟BFC）【在IE6中可以通過開啟hasLayout來解決高度塌陷的問題 zoom:1】；
2.在塌陷的父元素的最后添加一個空白的div，然后對該div進行清除浮動（使用這種方式會在頁面中添加多余的結構）
3.使用after偽類，向父元素后添加一個塊元素，並對其清除浮動
定位
position屬性可以控制Web瀏覽器如何以 及在何處顯示特定的元素。
• 可以使用position屬性把一個元素放置到網 頁中的任何位置。
• 可選值： – static 默認值，元素沒有開啟定位
– relative 開啟元素的相對定位
– absolute 開啟元素的絕對定位
– fixed 開啟元素的固定定位
相對定位
• 每個元素在頁面的文檔流中都有一個自然位置。相 對於這個位置對元素進行移動就稱為相對定位。周 圍的元素完全不受此影響。
• 當將position屬性設置為relative時，則開啟了元素 的相對定位。
• 當開啟了相對定位以后，可以使用top、right、 bottom、left四個屬性對元素進行定位。
相對定位的特點
• 如果不設置元素的偏移量，元素位置不會發生改變。
• 相對定位不會使元素脫離文本流。元素在文本流中 的位置不會改變。
• 相對定位不會改變元素原來的特性。 • 相對定位會使元素的層級提升，使元素可以覆蓋文 本流中的元素。
絕對定位
• 絕對定位指使元素相對於html元素或離他最近 的祖先定位元素進行定位。
• 當將position屬性設置為absolute時，則開啟 了元素的絕對定位。
• 當開啟了絕對定位以后，可以使用top、right、 bottom、left四個屬性對元素進行定位。
絕對定位的特點
• 絕對定位會使元素完全脫離文本流。
• 絕對定位的塊元素的寬度會被其內容撐開。
• 絕對定位會使行內元素變成塊元素。
• 一般使用絕對定位時會同時為其父元素指定一 個相對定位，以確保元素可以相對於父元素進 行定位。
固定定位
• 固定定位的元素會被鎖定在屏幕的某個位置上，當 訪問者滾動網頁時，固定元素會在屏幕上保持不動。
• 當將position屬性設置為fixed時，則開啟了元素的 固定定位。
• 當開啟了固定定位以后，可以使用top、right、 bottom、left四個屬性對元素進行定位。
• 固定定位的其他特性和絕對定位類似。
z-index
• 當元素開啟定位以后就可以設置z-index這 個屬性。
• 這個屬性可以提升定位元素所在的層級。
• z-index可以指定一個整數作為參數，值越 大元素顯示的優先級越高，也就是z-index 值較大的元素會顯示在網頁的最上層。