CSS知識
CSS（Cascading Style Sheet，層疊樣式表）定義如何顯示HTML元素。
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。Css之車更豐富的文檔外觀，Css可以為任何元素的文本和背景設置顏色；允許在任何元素外圍設置邊框；允許改變文字的大小，裝飾（如下划線），間隔，甚至可以確定是否顯示文本。
CSS語法
每個CSS樣式右兩部分組成：選擇器和聲明。聲明又包括屬性和屬性值。
提示：聲明使用花括號包圍， 多個屬性用分好分隔，屬性和值之間使用冒號分隔。
CSS的幾種引入方式
行內樣式
行內樣式是在標記的style屬性中設定CSS樣式。不推薦大規模使用。如果代碼量多的話，閱讀效率降低。
<p style="color: red">Hello world.</p>
內部樣式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下：
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head>
外部樣式
外部樣式就是將CSS寫在一個單獨的文件中，然后在頁面進行引入即可。推薦使用此方式。
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
CSS選擇器
基本選擇器
標簽選擇器
- 什么是標簽選擇器？
- 作用：根據指定的標簽名稱，在當前界面中找到所有該名稱的標簽，然后設置屬性
- 格式：
標簽名稱{ 屬性:值; } p {color: "red";}
- 注意點：
1、標簽選擇器選中的是當前界面中所有的標簽，而不能單獨選中某一個標簽 2、標簽選擇器無論標簽藏的多深都能選中 3、只要是HTML中的標簽就可以作為標簽選擇器（h/a/img/ul/ol/dl/input...）
id選擇器
- 什么是id選擇器？
- 作用：根據指定的id名稱找到對應的標簽，然后設置屬性
- 格式：
#id名稱{ 屬性:值; } #i1 { background-color: red; }
- 注意點：
1、每個HTML標簽都有一個屬性叫做id，也就是說每個標簽都可以設置id 2、在同一個界面中id的名稱是不可以重復的 3、在編寫id選擇器時一定要在id名稱前面加上# 4、id的名稱只能由字母/數字/下划線組成 5、id名稱不能以數字開頭 6、id名稱不能是HTML標簽的名稱（不能是a h1 img input ...） 7、在企業開發中一般情況下如果不僅僅是為了設置樣式，我們不會使用id，因為在前端開發中id是留給js使用的
類選擇器
- 什么是類選擇器？
- 作用：根據指定的類名找到對應的標簽，然后是設置屬性
- 格式：
格式: .類名{ 屬性:值; } .c1 { font-size: 14px; }
-
注意點：
1、每個HTML標簽都有一個屬性叫做class，也就是說每個標簽都可以設置類名 2、在同一個界面中class的名稱是可以重復的 3、在編寫class選擇器時一定要在class名稱前面加上. 4、類名的命名規范和id名稱的命名規范一樣 5、類名就是專門給CSS設置樣式的 6、在HTML中每個標簽可以同時綁定多個類名。多個類名用空格隔開 <標簽名稱 class="類名1 類名2 ...">
1、id和class的區別？
1.1、id相當於人的身份證不可以重復；class相當於人的名稱可以重復
1.2、一個HTML標簽中只能綁定一個id名稱；一個HTML標簽中可以綁定多個class名稱
2、id選擇器和class選擇器區別？
id選擇器是以#開頭
class選擇器是以.開頭
3、在企業開發中如何選擇？
id一般情況下是給js使用的，除非特殊情況，否則不要使用id去設置樣式
組合選擇器
后代選擇器
- 什么是后代選擇器？
- 作用：找到指定標簽的所有特定的后代標簽，設置屬性
- 格式：
標簽名稱1 標簽名稱2{ 屬性:值; } 先找到所有名稱叫做"標簽名稱1"的標簽, 然后再在這個標簽下面去查找所有名稱叫做"標簽名稱2"的標簽, 然后在設置屬性 div p{} /*li內部的a標簽設置字體顏色*/ li a { color: green; }
-
注意點：
1、后代選擇器必須用空格隔開 2、后代不僅僅是兒子，也包括孫子/重孫子，只要最終是放到指定標簽中的都是后代 3、后代選擇器不僅僅可以使用標簽名稱，還可以使用其它選擇器 4、后代選擇器可以通過空格一直延續下去
子元素選擇器
- 什么是子元素選擇器？
- 作用：找到指定標簽中所有特定的直接子元素，然后設置屬性
- 格式：
格式: 標簽名稱1>標簽名稱2{ 屬性:值; } 先找到所有名稱叫做"標簽名稱1"的標簽, 然后在這個標簽中查找所有直接子元素名稱叫做"標簽名稱2"的元素 /*選擇所有父級是 <div> 元素的 <p> 元素*/ div>p { font-family: "Arial Black", arial-black, cursive; }
- 注意點：
1、子元素選擇器只會查找兒子，不會查找其它被嵌套的標簽 2、子元素選擇器之間需要用>符號連接，並且不能有空格 3、子元素選擇器不僅僅可以使用標簽名稱，還可以使用其它選擇器 4、子元素選擇器可以通過>符號一直延續下去
1、后代選擇器和子元素選擇器之間的區別？ 1.1、后代選擇器使用空格作為連接符號 1.2、子元素選擇器使用>作為連接符號 后代選擇器會選中指定標簽中，所有特定的后代標簽，也就是會選中兒子/孫子...,只要是被放到指定標簽中的特定標簽都會被選中 子元素選擇器只會選中指定標簽中，所有的特定的直接標簽，也就是只會選中特定的兒子標簽 2、后代選擇器和子元素選擇器之間的共同點 2.1、后代選擇器和子元素選擇器都可以使用標簽名稱/id名稱/class名稱來作為選擇器 2.2、后代選擇器和子元素選擇器都可以通過各自的連接符號一直延續下去 選擇器1>選擇器2>選擇器3>選擇器3{} 3、在企業開發中如何選擇？ 如果想選中指定標簽中的所有特定的標簽，那么就使用后代選擇器 如果只想選中指定標簽中的所有特定兒子標簽，那么久使用子元素選擇器
兄弟選擇器
相鄰兄弟選擇器
- 什么是相鄰兄弟選擇器？
- 作用：給指定標簽后面緊跟的那個標簽設置屬性
- 格式：
選擇器1+選擇器2{ 屬性:值; } /*選擇所有緊接着<div>元素之后的<p>元素*/ div+p { margin: 5px; }
-
注意點：
1、相鄰兄弟選擇器必須通過+連接 2、相鄰兄弟選擇器只能選中緊跟其后的那個標簽，不能選中被隔開的標簽
通用兄弟選擇器
- 什么是通用兄弟選擇器？
- 作用：給指定選擇器后面的所有選擇器選中的所有標簽設置屬性
- 格式：
選擇器1~選擇器2{ 屬性:值; } /*i1后面所有的兄弟p標簽*/ #i1~p { border: 2px solid royalblue; }
- 注意點：
1、通用兄弟選擇器之間必須使用~連接 2、通用兄弟選擇器選中的是指定選擇器后面某個選擇器選中的所有標簽，無論有沒有被隔開都可以選中
屬性選擇器
- 什么是屬性選擇器？
- 作用：根據指定的屬性名稱找到對應的標簽，然后設置屬性
- 格式：
格式: [attribute] 作用:根據指定的屬性名稱找到對應的標簽, 然后設置屬性 [attribute=value] 作用: 找到有指定屬性, 並且屬性的取值等於value的標簽, 然后設置屬性 最常見的應用場景, 就是用於區分input屬性 /*用於選取帶有指定屬性的元素。*/ p[title] { color: red; } /*用於選取帶有指定屬性和值的元素。*/ p[title="213"] { color: green; }
其它用法1.屬性的取值是以什么開頭的 [attribute|=value] CSS2 [attribute^=value] CSS3 兩者之間的區別: CSS2中的只能找到value開頭,並且value是被-和其它內容隔開的 CSS3中的只要是以value開頭的都可以找到, 無論有沒有被-隔開 2.屬性的取值是以什么結尾的 [attribute$=value] CSS3 3.屬性的取值是否包含某個特定的值得 [attribute~=value] CSS2 [attribute*=value] CSS3 兩者之間的區別: CSS2中的只能找到獨立的單詞, 也就是包含value,並且value是被空格隔開的 CSS3中的只要包含value就可以找到
通配符選擇器
- 什么是通配符選擇器？
- 作用：給當前界面上所有的標簽設置屬性
- 格式：
格式: *{ 屬性:值; } * { color: white; }
- 注意點：
由於通配符選擇器是設置界面上所有的標簽的屬性，所以在設置之前會遍歷所有的標簽，如果當前界面上的標簽比較多，那么性能就會比較差，所以在企業開發中一般不會使用通配符選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>選擇器練習</title> <style> /*標簽選擇器 p{ color: red; } */ /*id選擇器 #identity1{ color: red; } #identity2{ color: red; } */ /*類選擇器 .para{ color: red; } */ /*后代選擇器 div p{ color: red; } */ /*子元素選擇器 div>p{ color: red; } */ /*交集選擇器 p.para{ color: red; } */ /*並集選擇器 #identity1,#identity2{ color: red; } */ /*通用兄弟選擇器 h1~p{ color: red; } */ /*序選擇器 p:nth-of-type(n+1){ color: red; } */ /*屬性選擇器*/ p[id]{ color: red; font-size: 10px; text-decoration: underline; } </style> </head> <body> <div> <h1>我是標題</h1> <p id="identity1" class="para">我是段落1</p> <p id="identity2" class="para">我是段落2</p> </div> </body> </html>
CSS三大特性
繼承性
- 什么是繼承性？
- 作用：給父元素設置一些屬性，子元素也可以使用，這個我們就稱之為繼承性
- 示例代碼：
<style> div{ color: red; } </style> <div> <ul> <li> <p>我是段落</p> </li> </ul> </div> <!--p會變成紅色-->
- 注意點：
1、並不是所有的屬性都可以繼承，只有以color/font-/text-/line-開頭的屬性才可以繼承 2、在CSS的繼承中不僅僅是兒子可以繼承，只要是后代都可以繼承 3、繼承性中的特殊性： 3.1>a標簽的文字顏色和下划線是不能繼承的 3.2>h標簽的文字大小是不能繼承的 應用場景： 一般用於設置網頁上的一些共性的信息，例如網頁的文字顏色，字體，文字大小等內容
層疊性
- 什么是層疊性？
- 作用：層疊性就是CSS處理沖突的一種能力
- 示例代碼：
<style> p{ color: red; } .para{ color: blue; } </style> <p id="identity" class="para">我是段落</p> <!-- 最終顯示藍色, 因為紅色被覆蓋掉了 -->
- 注意點：
層疊性只有在多個選擇器選中“同一個標簽”，然后又設置了“相同的屬性”，才會發生重疊性
優先級
- 什么是優先級？
- 作用：當多個選擇器選中同一個標簽，並且給同一個標簽設置相同的屬性時，如何層疊就由優先級來確定
- 優先級的判斷的三種方式：
三種判斷方式
1、間接選中就是指繼承 如果是間接選中，那么就是誰離目標標簽比較近就聽誰的 <style> li{ color: blue; } ul{ color: red; } </style> <ul> <li> <p id="identity" class="para">我是段落</p> </li> </ul> <!-- 最終顯示藍色 --> 2、相同選擇器（直接選中） 如果都是直接選中，並且都是同類型的選擇器，那么就是誰寫在后面就聽誰的 <style> p{ color: blue; } p{ color: red; } </style> <ul> <li> <p id="identity" class="para">我是段落</p> </li> </ul> <!-- 最終顯示紅色 --> 3、不同選擇器（直接選中） 如果都是直接選中，並且不是相同類型的選擇器，那么就會按照選擇器的優先級來層疊 id>類>標簽>通配符>繼承>瀏覽器默認 <style> #identity{ color: purple; } .para{ color: pink; } p{ color: green; } *{ color: blue; } li{ color: red; } </style> <ul> <li> <p id="identity" class="para">我是段落</p> </li> </ul> <!-- 最終顯示紫色 -->
!important
- 什么是！important？
- 作用：用於提升某個直接選中標簽的選擇器中的某個屬性的優先級，可以將被指定的屬性的優先級提升為最高
- 示例代碼：
<style> #identity{ color: purple; font-size: 50px; } .para{ color: pink ; } p{ color: green !important; } </style> <ul> <li> <p id="identity" class="para">我是段落</p> </li> </ul> <!-- 最終顯示綠色 -->
- 注意點：
1、！important只能用於直接選中，不能用於間接選中 2、通配符選擇器選中的標簽也是直接選中的 3、！important只能提升被指定的屬性的優先級，其它的屬性的優先級不會被提升 4、！important必須寫在屬性值的分號前面 5、！important前面的感嘆號不能省略
CSS屬性相關
寬和高
width屬性可以為元素設置寬度。
height屬性可以為元素設置高度。
塊級標簽才能設置寬高，內聯標簽的寬度由內容來決定。
文字屬性
font-style
- 作用：規定文字樣式
- 格式：
font-style: italic; - 取值：
normal： 正常的， 默認值 italic： 傾斜 - 快捷鍵：
fs font-style: italic; fsn font-style: normal;
font-weight
- 作用：規定文字粗細
- 格式：
font-weight: bold; - 取值：
bold 加粗 bolder 比加粗還要粗 lighter 細線， 默認值 100~900 設置具體粗細，400等同於normal，而700等同於bold inherit 繼承父元素字體的粗細值 - 快捷鍵：
fw font-weight:; fwb font-weight: bold; fwbr font-weight: bolder;
font-size
- 作用：規定文字大小
- 格式：
font-size: 30px; - 取值：
px（像素 pixel） 注意：通過font-size設置大小一定要帶單位，也就是一定要寫px - 快捷鍵：
fz font-size:; fz30 font-size: 30px;
font-family
- 作用：規定文字字體
- 格式：
格式：font-family:"楷體"; - 取值：各種字體名稱
- 快捷鍵：
ff font-family:; - 注意點：
1、如果取值是中文，需要用雙引號或者單引號括起來 2、設置的字體必須是用戶電腦里面已經安裝的字體
文字屬性的補充
1、如果設置的字體不存在，那么系統會使用默認的字體來顯示（默認使用宋體）
2、如果設置的字體不存在，而我們又不想用默認的字體來顯示怎么辦？
可以給字體設置備選方案
格式：font-family："字體1","備選方案1"...;
3、如果想給中文和英文分別單獨設置字體，怎么辦？
但凡是中文字體，里面都包含了英文
但凡是英文字體，里面都沒有包含中文
也就是說中文字體可以處理英文，而英文字體不能處理中文
**注意點：如果想給界面中的英文單獨設置字體，那么英文的字體必須寫在中文的前面
4、在企業開發中最常見的字體有以下幾個
中文: 宋體/黑體/微軟雅黑
英文: "Times New Roman"/Arial
還需要知道一點, 就是並不是名稱是英文就一定是英文字體
因為中文字體其實都有自己的英文名稱, 所以是不是中文字體主要看能不能處理中文
宋體 SimSun
黑體 SimHei
微軟雅黑 Microsoft YaHei
文字屬性縮寫
- 縮寫格式：
font: style weight size family; - 例如：
font:italic bold 10px "楷體"; - 注意點：
1、在這種縮寫格式中有的屬性值可以忽略 sytle可以省略 weight可以省略 2、在這種縮寫格式中style和weight的位置可以變換 3、在這種縮寫格式中有的屬性值是不可以縮寫的 size不能省略 family不能省略 4、size和family的位置是不能隨便亂放的 size一定要寫在family的前面，而且size和family必須寫在所有屬性的最后
文本屬性
text-align
- 作用：設置元素中的文字的水平對齊方式
- 格式：
text-align: right; - 取值：
left 左邊對齊 默認值 right 右對齊 center 居中對齊 justify 兩端對齊 - 快捷鍵：
ta text-align: left; tar text-align: right; tac text-align: center;
text-decoration
- 作用：給文本添加裝飾效果
- 格式：
text-decoration: underline; - 取值：
underline 下划線 line-through 刪除線 overline 上划線 none 什么都沒有, 最常見的用途就是用於去掉超鏈接的下划線 - 快捷鍵：
td text-decoration: none; tdu text-decoration: underline; tdl text-decoration: line-through; tdo text-decoration: overline;
text-indent
- 作用：設置文本的縮進
- 格式：
text-indent: 2em; - 取值：2em, 其中em是單位, 一個em代表縮進一個文字的寬度
- 快捷鍵：
ti text-indent:; ti2e text-indent: 2em;
顏色屬性
在css中如何通過color屬性來修改文字顏色
- 格式：
color： 值； - 取值：
1. 英文單詞 2. rgb(255,0,0) 3. rgba(255,0,0,3) 4. #FF0000 -
color取值詳細說明
1.1英文單詞 一般情況下常見的顏色都有對應的英文單詞, 但是英文單詞能夠表達的顏色是有限制的, 也就是說不是所有的顏色都能夠通過英文單詞來表達 1.2rgb rgb其實就是三原色, 其中r(red 紅色) g(green 綠色) b(blue 藍色) 格式: rgb(0,0,0) 那么這個格式中的 第一個數字就是用來設置三原色的光源元件紅色顯示的亮度 第二個數字就是用來設置三原色的光源元件綠色顯示的亮度 第三個數字就是用來設置三原色的光源元件藍色顯示的亮度 這其中的每一個數字它的取值是0-255之前, 0代表不發光, 255代表發光, 值越大就越亮 紅色: rgb(255,0,0); 綠色: rgb(0,255,0); 藍色: rgb(0,0,255); 黑色: rgb(0,0,0); 白色: rgb(255,255,255) 只要讓紅色/綠色/藍色的值都一樣就是灰色 而且如果這三個值越小那么就越偏黑色, 越大就越偏白色 例如: color: rgb(200,200,200); 1.3rgba rgba中的rgb和前面講解的一樣, 只不過多了一個a 那么這個a呢代表透明度, 取值是0-1, 取值越小就越透明 例如: color: rgba(255,0,0,0.2); 1.4十六進制 在前端開發中通過十六進制來表示顏色, 其實本質就是RGB 十六進制中是通過每兩位表示一個顏色 例如: #FFEE00 FF表示R EE表示G 00表示B 什么是十六進制? 十六進制和十進制一樣都是一種計數的方式 在十進制中取值范圍0-9, 逢十進一 在十六進制中取值范圍0-F, 逢十六進一 十進制 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 十六進制 0 1 2 3 4 5 6 7 8 9 a b c d e f 十六進制和十進制轉換的公式 用十六進制的第一位*16 + 十六進制的第二位 = 十進制 15 == 1*16 + 5 = 21 12 == 1*16 + 2 = 18 FF == F*16 + F == 15*16 + 15 == 240 + 15 = 255 00 == 0*16 + 0 = 0 1.5十六進制縮寫 在CSS中只要十六進制的顏色每兩位的值都是一樣的, 那么就可以簡寫為一位 例如: #FFEE00 == #FE0
overflow溢出屬性
- 作用：清除溢出盒子邊框外的內容
- 格式：overflow:hidden;
overflow （水平和垂直均設置） overflow-x（設置水平方向） overflow-y（設置垂直方向） - 取值：
visible 默認值。內容不會被修剪，會呈現在元素框之外。 hidden 內容會被修剪，並且其余內容是不可見的。 scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。 inherit 規定應該從父元素繼承 overflow 屬性的值。
- 示例代碼：
View Code
- 添加overflow:hidden前：
- 添加overflow:hidden后：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>圓形的頭像示例</title> <style> * { margin: 0; padding: 0; background-color: #eeeeee; } .header-img { width: 150px; height: 150px; border: 3px solid white; border-radius: 50%; overflow: hidden; } .header-img>img { max-width: 100%; } </style> </head> <body> <div class="header-img"> <img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt=""> </div> </body> </html>
CSS元素的顯示模式
在HTML中HTML將所有的標簽分為兩類，分別是容器級和文本級
在CSS中CSS也將所有的標簽分為兩類，分別是塊級元素和行內元素
什么是塊級元素，什么是行內元素？
塊級元素會獨占一行
行內元素不會獨占一行
常見的容器級的標簽：
div h ul ol dl li dt dd ...
常見的文本級的標簽：
span p buis stong em ins del ...
常見的塊級元素：
p div h ul ol dl li dt dd
常見的行內元素：
span buis strong em ins del
塊級元素和行內元素的區別？
塊級元素：
- 獨占一行
- 如果沒有設置寬高，那么默認和父元素一樣寬
- 如果設置了寬高，那么就按照設置的來顯示
行內元素：
- 不會獨占一行
- 如果沒有設置寬高，那么默認和內容一樣寬
- 行內元素是不可以設置寬度和高度的
行內塊級元素：
為了能夠讓元素既能夠不獨占一行，又可以設置寬度和高度，那么就出現了行內塊級元素
不獨占一行，並且可以設置寬高
CSS元素顯示模式轉換（display屬性）
如何轉換css元素的顯示模式？
設置元素的display屬性
- 格式：
display： 值; - display取值：
block 塊級 inline 行內 inline-block 行內塊級 - 快捷鍵：
di display: inline; db display: block; dib display: inline-block;
背景和精靈圖
背景相關屬性
background-color
- 作用：設置標簽的背景顏色
-
<style> div{ width: 100px; height: 50px; } .box1{ background-color: red; } .box2{ background-color: rgb(0,255,0); } .box3{ background-color: rgba(0,0,255,0.7); } .box4{ background-color: #0ff; } </style>
- 取值：
具體單詞 rgb rgba 十六進制 - 快捷鍵：
bc background-color: #fff;
background-image
- 作用：設置背景圖片
- 格式：
<style> div{ width: 500px; height: 500px; } .box1{ background-image: url(images/girl.jpg); /*background-image: url(http://img4.imgtn.bdimg.com/it/u=2278032206,4196312526&fm=21&gp=0.jpg);*/ } </style> <div class="box1"></div>
- 快捷鍵：
bi background-image: url(); - 注意點：
1、圖片的地址必須放在url()中，圖片的地址可以是本地的地址，也可以是網絡的地址 2、如果圖片的大小沒有標簽的大小大，那么會自動在水平和垂直方向平鋪來填充 3、如果網頁上出現了圖片，那么瀏覽器會再次發送請求獲取圖片
background-repeat
- 作用：控制背景圖片的平鋪方式
- 格式：
<style> div{ width: 500px; height: 500px; } .box1{ background-color: red; background-image: url(images/girl.jpg); background-repeat: repeat-y; } </style> <div class="box1"></div>
-
取值：
repeat 默認值，在水平方向和垂直方向都需要平鋪 no-repeat 在水平方向和垂直方向都不需要平鋪 repeat-x 只在水平方向平鋪 repeat-y 只在垂直方向平鋪 - 快捷鍵：
bgr background-repeat:可以通過背景圖片的平鋪來降低圖片的大小，提升網頁的訪問速度
- 注意點：背景顏色和背景圖片可以共存，圖片會覆蓋顏色
background-position
- 作用：專門用於控制背景圖片的位置
- 格式：
background-position: 水平方向 垂直方向; - 取值：
1. 具體的方位名詞 水平方向：left center right 垂直方向：top center bottom 2. 具體的像素 例如: background-position: 100px 200px; 記住一定要寫單位, 也就是一定要寫px 記住具體的像素是可以接收負數的 - 快捷鍵：
bp background-position: 0 0; - 注意點：同一個標簽可以同時設置背景顏色和背景圖片, 如果顏色和圖片同時存在, 那么圖片會覆蓋顏色
-
方位取值示例
<style> div{ /*width: 500px;*/ height: 500px; } .box1{ background-color: red; background-image: url(images/girl.jpg); background-repeat: no-repeat; /*background-position: left top;*/ /*background-position: right top;*/ /*background-position: right bottom;*/ /*background-position: left bottom;*/ /*background-position: center center;*/ /*background-position: left center;*/ background-position: center top; } </style> <div class="box1"></div>
-
像素取值示例
<style> div{ /*width: 500px;*/ height: 500px; } .box1{ background-color: red; background-image: url(images/girl.jpg); background-repeat: no-repeat; /*background-position: 100px 0;*/ /*background-position: 100px 200px;*/ background-position: -100px -100px; } </style>
背景屬性連寫
和font屬性一樣，background屬性也可以連寫
- 格式：
background: 背景顏色 背景圖片 平鋪方式 關聯方式 定位方式; - 快捷鍵：
bg+ background: #fff url() 0 0 no-repeat; - 注意點：background屬性中，任何一個屬性都可以被省略
- 什么是背景關聯方式？
默認情況下背景圖片會隨着滾動條的滾動而滾動，如果不想讓背景圖片隨着滾動條的滾動而滾動，那么我們就可以修改背景圖片和滾動條的關聯方式 - 如何修改背景關聯方式？
在CSS中有一個叫做background-attachment的屬性， 這個屬性就是專門用於修改關聯方式的 - 格式：background-attachment：scroll;
- 取值：scroll 默認值， 會隨着滾動條的滾動而滾動；fixed 不會隨着滾動條的滾動而滾動
- 快捷鍵：ba background-attachment:;
-
鼠標滾動背景不動示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>滾動背景圖示例</title> <style> * { margin: 0; } .box { width: 100%; height: 500px; background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center; background-attachment: fixed; } .d1 { height: 500px; background-color: tomato; } .d2 { height: 500px; background-color: steelblue; } .d3 { height: 500px; background-color: mediumorchid; } </style> </head> <body> <div class="d1"></div> <div class="box"></div> <div class="d2"></div> <div class="d3"></div> </body> </html>
插入圖片和背景圖片的區別
- 1.1
背景圖片僅僅是一個裝飾, 不會占用位置 插入圖片會占用位置 - 1.2
背景圖片有定位屬性, 所以可以很方便的控制圖片的位置 插入圖片沒有定位屬性, 所有控制圖片的位置不太方便 - 1.3
插入圖片的語義比背景圖片的語義要強, 所以在企業開發中如果你的圖片想被搜索引擎收錄, 那么推薦使用插入圖片
精靈圖
1.什么是css精靈圖？
CSS精靈圖是一種圖像合成技術
2.CSS精靈圖作用
可以減少請求的次數, 以及可以降低服務器處理壓力
3.如何使用CSS精靈圖
CSS的精靈圖需要配合背景圖片和背景定位來使用
- 示例
<style> .box{ width: 86px; height: 28px; background-image: url(images/weibo.png); background-position: -425px -200px; } </style> <div class="box"></div>
- 完整圖片
- 顯示的圖片
CSS盒模型
什么是CSS盒模型？
CSS盒模型僅僅是一個形象的比喻，HTML中的標簽都是盒模型
CSS盒模型指那些可以設置寬度高度/內邊距/邊框/外邊框的標簽
1、內容的寬度和高度
就是通過width/height屬性設置的寬度和高度
2、元素的寬度和高度
寬度 = 左邊距 + 左內邊距 + width + 右內邊距 + 右邊距
高度 同理可證
3、元素空間的寬度和高度
寬度 = 左外邊距 + 左邊框 + 左內邊距 + width + 右內邊距 + 右邊框 + 右外邊距
高度 同理可證
- margin：（外邊距）用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目錄。
- padding：（內邊距）用於控制內容與邊框之間的距離
- border（邊框）：圍繞在內邊框和內容外的邊框
- content：盒子的內容，顯示文本和圖像
邊框屬性（border）
- 什么是邊框？
邊框就是環繞在標簽寬度和高度周圍的線條
- 格式：
1、連寫（同事設置四條邊的邊框） border: 邊框的寬度 邊框的樣式 邊框的顏色; -
2、連寫（分別設置四條邊的邊框） border-top: 邊框的寬度 邊框的樣式 邊框的顏色; border-right: 邊框的寬度 邊框的樣式 邊框的顏色; border-bottom: 邊框的寬度 邊框的樣式 邊框的顏色; border-left: 邊框的寬度 邊框的樣式 邊框的顏色; - 快捷鍵：
bd+ border: 1px solid #000;bt+ border-top: 1px solid #000; br+ border-right: 1px solid #000; bb+ border-bottom: 1px solid #000; bl+ border-left: 1px solid #000; - 注意點：
1、連寫格式中顏色屬性可以省略，省略之后默認就是黑色 2、連寫格式中樣式不能省略，省略之后就看不到邊框了 3、連寫格式中寬度可以省略，省略之后還是可以看到邊框 - 邊框樣式：
none 無邊框。 dotted 點狀虛線邊框。 dashed 矩形虛線邊框。 solid 實線邊框。 - border-radius
用這個屬性能實現圓角邊框的效果。 將border-radius設置為長或高的一半即可得到一個圓形。
外邊距（margin）
什么是外邊距？
標簽和標簽之間的距離就是外邊距
- 格式：
1、非連寫 margin-top: ; margin-right: ; margin-bottom: ; margin-left: ; 示例代碼 <style> .box1{ margin-top:20px; margin-right:40px; margin-bottom:80px; margin-left:160px; } </style>
2、連寫 margin: 上 右 下 左; 示例代碼 <style> .box1{ margin:20px 40px 80px 160px; /*margin:20px 40px 80px;*/ /*margin:20px 40px;*/ /*margin:20px;*/ } </style>
- 注意點：
1、外邊距的那一部分是沒有背景顏色的 2、這三個屬性的取值省略時的規律： 上 右 下 左 > 上 右 下 > 左邊的取值和右邊的一樣 上 右 下 左 > 上 右 > 左邊的取值和右邊的一樣 下邊的取值和上邊一樣 上 右 下 左 > 上 > 右下左邊取值和上邊一樣
外邊距合並現象
默認布局的垂直方向的外邊距是不會疊加的，會出現合並現象，誰的外邊距比較大就聽誰的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外邊距合並現象</title> <style> span{ display: inline-block; width: 100px; height: 100px; border: 1px solid #000; } div{ height: 100px; border: 1px solid #000; } .hezi1{ margin-right:50px; } .hezi2{ margin-left:100px; } .box1{ margin-bottom:50px; } .box2{ margin-top:100px; } </style> </head> <body> <span class="hezi1">我是span</span><span class="hezi2">我是span</span> <div class="box1">我是div</div> <div class="box2">我是div</div> </body> </html>
margin-top問題
1、如果兩個盒子是嵌套關系，那么設置了里面一個盒子頂部的外邊距，外面一個盒子也會被頂下來
2、如果外面的盒子不想被一起頂下來，那么可以給外面的盒子添加一個邊框屬性
在企業開發中，一般情況下如果需要控制嵌套關系盒子之間的距離，應該首先考慮padding，其次再考慮margin（margin本質上是用於控制兄弟關系之間的間隙的）
text-align:center;和margin:0 auto;區別
text-align:center; 是設置盒子中存儲的文字/圖片水平居中
margin:0 auto; 是讓盒子自己水平居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>53-盒子居中和內容居中</title> <style> .father{ width: 800px; height: 500px; background-color: red; /*文字圖片會居中*/ /*text-align: center;*/ /*盒子自身會居中*/ margin:0 auto; } .son{ width: 100px; height: 100px; background-color: blue; } </style> </head> <body> <div class="father"> 我是文字<br/>  <div class="son"></div> </div> </body> </html>
內邊距（padding）
- 什么是內邊距？
邊框和內容之間的距離就是內邊距
- 格式：
1、非連寫 padding-top: ; padding-right: ; padding-bottom: ; padding-left: ; 示例代碼 <style> div{ width: 98px; height: 90px; border: 1px solid #000; background-color: red; } .box1{ padding-top: 20px; padding-right:40px; padding-bottom:80px; padding-left:160px; } </style>
2、連寫 padding: 上 右 下 左; 示例代碼 <style> div{ width: 98px; height: 90px; border: 1px solid #000; background-color: red; } .box1{ /*padding:20px 40px 80px 160px;*/ /*padding:20px 40px 80px;*/ /*padding:20px 40px;*/ padding:20px; } </style>
- 注意點：
1、這三個屬性的取值省略時的規律 上 右 下 左 > 上 右 下 > 左邊的取值和右邊的一樣 上 右 下 左 > 上 右 > 左邊的取值和右邊的一樣 下邊的取值和上邊一樣 上 右 下 左 > 上 > 右下左邊取值和上邊一樣 2、給標簽設置內邊距之后，標簽占有的寬度和高度會發生變化 3、給標簽設置內邊距之后，內邊距也會有背景顏色
浮動（float）
float取值
- left：向左浮動
- right：向右浮動
- none： 默認值，不浮動
網頁的布局方式
什么是網頁的布局方式？
網頁的布局方式其實就是指瀏覽器是如何對網頁中的元素進行排版的
標准流
標准流（文檔流/普通流）排放方式
- 其實瀏覽器默認的排版方式就是標准流的排版方式
- 在CSS中將元素分為三類，分別是塊級元素/行內元素/行內塊級元素
- 在標准流中有兩種排版方式，一種是垂直排版，一種是水平排版
垂直排版：如果元素是塊級元素，那么就會垂直排版 水平排版：如果元素是行內元素/行內塊級元素，那么就會水平排版
浮動流
- 浮動流是一種“半脫離標准流”的排版方式
- 浮動流只有一種排版方式，就是水平排版，它只能設置某個元素左對齊或者右對齊
- 注意點：
浮動流中沒有居中對齊，也就是沒有center這個取值 在浮動流中是不可以使用margin: 0 auto; - 特點：
1、在浮動流中是不區分塊級元素/行內元素/行內塊級元素的 無論是塊級元素/行內元素/行內塊級元素都可以水平排版 2、在浮動流中無論是塊級元素/行內元素/行內塊級元素都可以設置寬高 3、綜上所述，浮動流中的元素和標准流中的行內塊級元素很想
浮動元素的脫標
- 什么是浮動元素的脫標？
脫標：脫離標准流 當某一個元素浮動之后，那么這個元素看上去就像被從標准流中刪除了一樣，這個就是浮動元素的脫標 - 浮動元素脫標之后會有什么影響？
如果前面一個元素浮動了，而后面一個元素沒有浮動，那么這個時候前面一個元素就會蓋住后面一個元素
浮動元素排序規則
- 相同方向上的浮動元素，先浮動的元素會顯示在前面，后浮動的元素會顯示在后面
<style> .box1{ float: left; width: 50px; height: 50px; background-color: red; } .box2{ float: left; width: 100px; height: 100px; background-color: pink; } .box3{ float: left; width: 150px; height: 150px; background-color: yellow; } </style>
- 不同方向上的浮動元素，左浮動會找左浮動，右浮動會找右浮動
<style> .box1{ float: left; width: 50px; height: 50px; background-color: red; } .box2{ float: right; width: 100px; height: 100px; background-color: pink; } .box3{ float: left; width: 150px; height: 150px; background-color: yellow; } .box4{ float: right; width: 200px; height: 200px; background-color: tomato; } </style>
- 浮動元素浮動之后的位置，由浮動元素浮動之前在標准流中的位置來確定
<style> .box1{ float: left; width: 50px; height: 50px; background-color: red; } .box2{ width: 100px; height: 100px; background-color: pink; } .box3{ float: left; width: 150px; height: 150px; background-color: yellow; } .box4{ float: left; width: 200px; height: 200px; background-color: tomato; } </style>
浮動元素貼靠現象
- 如果父元素的寬度能夠顯示所有的浮動元，那么浮動的元素會並排顯示
- 如果父元素的寬度不能顯示所有浮動元素，那么會從最后一個元素開始往前貼靠
- 如果貼靠了前面所有浮動元素之后都不能顯示，最終會貼靠到父元素的左邊或者右邊
浮動元素字圍現象
浮動元素不會擋住沒有浮動元素中的文字，沒有浮動的文字會自動給浮動的元素讓位置，這個就是浮動元素字圍現象
div{ float: left; width: 100px; height: 100px; /*background-color: red;*/ border: 1px solid #000; } p{ width: 500px; height: 500px; background-color: yellow; }
清除浮動
清除浮動方式一
給前面的父盒子添加高度
- 示例代碼：
View Code
<style> *{ margin: 0; padding: 0; } .box1{ background-color: red; /*這里*/ height: 50px; } .box2{ background-color: purple; } ul{ list-style: none; } .ul01 li{ background-color: blue; } .ul02 li{ background-color: green; } ul li{ float: left; } </style> <div class="box1"> <ul class="ul01"> <li>大娃</li> <li>二娃</li> <li>三娃</li> </ul> </div> <div class="box2"> <ul class="ul02"> <li>李南江</li> <li>極客江南</li> <li>江哥</li> </ul> </div>
- 添加高度前：
- 添加高度后：
- 注意點：在企業開發中能不寫高度就不寫高度，所以這種方式不常用
清除浮動方式二
利用clear:both; 屬性清除前面浮動元素對我的影響
- clear取值：
left 在左側不允許浮動元素。 right 在右側不允許浮動元素。 both 在左右兩側均不允許浮動元素。 none 默認值。允許浮動元素出現在兩側。 inherit 規定應該從父元素繼承 clear 屬性的值。 - 示例代碼：
View Code
<style> *{ margin: 0; padding: 0; } .box1{ background-color: red; } .box2{ background-color: purple; /*這里*/ clear: both; /*margin無效*/ margin-top: 30px; } ul{ list-style: none; } .ul01 li{ background-color: blue; } .ul02 li{ background-color: green; } ul li{ float: left; } </style> <div class="box1"> <ul class="ul01"> <li>大娃</li> <li>二娃</li> <li>三娃</li> </ul> </div> <div class="box2"> <ul class="ul02"> <li>李南江</li> <li>極客江南</li> <li>江哥</li> </ul> </div>
- 添加clear:both;前：
- 添加clear:both;后：
- 注意點：使用clear:both之后margin屬性會失效，所以不常用
清除浮動方式三
在兩個有浮動子元素的盒子之間添加一個額外的塊級元素
- 示例代碼：
View Code
<style> *{ margin: 0; padding: 0; } .box1{ background-color: red; } .box2{ background-color: purple; } ul{ list-style: none; } .ul01 li{ background-color: blue; } .ul02 li{ background-color: green; } ul li{ float: left; } /*這里*/ .wall{ clear: both; } .h20{ /*利用額外塊級元素實現margin*/ height: 20px; background-color: deepskyblue; } </style> <div class="box1"> <ul class="ul01"> <li>大娃</li> <li>二娃</li> <li>三娃</li> </ul> </div> <!--這里--> <div class="wall h20"></div> <div class="box2"> <ul class="ul02"> <li>李南江</li> <li>極客江南</li> <li>江哥</li> </ul> </div>
- 添加額外塊級元素前：
- 添加額外塊級元素后：
- 注意點：
1、在外牆法中可以通過設置額外標簽的高度來實現margin效果 2、搜狐中大量使用了這個技術，但是由於需要添加大量無意義的標簽，所以不常用
清除浮動方式四
在前面一個盒子的最后添加一個額外的塊級元素
- 示例代碼：
View Code
<style> *{ margin: 0; padding: 0; } .box1{ background-color: red; } .box2{ background-color: purple; /*margin有效*/ margin-top: 20px; } ul{ list-style: none; } .ul01 li{ background-color: blue; } .ul02 li{ background-color: green; } ul li{ float: left; } /*這里*/ .wall{ clear: both; } </style> <div class="box1"> <ul class="ul01"> <li>大娃</li> <li>二娃</li> <li>三娃</li> </ul> <!--這里--> <div class="wall"></div> </div> <div class="box2"> <ul class="ul02"> <li>李南江</li> <li>極客江南</li> <li>江哥</li> </ul> </div>
-
添加額外塊級元素前：
- 添加額外塊級元素后：
- 注意點：
1、內牆法會自動撐起盒子的高度，所以可以直接設置margin屬性 2、和內牆法一樣需要添加很多無意義的空標簽
清除浮動方式五（overflow）
- 如何利用overflow:hidden;清除浮動？
給前面一個盒子添加overflow:hidden屬性 - 示例代碼：
View Code
<style> *{ margin: 0; padding: 0; } .box1{ background-color: red; /*這里*/ overflow: hidden; *zoom:1; } .box2{ background-color: purple; /*margin有效*/ margin-top: 20px; } ul{ list-style: none; } .ul01 li{ background-color: blue; } .ul02 li{ background-color: green; } ul li{ float: left; } </style> <div class="box1"> <ul class="ul01"> <li>大娃</li> <li>二娃</li> <li>三娃</li> </ul> </div> <div class="box2"> <ul class="ul02"> <li>李南江</li> <li>極客江南</li> <li>江哥</li> </ul> </div>
- 添加overflow:hidden;前：
- 添加overflow:hidden;后：
- 注意點：
1、由於overflow:hidden可以撐起盒子的高度, 所以可以直接設置margin屬性 2、E8以前不支持利用overflow:hidden來清除浮動, 所以需要加上一個*zoom:1; 3、優點可以不用添加額外的標簽又可以撐起父元素的高度, 缺點和定位結合在一起使用時會有沖突
清除浮動方式六（偽元素）
給前面的盒子添加偽元素來清除浮動
- 示例代碼：
View Code
<style> *{ margin: 0; padding: 0; } .box1{ background-color: red; } .box2{ background-color: purple; /*margin有效*/ margin-top: 20px; } ul{ list-style: none; } .ul01 li{ background-color: blue; } .ul02 li{ background-color: green; } li{ float: left; } /*這里*/ .clearfix:after { /*生成內容作為最后一個元素*/ content: ""; /*使生成的元素以塊級元素顯示,占滿剩余空間*/ display: block; /*避免生成內容破壞原有布局的高度*/ height: 0; /*使生成的內容不可見，並允許可能被生成內容蓋住的內容可以進行點擊和交互*/ visibility: hidden; /*重點是這一句*/ clear: both; } .clearfix { /*用於兼容IE, 觸發IE hasLayout*/ *zoom:1; } </style> <div class="box1 clearfix"> <ul class="ul01"> <li>大娃</li> <li>二娃</li> <li>三娃</li> </ul> </div> <div class="box2"> <ul class="ul02"> <li>李南江</li> <li>極客江南</li> <li>江哥</li> </ul> </div>
- 添加偽元素前：
- 添加偽元素后：
- 注意點：
1、本質上和內牆法一樣, 都是在前面一個盒子的最后添加一個額外的塊級元素 2、添加偽元素后可以撐起盒子的高度, 所以可以直接設置margin屬性 3、CSS中還有一個東西叫做偽類, 偽元素和偽類不是同一個東西
清除浮動方式七
給前面的盒子添加雙偽元素來清除浮動
- 示例代碼：
View Code
<style> *{ margin: 0; padding: 0; } .box1{ background-color: red; } .box2{ background-color: purple; /*margin有效*/ margin-top: 20px; } ul{ list-style: none; } .ul01 li{ background-color: blue; } .ul02 li{ background-color: green; } li{ float: left; } /*這里*/ .cf:before,.cf:after { content:""; display:table; /*重點是這一句*/ clear:both; } .cf { zoom:1; } </style> <div class="box1 clearfix"> <ul class="ul01"> <li>大娃</li> <li>二娃</li> <li>三娃</li> </ul> </div> <div class="box2"> <ul class="ul02"> <li>李南江</li> <li>極客江南</li> <li>江哥</li> </ul> </div>
- 添加雙偽元素前：
- 添加雙偽元素后：
定位（position）
定位分為了四類：
- relative(相對定位）
- absolute（絕對定位）
- static（靜態定位）
- fixed（固定定位）
相對定位
相對定位就是相對於自己以前在標准流中的位置來移動
- 格式：
position: relative; - 示例：
View Code
<style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; } .box1{ background-color: red; } .box2{ background-color: green; position: relative; top: 20px; left: 20px; } .box3{ background-color: blue; } <style> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div>
- 注意點：
1、相對定位是不脫離標注流的，會繼續在標准流中占用一份空間 2、在相對定位中同一個方向上的定位屬性只能使用一個 top/bottom只能用一個 left/right只能用一個 3、由於相對定位是不脫離標准流的, 所以在相對定位中是區分塊級元素/行內元素/行內塊級元素 4、由於相對定位是不脫離標准流的, 並且相對定位的元素會占用標准流中的位置, 所以當給相對定位的元素設置margin/padding等屬性的時會影響到標准流的布局
絕對定位
絕對定位就是相對於body或者某個定位流中的祖先元素來定位
- 格式：
position: absolute; - 示例：
View Code
<style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; } .box1{ background-color: red; } .box2{ background-color: green; position: absolute; left: 0; top: 0; } .box3{ background-color: blue; } </style> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div>
-
注意點：
1、絕對定位的元素是脫離標准流的, 不會占用標准流中的位置 2、由於絕對定位的元素是脫離標准流的, 所以絕對定位的元素不區分塊級元素/行內元素/行內塊級元素 3、如果一個絕對定位的元素是以body作為參考點, 那么其實是以網頁首屏的寬度和高度作為參考點, 而不是以整個網頁的寬度和高度作為參考點 相對於body定位會隨着頁面的滾動而滾動 4、一個絕對定位的元素會忽略祖先元素的padding
絕對定位參考點
1、默認情況下所有的絕對定位的元素，無論有沒有祖先元素，都會以body作為參考點
2、如果一個絕對定位的元素有祖先元素，並且祖先元素中有一個是定位流的元素，那么這個絕對定位的元素就會以定位流的那個祖先元素作為參考點
3、如果一個絕對定位的元素有祖先元素，並且祖先元素中有多個是定位流的元素，那么這個絕對定位的元素會以離它最近的那個定位流的祖先元素作為參考點
絕對定位水平居中
注意當一個盒子絕對定位之后不能使用margin:0 auto; 讓盒子自身居中
如果想讓一個絕對定位的盒子自身居中，可以使用left:50%; margin-left:元素寬度一般的px；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>74-絕對定位水平居中</title> <style> *{ margin: 0; padding: 0; } div{ width: 400px; height: 50px; background-color: red; position: absolute; /*無效*/ /*margin: 0 auto;*/ /*有效*/ left: 50%; margin-left:-200px; } </style> </head> <body> <div></div> </body> </html>
子絕父相
為什么要使用子絕父相？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>71-子絕父相</title> <style> *{ margin: 0; padding: 0; } ul{ width: 800px; height: 50px; background-color: red; list-style: none; margin: 0px auto; margin-top: 100px; } li{ width: 100px; /*height: 50px;*/ line-height: 50px; float: left; background-color: gray; text-align: center; } .li03{ background-color: darkgray; position: relative; } ul li img{ /* 缺點以前的位置仍然被占用, 不能讓文字居中對齊 */ /*position: relative; left: -35px; top: -15px;*/ /* 瀏覽器調整之后位置會發生變化*/ /* position: absolute; top: 95px; left: 535px;*/ position: absolute; left: 37px; top: -5px; } </style> </head> <body> <ul> <li>服裝城</li> <li>美妝館</li> <li>京東超市</li> <li class="li03">全球購</li> <li>閃購</li> <li>團購</li> <li>拍賣</li> <li>江哥</li> </ul> </body> </html>
- 相對定位和絕對定位一般都是用來做覆蓋效果的，當看到某個元素覆蓋在另外一個元素上時，第一時間就要想到定位流
固定定位
固定定位和前面的背景關聯方式很像，背景關聯方式可以讓某個圖片不隨着滾動條的滾動而滾動，而固定定位可以讓某個盒子不隨着滾動條的滾動而滾動
- 格式：
position: fixed; - 示例：
View Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>74-固定定位</title> <style> *{ margin: 0; padding: 0; } p{ width: 100px; } a{ width: 50px; height: 50px; background-color: rgba(0, 0, 0, 0.3); border-radius: 25px; text-decoration: none; text-align: center; color: #000; position: fixed; right: 10px; bottom: 10px; } </style> </head> <body> <p>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</p> <a href="#">^<br>頂部</a> </body> </html>
-
注意點：
1、固定定位的元素是脫離標准流的, 不會占用標准流中的位置 2、由於固定定位的元素是脫離標准流的, 所以絕對定位的元素不區分塊級元素/行內元素/行內塊級元素 3、IE6不支持固定定位
應用場景：
網頁對聯廣告；網頁頭部通欄（穿透效果）
z-index屬性
用於指定定位的元素的覆蓋關系
- 定位元素的覆蓋關系：
默認情況下定位的元素一定會蓋住沒有定位的元素 默認情況下寫在后面的定位元素會蓋住前面的定位元素 默認情況下所有元素的z-index值都是0, 如果設置了元素的z-index值, 那么誰比較大誰就顯示在前面
定位元素的從父現象： 父元素沒有z-index值, 那么子元素誰的z-index大誰蓋住誰 父元素z-index值不一樣, 那么父元素誰的z-index大誰蓋住誰