CSS基礎(chǔ)知識整理
時(shí)間：2023-07-19 23:27:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-07-19 23:27:01 來源：網(wǎng)站運(yùn)營
CSS基礎(chǔ)知識整理：
1 什么是CSS？
CSS通常稱為CSS樣式表或?qū)盈B樣式表（級聯(lián)樣式表），主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。
CSS以HTML為基礎(chǔ)，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設(shè)置不同的樣式。
2 CSS語法
CSS基礎(chǔ)語法
CSS規(guī)則由兩個(gè)主要部分構(gòu)成：選擇器以及一條或多條聲明。
每條聲明由一個(gè)屬性和一個(gè)值組成。屬性(property)是設(shè)置的樣式屬性，每個(gè)屬性有一個(gè)值，屬性和值被冒號分開。
比如 selector{property：value}選擇器通常是需要改變樣式的HTML元素。
比如 h1{color:red; font-size:14px;} h1是選擇器，color和font-size是屬性，red和14px是值。注意：
如果定義不止一個(gè)聲明則需要用分號將每個(gè)聲明分開。例如：p{text-align:center;color:red}
如果值為若干單詞，則要給值加引號： 例如：p {font-family: "sans serif";}
CSS高級語法
選擇器的分組
h1,h2,h3,h4,h5,h6 { color: green; }繼承及其問題：根據(jù) CSS，子元素從父元素繼承屬性。
body { font-family: Verdana, sans-serif;}3 創(chuàng)建CSS
CSS 創(chuàng)建樣式表分為三種情況：
內(nèi)部樣式表<head> <style type="text/CSS"> 選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;} div{width:200px; height:200px; border:1px solid red;} </style></head>行內(nèi)式(內(nèi)聯(lián)樣式)<div style="width:200px;height:100px;border:1px solid black;"></div>外部樣式表(外鏈?zhǔn)? <head> <link rel="stylesheet" type="text/css" href="css/style.css"> </head>?
樣式優(yōu)先級：內(nèi)聯(lián)樣式>內(nèi)部樣式>外部樣式三種樣式表區(qū)別：
行內(nèi)樣式表 ：優(yōu)點(diǎn) 書寫方便；缺點(diǎn) 沒有實(shí)現(xiàn)樣式和結(jié)構(gòu)相分離；使用情況 較少；控制范圍 控制一個(gè)標(biāo)簽(少)。
內(nèi)部樣式表：優(yōu)點(diǎn) 部分結(jié)構(gòu)和樣式相分離； 缺點(diǎn) 沒有徹底分；使用情況 較多；控制范圍 控制一個(gè)頁面(中)。
外部樣式表：優(yōu)點(diǎn) 完全實(shí)現(xiàn)結(jié)構(gòu)和樣式相分離； 缺點(diǎn) 需要引入；使用情況 最多，推薦；控制范圍 控制整個(gè)站點(diǎn)(多)。
4 id和class選擇器
ID選擇器：id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式，id 屬性和身份證一樣具有唯一性。
HTML元素以 id 屬性來設(shè)置 id 選擇器，CSS 中 id 選擇器以 "#" 來定義。注意： id 屬性不能以數(shù)字開頭。
語法：#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }?
class選擇器：class 選擇器用于描述一組元素的樣式，也叫做類選擇器。
class 可以在多個(gè)元素中使用，并且一個(gè)元素也可以指定多個(gè)類名。
在 CSS 中，類選擇器以一個(gè)點(diǎn) "." 號來定義。
同樣的類名的第一個(gè)字符也不能使用數(shù)字。
語法：.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }?
ID 選擇器和類（class）選擇器的區(qū)別：相同點(diǎn)：
不同點(diǎn)：
- ID 選擇器只能在文檔中使用一次，而類選擇器可以使用多次。
- 可以使用類選擇器詞列表方法為一個(gè)元素同時(shí)設(shè)置多個(gè)樣式(也就是一個(gè)元素可以制定多個(gè)類名)，而ID只能指定一個(gè)。
5 CSS元素選擇器
最常見的CSS選擇器就是元素選擇器，也就是標(biāo)簽選擇器，也就是在HTML中元素的最基本的選擇器。
語法：標(biāo)簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } 或者元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }標(biāo)簽選擇器最大的優(yōu)點(diǎn)是能快速為頁面中同類型的標(biāo)簽統(tǒng)一樣式，同時(shí)這也是他的缺點(diǎn)，不能設(shè)計(jì)差異化樣式。
6 CSS背景(background)
background 屬性用于定義 HTML 元素的背景。
定義元素背景效果的 CSS 屬性有五種：
background-color 背景顏色background-image 背景圖像background-repeat 背景圖像設(shè)置水平或垂直平鋪或不平鋪background-position 背景圖像設(shè)置定位background-attachment 背景圖像設(shè)置固定或滾動?背景屬性簡寫：body{ background:green url('images/fix.gif') no-repeat fixed 12px 24px;}當(dāng)使用簡寫屬性時(shí)，屬性值的順序依次為：background-color --> background-image --> background-repeat --> background-attachment --> background-position7 CSS外觀屬性
CSS文本格式主要分為：文本顏色(color)、文本對齊方式、文本修飾、文本陰影、文本縮進(jìn)、文本間距、字間距、文本空白處理、文本轉(zhuǎn)換。
?
文本對齊方式：text-align屬性有四個(gè)值：left，center，right，justify(兩端對齊)；屬性默認(rèn)值為auto。
文本修飾：text-decoration 屬性用來設(shè)置或刪除文本的修飾。
主要是用來刪除超鏈接的下劃線，也可以使用其他值來設(shè)置文本的修飾；
text-decoration:overline，設(shè)置文本上劃線。
text-decoration:line-through; 設(shè)置文本中間劃線。
text-decoration:underline; 設(shè)置文本下劃線。
文本陰影：text-shadow: x y shadow color；
其中 x 是水平陰影的偏移值，
y 是垂直陰影的偏移值，
shadow 用于指定陰影的模糊值，即模糊效果的作用距離，不允許負(fù)值。
color 指定陰影的顏色。該屬性有兩個(gè)作用，產(chǎn)生陰影和模糊主體。
文本縮進(jìn)：用來指定文本的首行縮進(jìn)，允許為負(fù)值，如果值是負(fù)數(shù)，第一行則向左縮進(jìn)。
CSS表示為：text-indent:2em，em 是相對文字大小的單位，1em 就是1個(gè)文字大小，2em 就是兩個(gè)文字大小。
文本間距：行高，也就是文本行的高度。例如：line-height：22px;
字間距：letter-spacing 和 word-spacing 這兩個(gè)屬性都可用來增加或減少文本間的空白，即字間距。
不同的是：
letter-spacing 屬性設(shè)置字符間距，而 word-spacing 屬性設(shè)置單詞間距。
注意：word-spacing 屬性對中文無效，因此在設(shè)置中文的字間距時(shí)請使用 letter-spacing 屬性。
letter-spacing 和 text-align：justify 是兩個(gè)沖突的屬性，不能同時(shí)使用；
text-align:justify 是設(shè)置內(nèi)容根據(jù)寬度自動調(diào)整字間距，使各行的長度恰好相等，實(shí)現(xiàn)文本兩端對齊效果，
而 letter-spacing 是指定一個(gè)固定的字間距。
文本空白處理：white-space 屬性指定元素內(nèi)的空白如何處理，默認(rèn)值為 normal 空白會被瀏覽器忽略。
該屬性還有4個(gè)值：
nowrap 文本不會換行，禁止換行，文本會在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。
pre 空白會被瀏覽器保留，這種方式類似 HTML 中的 <pre> 標(biāo)簽，用于定義預(yù)格式文本。
pre-wrap 指定保留空白符序列，但是正常地進(jìn)行換行。
pre-line 指定合并空白符序列，但是保留換行符，并允許自動換行。
文本轉(zhuǎn)換：text-transform 屬性控制文本中的字母。
是用來指定在一個(gè)文本中的大寫和小寫字母，可用于將所有字句變成大寫或小寫字母，或每個(gè)單詞的首字母大寫。
text-transform:capitalize， 定義文本中的每個(gè)單詞以大寫字母開頭。
text-transform:uppercase，定義文本僅有大寫字母。
text-transform:lowercase，定義文本僅有小寫字母。
?
8 CSS字體 (font)
font 屬性可用于設(shè)置文本字體，定義樣式，如加粗，大小等，屬于復(fù)合屬性，也叫做簡寫屬性。
簡寫順序：
font-style(字體樣式) --> font-variant(字體變形) --> font-weight(字體加粗) --> font-size(字體大小)/line-height --> font-family(設(shè)置文本字體)
注意，font-size 和 font-family 的值是必需的，否則無效。
?
(1)是絕對或相對大小，可以使用px、em、%和em組合來設(shè)置。
- 使用px設(shè)置：通過像素設(shè)置文本大小是設(shè)置的整個(gè)頁面。
- 使用em設(shè)置：1em等于當(dāng)前的字體尺寸，比如設(shè)置的默認(rèn)字體是12px，因此1em的默認(rèn)大小就是12px。像素轉(zhuǎn)換em：px/12 = em
- 使用%和em組合設(shè)置：在所有瀏覽器的解決方案中，設(shè)置 <body> 元素的默認(rèn)字體大小是 100%，可以顯示相同的文本大小，并允許所有瀏覽器縮放文本的大小。
<head> <style> body{font-size:100%} p{font-size:2.5em; } /* 2.5*16=40px */ </style></head><body> <p>使用%和em組合設(shè)置</p></body>?
(2)font-style 屬性主要用于指定斜體文字。
屬性有三個(gè)值：
- normal正常顯示文本
- italic 定義斜體
- oblique 定義傾斜的文字
9 CSS鏈接
鏈接的四種狀態(tài)是：
a:link - 正常，未訪問過的鏈接。a:visited - 已訪問過的鏈接。a:hover - 當(dāng)鼠標(biāo)滑動到鏈接上時(shí)。a:active - 鏈接被點(diǎn)擊的那一刻。10 CSS列表
作用：1 設(shè)置不同的列表項(xiàng)標(biāo)記 2 設(shè)置列表項(xiàng)標(biāo)記為圖像
修改列表項(xiàng)標(biāo)記使用 list-style-type，使用圖像作為標(biāo)記可以利用 list-style-image 屬性完成。
- 無序列表：
無序列表經(jīng)常用來做導(dǎo)航欄菜單，通常都需要隱藏?zé)o序列表項(xiàng)的標(biāo)記，那么就使用 list-style-type:none，表示無標(biāo)記。 - list-style-type 屬性的默認(rèn)值為 disc 實(shí)心圓，即小黑點(diǎn)。除了無標(biāo)記還可以修改標(biāo)記，例如circle空心圓，square實(shí)心方塊。
- 有序列表：
有序列表項(xiàng)標(biāo)記默認(rèn)使用數(shù)字樣式顯示，即 list-style-type:decimal。
- 圖像作為列表項(xiàng)標(biāo)記
要指定列表項(xiàng)標(biāo)記的圖像，可以使用 list-style-image 屬性，只需要簡單地設(shè)置一個(gè) url() 值，就可以將圖像作為標(biāo)記類型。
列表屬性簡寫：list-style：list-style-type，list-style-position，list-style-image;
11 CSS表格
表格邊框： border
表格寬度和高度：width 和 height
表格對齊：text-align 和 vertical-align
表格內(nèi)邊距：tr,td的padding設(shè)置
?
<head> <style> #tab{ width:50%; font-family:"微軟雅黑"; /*設(shè)置是否將表格邊框合并為單一線條的邊框*/ border-collapse:collapse; } #tab th,#tab td{ /*表格邊框*/ border:1px solid #7AC942; /*表格內(nèi)邊距*/ padding:5px 10px; } #tab th{ color:white; background-color:#9C3; font-size:1.125em; /*左對齊*/ text-align:left; padding-top:4px; padding-bottom:8px; } #tab .list td{ /*邊顏色*/ color:#000; /*背景顏色*/ background-color:#FFC; } caption{ margin-bottom:10px; font-weight:bold; } </style></head><body><table id="tab"> <caption>食物類別</caption> <thead> <tr class="list"> <th>粗糧</th> <th>蔬菜</th> <th>水果</th> </tr> </thead> <tbody> <tr> <td>大豆</td> <td>黃瓜</td> <td>香蕉</td> </tr> <tr class="list"> <td>高粱</td> <td>菠菜</td> <td>檸檬</td> </tr> <tr class="list"> <td>燕麥片</td> <td>白菜</td> <td>西瓜</td> </tr> </tbody></table></body>12 CSS 選擇器
1 分組和嵌套選擇器例如：h1{color:gray;} p{color:gray;}可以寫成：h1, p{color:gray;}.div1 p{ color:white;}.div1 p a{ color:yellow; font-weight:bold;}<div class="div1"> <p>嵌套選擇器 <a href="#">深層嵌套選擇器</a> </p></div>*{ padding:0; margin:0;}?
2 屬性選擇器- 屬性選擇器：屬性選擇器使用[attr] ；例如：把所有帶有 title 屬性的元素的字體設(shè)置為紅色
<head> <style> [title]{ color:red; } </style></head><body> <h1>h1 標(biāo)題不帶有 title 屬性</h1> <h2 title="標(biāo)題">h2 可以設(shè)置樣式</h2> <a href="#" title="鏈接">超鏈接可以設(shè)置樣式</a></body>- 屬性和值選擇器：屬性選擇器使用[attr=value]
<head> <style> [title=Hello]{ color:blue; } </style></head><body> <h1 title="Hello world">h1 標(biāo)題 title="Hello world"</h1> <h2 title="Hello">h2 可以設(shè)置樣式</h2> <a href="#" title="Hello">超鏈接可以設(shè)置樣式</a></body>- 屬性和多個(gè)值的選擇器：使用有兩種情況：屬性值用空格分隔使用：[attr~=value]；屬性值用連字符分隔則使用：[attr|=value]
例如：把包含 title='Hello' 的元素的字體設(shè)置為綠色，使用 ~ 分隔屬性和值
<head> <style> [title~=Hello]{ color:green; } [lang|=zh]{ color:gray; } </style></head><body> <h1 title="world">h1 標(biāo)題 title="world"</h1> <h2 title="Hello">h2 可以設(shè)置樣式</h2> <h3 title="Hello Web">h3 可以設(shè)置樣式</h2> <a href="#" title="Hello world">超鏈接可以設(shè)置樣式</a> <a href="#" lang="zh-TW">超鏈接可以設(shè)置樣式</a></body>- 表單樣式：屬性選擇器在為不帶有 class 或 id 的表單設(shè)置樣式時(shí)特別有用。例如：
<head> <style> input[type="text"]{ width:150px; display:block; margin-bottom:5px; background-color:yellow; } input[type="button"]{ width:120px; margin-top:5px; background-color:green; } </style></head><body> <form name="input" action="demo.php" method="get"> 用戶名：<input type="text" name="user" placeholder="請輸入登錄名"> 昵 稱：<input type="text" name="name" placeholder="請輸入角色名"> <input type="button" value="查詢"> </form></body>3 組合選擇器：組合選擇符是包括各種簡單選擇器的組合方式，組合選擇符說明了兩個(gè)選擇器直接的關(guān)系。
- 后代選則器:又稱為包含選擇器，以空格分隔，子元素選擇器只能選擇作為某元素子元素的元素。
- 子元素選擇器:子元素選擇器只能選擇作為某元素子元素的元素，以 > 分隔，子元素選擇器只能選擇作為某元素子元素的元素。
- 相鄰兄弟選擇器：可選擇緊接在另一元素后的元素，且二者有相同父元素，以 + 分隔。
- 普通相鄰兄弟選擇器：選取所有指定元素的相鄰兄弟元素，以 ~ 分隔。
- 選擇器組合：多種選擇器可以結(jié)合起來使用。
13 CSS偽類(不區(qū)分大小寫)
CSS 偽類是用來向一些選擇器添加特殊的效果。
語法：選擇器:偽類{attr:value;}CSS 類也可以使用偽類：選擇器.class:偽類{attr:value;}
?
(1)超鏈接偽類
在瀏覽器中，鏈接的不同狀態(tài)都可以以不同的方式顯示：
a:link{color:#FF0000;} /* 未訪問的鏈接顯示為紅色 */a:visited{color:#00FF00;} /* 已訪問的鏈接顯示為綠色 */a:hover{color:#FF00FF;} /* 鼠標(biāo)劃過鏈接顯示為紫紅色 */a:active{color:#0000FF;} /* 已選中的鏈接顯示為藍(lán)色 */注意： 在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，a:active 必須被置于 a:hover 之后，才是有效的。
(2)偽類和 CSS 類(偽類可以與 CSS 類配合使用)
(3)CSS2 - :first - child 偽類
<body> <p>第一個(gè) p 元素</p> <p>第二個(gè) p 元素</p> <p>第三個(gè) p 元素</p></body>選擇作為任何元素的第一個(gè)子元素 p。選擇器使用 p:first-child。
選擇所有 p 元素中的第一個(gè)子元素 b。選擇器使用 p>b:first-child。
選擇所有作為第一個(gè)子元素 p 中的所有 b 元素。選擇器使用 p:first-child b。
(4)CSS2 - :lang 偽類
使用 :lang 偽類可以為不同的語言定義特殊的規(guī)則：
html:lang(zh-CN){ color:blue;}?:lang(en)>p{ color:gray;}14 CSS 偽元素
CSS 偽元素是用來為一些選擇器添加特殊的效果。
語法：選擇器:偽元素{attr:value;}CSS 類也可以使用偽元素：選擇器.class:偽元素{attr:value;}
(1)CSS2 - :before 偽元素
h1:before{ content:url(images/logo.gif);}(2)CSS2 - :after 偽元素
h1:after{ content:url(images/logo.gif);}content 屬性與 :before 及 :after 偽元素配合使用，來插入生成內(nèi)容，該屬性用于定義元素之前或之后放置的生成內(nèi)容。
content 的內(nèi)容一般可以為四種：
- content:none 該值是默認(rèn)值，不插入內(nèi)容。
- content:"string" 插入文本。
- content:attr(屬性) 插入標(biāo)簽屬性值。
- content:url(路徑) 使用指定的絕對或相對地址插入一個(gè)外部資源，可以是圖像，音頻，視頻或?yàn)g覽器支持的其他任何資源。
15 塊級元素和行內(nèi)元素
塊級元素(block-level)：每個(gè)塊元素通常都會獨(dú)自占據(jù)一整行或多整行，可以對其設(shè)置寬度、高度、對齊等屬性，常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建。
常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標(biāo)簽是最典型的塊元素。
塊級元素特點(diǎn)：
- 總是從新行開始
- 高度，行高，外邊距以及內(nèi)邊距都是可以控制的
- 寬度默認(rèn)是容器的100%
- 可以容納內(nèi)聯(lián)元素和其他塊元素
行內(nèi)元素(inline-level)：不占有獨(dú)立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)，一般不可以設(shè)置高度，寬度，對齊等屬性，常用于控制頁面中文本的樣式。常見的行內(nèi)元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標(biāo)簽最典型的行內(nèi)元素。
行內(nèi)元素的特點(diǎn)：- 和相鄰行內(nèi)元素在一行上。
- 高、寬無效，但水平方向的padding和margin可以設(shè)置，垂直方向的無效。
- 默認(rèn)寬度就是它本身內(nèi)容的寬度。
- 行內(nèi)元素只能容納文本或則其他行內(nèi)元素。（a特殊）
注意：
1.只有文字才能組成段落，因此p里面不能放塊級元素，同理還有這些標(biāo)簽h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標(biāo)簽，里面不能放其他塊級元素。
2. 鏈接里面不能再放鏈接。
16 行內(nèi)塊元素(inline-block)
在行內(nèi)元素中有幾個(gè)特殊的標(biāo)簽——<img />、<input />、<td>，可以對它們設(shè)置寬高和對齊屬性，有些資料可能會稱它們?yōu)樾袃?nèi)塊元素。
行內(nèi)塊元素的特點(diǎn)：
- 和相鄰行內(nèi)元素（行內(nèi)塊）在一行上,但是之間會有空白縫隙。
- 默認(rèn)寬度就是它本身內(nèi)容的寬度。
- 高度，行高、外邊距以及內(nèi)邊距都可以控制。
17 CSS 三大特性
層疊、繼承、優(yōu)先級CSS層疊性：是指多種CSS樣式的疊加。
CSS繼承性：是指書寫CSS樣式表時(shí)，子標(biāo)簽會繼承父標(biāo)簽的某些樣式，如文本顏色和字號。
想要設(shè)置一個(gè)可繼承的屬性，只需將它應(yīng)用于父元素即可。簡單理解就是： 子承父業(yè)。
CSS優(yōu)先級：定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一元素上，這時(shí)就會出現(xiàn)優(yōu)先級的問題。
使用了 !important聲明的規(guī)則。
考慮權(quán)重時(shí)，需要注意的一些點(diǎn)：
- 繼承樣式的權(quán)重為0。
- 行內(nèi)樣式優(yōu)先。
- 權(quán)重相同時(shí)，CSS遵循就近原則。
18 盒子模型（CSS重點(diǎn)）
CSS三大模塊： 盒子模型 、浮動 、定位。盒子模型：就是把HTML頁面中的元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(nèi)容的容器。每個(gè)矩形都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。
?
盒子邊框（border）
語法：border : border-width || border-style || border-color 常用屬性值：none：沒有邊框即忽略所有邊框的寬度（默認(rèn)值）、solid線(單實(shí)線)、dashed(虛線)、dotted(點(diǎn)線)、double(雙實(shí)線)19 實(shí)現(xiàn)居中
1 外邊距實(shí)現(xiàn)盒子居中滿足兩個(gè)條件：
- 必須是塊級元素。
- 盒子必須指定了寬度（width）
然后給元素左右的外邊距都設(shè)置為auto。
例如：.header{ width:960px; margin:0 auto;}2 文字盒子居中- 文字水平居中是 text-align: center
- 盒子水平居中 左右margin 改為 auto
20 盒子模型布局穩(wěn)定性
按照優(yōu)先使用寬度 （width）、其次 使用內(nèi)邊距（padding）、再次 外邊距（margin）。
width > padding > margin
原因：
- margin 會有外邊距合并 還有 ie6下面margin 加倍的bug，所以最后使用。
- padding 會影響盒子大小， 需要進(jìn)行加減計(jì)算（麻煩） 其次使用。
- width 沒有問題，我們經(jīng)常使用寬度剩余法 高度剩余法來做。
21 盒子陰影
語法： box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 內(nèi)/外陰影；22 浮動(float)
CSS的定位機(jī)制有3種：普通流（標(biāo)準(zhǔn)流）、浮動和定位。浮動：是指設(shè)置了浮動屬性的元素會脫離標(biāo)準(zhǔn)普通流的控制，移動到其父元素中指定位置的過程。
語法：選擇器{float:屬性值;} 屬性值可以是left，right，both，none。
目的：為了讓多個(gè)塊級元素同一行上顯示。
23 定位(position)
position 屬性值分為四種：
- static：自動定位（默認(rèn)定位方式），所謂靜態(tài)位置就是各個(gè)元素在HTML文檔流中默認(rèn)的位置。
- relative：相對定位，相對定位是將元素相對于它在標(biāo)準(zhǔn)流中的位置進(jìn)行定位
- absolute：絕對定位，相對于其上一個(gè)已經(jīng)定位的父元素進(jìn)行定位
- fixed：固定定位，相對于瀏覽器窗口進(jìn)行定位。它的特點(diǎn)在于它的元素跟父親沒有任何關(guān)系，只認(rèn)瀏覽器；完全脫標(biāo)，不占有位置，不隨著滾動條滾動。
疊放次序（z-index的特點(diǎn)：
- z-index的默認(rèn)屬性值是0，取值越大，定位元素在層疊元素中越居上。
- 如果取值相同，則根據(jù)書寫順序，后來居上。
- 后面數(shù)字一定不能加單位。
- 只有相對定位，絕對定位，固定定位有此屬性，其余標(biāo)準(zhǔn)流，浮動，靜態(tài)定位都無此屬性，亦不可指定此屬性
在線咨詢
