CSS知識

CSS（Cascading Style Sheet，層疊樣式表）定義如何顯示HTML元素。css

當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。Css之車更豐富的文檔外觀，Css能夠爲任何元素的文本和背景設置顏色；容許在任何元素外圍設置邊框；容許改變文字的大小，裝飾（以下劃線），間隔，甚至能夠肯定是否顯示文本。html

CSS語法

每一個CSS樣式右兩部分組成：選擇器和聲明。聲明又包括屬性和屬性值。前端

提示：聲明使用花括號包圍，多個屬性用分好分隔，屬性和值之間使用冒號分隔。git

CSS的幾種引入方式

行內樣式

行內樣式是在標記的style屬性中設定CSS樣式。不推薦大規模使用。若是代碼量多的話，閱讀效率下降。github

<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";}

注意點：

一、標籤選擇器選中的是當前界面中全部的標籤，而不能單獨選中某一個標籤 二、標籤選擇器不管標籤藏的多深都能選中 三、只要是HTML中的標籤就能夠做爲標籤選擇器（h/a/img/ul/ol/dl/input...）

id選擇器

什麼是id選擇器？
做用：根據指定的id名稱找到對應的標籤，而後設置屬性

格式：

#id名稱{ 屬性:值;
} #i1 { background-color: red;
}

注意點：

一、每一個HTML標籤都有一個屬性叫作id，也就是說每一個標籤均可以設置id 二、在同一個界面中id的名稱是不能夠重複的 三、在編寫id選擇器時必定要在id名稱前面加上# 四、id的名稱只能由字母/數字/下劃線組成 五、id名稱不能以數字開頭 六、id名稱不能是HTML標籤的名稱（不能是a h1 img input ...） 七、在企業開發中通常狀況下若是不只僅是爲了設置樣式，咱們不會使用id，由於在前端開發中id是留給js使用的

類選擇器

什麼是類選擇器？
做用：根據指定的類名找到對應的標籤，而後是設置屬性

格式：

格式: .類名{ 屬性:值;
} .c1 { font-size: 14px;
}

注意點：網絡

一、每一個HTML標籤都有一個屬性叫作class，也就是說每一個標籤均可以設置類名 二、在同一個界面中class的名稱是能夠重複的 三、在編寫class選擇器時必定要在class名稱前面加上. 四、類名的命名規範和id名稱的命名規範同樣 五、類名就是專門給CSS設置樣式的 六、在HTML中每一個標籤能夠同時綁定多個類名。多個類名用空格隔開 <標籤名稱 class="類名1 類名2 ...">

一、id和class的區別？ 1.一、id至關於人的身份證不能夠重複；class至關於人的名稱能夠重複 1.二、一個HTML標籤中只能綁定一個id名稱；一個HTML標籤中能夠綁定多個class名稱 二、id選擇器和class選擇器區別？ id選擇器是以#開頭 class選擇器是以.開頭 三、在企業開發中如何選擇？ id通常狀況下是給js使用的，除非特殊狀況，不然不要使用id去設置樣式

id選擇器和class選擇器區別

組合選擇器

後代選擇器

什麼是後代選擇器？
做用：找到指定標籤的全部特定的後代標籤，設置屬性

格式：

標籤名稱1 標籤名稱2{ 屬性:值;
} 先找到全部名稱叫作"標籤名稱1"的標籤, 而後再在這個標籤下面去查找全部名稱叫作"標籤名稱2"的標籤, 而後在設置屬性 div p{}

/*li內部的a標籤設置字體顏色*/ li a { color: green;
}

注意點： ide

一、後代選擇器必須用空格隔開 二、後代不只僅是兒子，也包括孫子/重孫子，只要最終是放到指定標籤中的都是後代 三、後代選擇器不只僅可使用標籤名稱，還可使用其它選擇器 四、後代選擇器能夠經過空格一直延續下去

子元素選擇器

什麼是子元素選擇器？
做用：找到指定標籤中全部特定的直接子元素，而後設置屬性

格式：

格式: 標籤名稱1>標籤名稱2{ 屬性:值;
} 先找到全部名稱叫作"標籤名稱1"的標籤, 而後在這個標籤中查找全部直接子元素名稱叫作"標籤名稱2"的元素 /*選擇全部父級是 <div> 元素的 <p> 元素*/ div>p { font-family: "Arial Black", arial-black, cursive;
}

注意點：

一、子元素選擇器只會查找兒子，不會查找其它被嵌套的標籤 二、子元素選擇器之間須要用>符號鏈接，而且不能有空格 三、子元素選擇器不只僅可使用標籤名稱，還可使用其它選擇器 四、子元素選擇器能夠經過>符號一直延續下去

一、後代選擇器和子元素選擇器之間的區別？ 1.一、後代選擇器使用空格做爲鏈接符號 1.二、子元素選擇器使用>做爲鏈接符號 後代選擇器會選中指定標籤中，全部特定的後代標籤，也就是會選中兒子/孫子...,只要是被放到指定標籤中的特定標籤都會被選中 子元素選擇器只會選中指定標籤中，全部的特定的直接標籤，也就是隻會選中特定的兒子標籤 二、後代選擇器和子元素選擇器之間的共同點 2.一、後代選擇器和子元素選擇器均可以使用標籤名稱/id名稱/class名稱來做爲選擇器 2.二、後代選擇器和子元素選擇器均可以經過各自的鏈接符號一直延續下去 選擇器1>選擇器2>選擇器3>選擇器3{} 三、在企業開發中如何選擇？ 若是想選中指定標籤中的全部特定的標籤，那麼就使用後代選擇器 若是隻想選中指定標籤中的全部特定兒子標籤，那麼久使用子元素選擇器

後代選擇器和子元素選擇器之間的區別

兄弟選擇器

相鄰兄弟選擇器

什麼是相鄰兄弟選擇器？
做用：給指定標籤後面緊跟的那個標籤設置屬性

格式：

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

/*選擇全部緊接着<div>元素以後的<p>元素*/ div+p { margin: 5px;
}

注意點：佈局

一、相鄰兄弟選擇器必須經過+鏈接 二、相鄰兄弟選擇器只能選中緊跟其後的那個標籤，不能選中被隔開的標籤

通用兄弟選擇器

什麼是通用兄弟選擇器？
做用：給指定選擇器後面的全部選擇器選中的全部標籤設置屬性

格式：

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

/*i1後面全部的兄弟p標籤*/ #i1~p { border: 2px solid royalblue;
}

注意點：

一、通用兄弟選擇器之間必須使用~鏈接 二、通用兄弟選擇器選中的是指定選擇器後面某個選擇器選中的全部標籤，不管有沒有被隔開均可以選中

屬性選擇器

什麼是屬性選擇器？
做用：根據指定的屬性名稱找到對應的標籤，而後設置屬性

格式：

格式: [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會變成紅色-->

注意點：

一、並非全部的屬性均可以繼承，只有以color/font-/text-/line-開頭的屬性才能夠繼承 二、在CSS的繼承中不只僅是兒子能夠繼承，只要是後代均可以繼承 三、繼承性中的特殊性： 3.1>a標籤的文字顏色和下劃線是不能繼承的 3.2>h標籤的文字大小是不能繼承的 應用場景： 通常用於設置網頁上的一些共性的信息，例如網頁的文字顏色，字體，文字大小等內容

層疊性

什麼是層疊性？
做用：層疊性就是CSS處理衝突的一種能力

示例代碼：

<style> p{ color: red;
        } .para{ color: blue;
        } </style> <p id="identity" class="para">我是段落</p> <!-- 最終顯示藍色, 由於紅色被覆蓋掉了 -->

注意點：

層疊性只有在多個選擇器選中「同一個標籤」，而後又設置了「相同的屬性」，纔會發生重疊性

優先級

什麼是優先級？
做用：當多個選擇器選中同一個標籤，而且給同一個標籤設置相同的屬性時，如何層疊就由優先級來肯定

優先級的判斷的三種方式：

一、間接選中就是指繼承 若是是間接選中，那麼就是誰離目標標籤比較近就聽誰的 <style> li{ color: blue;
      } ul{ color: red;
      } </style> <ul> <li> <p id="identity" class="para">我是段落</p> </li> </ul> <!-- 最終顯示藍色 --> 二、相同選擇器（直接選中） 若是都是直接選中，而且都是同類型的選擇器，那麼就是誰寫在後面就聽誰的 <style> p{ color: blue;
      } p{ color: red;
      } </style> <ul> <li> <p id="identity" class="para">我是段落</p> </li> </ul> <!-- 最終顯示紅色 --> 三、不一樣選擇器（直接選中） 若是都是直接選中，而且不是相同類型的選擇器，那麼就會按照選擇器的優先級來層疊 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> <!-- 最終顯示綠色 -->

注意點：

一、！important只能用於直接選中，不能用於間接選中 二、通配符選擇器選中的標籤也是直接選中的 三、！important只能提高被指定的屬性的優先級，其它的屬性的優先級不會被提高 四、！important必須寫在屬性值的分號前面 五、！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:;
```

注意點：

一、若是取值是中文，須要用雙引號或者單引號括起來 二、設置的字體必須是用戶電腦裏面已經安裝的字體

文字屬性的補充

一、若是設置的字體不存在，那麼系統會使用默認的字體來顯示（默認使用宋體）

二、若是設置的字體不存在，而咱們又不想用默認的字體來顯示怎麼辦？

能夠給字體設置備選方案

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

三、若是想給中文和英文分別單獨設置字體，怎麼辦？

但凡是中文字體，裏面都包含了英文

但凡是英文字體，裏面都沒有包含中文

也就是說中文字體能夠處理英文，而英文字體不能處理中文

**注意點：若是想給界面中的英文單獨設置字體，那麼英文的字體必須寫在中文的前面

四、在企業開發中最多見的字體有如下幾個

中文: 宋體/黑體/微軟雅黑
英文: "Times New Roman"/Arial

還須要知道一點, 就是並非名稱是英文就必定是英文字體
由於中文字體其實都有本身的英文名稱, 因此是否是中文字體主要看能不能處理中文
宋體 SimSun
黑體 SimHei
微軟雅黑 Microsoft YaHei

文字屬性縮寫

縮寫格式：
```
font: style weight size family;
```
例如：
```
font:italic bold 10px "楷體"; 
```

注意點：

一、在這種縮寫格式中有的屬性值能夠忽略 sytle能夠省略 weight能夠省略 二、在這種縮寫格式中style和weight的位置能夠變換 三、在這種縮寫格式中有的屬性值是不能夠縮寫的 size不能省略 family不能省略 四、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

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

color取值詳細說明

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>

overflow 圓形頭像示例

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();
```

注意點：

一、圖片的地址必須放在url()中，圖片的地址能夠是本地的地址，也能夠是網絡的地址 二、若是圖片的大小沒有標籤的大小大，那麼會自動在水平和垂直方向平鋪來填充 三、若是網頁上出現了圖片，那麼瀏覽器會再次發送請求獲取圖片

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盒模型指那些能夠設置寬度高度/內邊距/邊框/外邊框的標籤

一、內容的寬度和高度

就是經過width/height屬性設置的寬度和高度

二、元素的寬度和高度

寬度 = 左邊距 + 左內邊距 + width + 右內邊距 + 右邊距

高度同理可證

三、元素空間的寬度和高度
寬度 = 左外邊距 + 左邊框 + 左內邊距 + width + 右內邊距 + 右邊框 + 右外邊距
高度同理可證

margin：（外邊距）用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目錄。
padding：（內邊距）用於控制內容與邊框之間的距離
border（邊框）：圍繞在內邊框和內容外的邊框
content：盒子的內容，顯示文本和圖像

邊框屬性（border）

什麼是邊框？
邊框就是環繞在標籤寬度和高度周圍的線條

格式：

一、連寫（同事設置四條邊的邊框） border: 邊框的寬度 邊框的樣式 邊框的顏色;

二、連寫（分別設置四條邊的邊框） 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;

注意點：

一、連寫格式中顏色屬性能夠省略，省略以後默認就是黑色 二、連寫格式中樣式不能省略，省略以後就看不到邊框了 三、連寫格式中寬度能夠省略，省略以後仍是能夠看到邊框

邊框樣式：

none 無邊框。 dotted 點狀虛線邊框。 dashed 矩形虛線邊框。 solid 實線邊框。

border-radius

用這個屬性能實現圓角邊框的效果。 將border-radius設置爲長或高的一半便可獲得一個圓形。

外邊距（margin）

什麼是外邊距？

標籤和標籤之間的距離就是外邊距

格式：

一、非連寫 margin-top: ; margin-right: ; margin-bottom: ; margin-left: ; 示例代碼 <style> .box1{ margin-top:20px; margin-right:40px; margin-bottom:80px; margin-left:160px;
        } </style>

二、連寫 margin: 上 右 下 左; 示例代碼 <style> .box1{ margin:20px 40px 80px 160px;
            /*margin:20px 40px 80px;*/
            /*margin:20px 40px;*/
            /*margin:20px;*/
        } </style>

注意點：

一、外邊距的那一部分是沒有背景顏色的 二、這三個屬性的取值省略時的規律： 上 右 下 左 > 上 右 下 > 左邊的取值和右邊的同樣 上 右 下 左 > 上 右 > 左邊的取值和右邊的同樣 下邊的取值和上邊同樣 上 右 下 左 > 上 > 右下左邊取值和上邊同樣

外邊距合併現象

默認佈局的垂直方向的外邊距是不會疊加的，會出現合併現象，誰的外邊距比較大就聽誰的

<!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問題

一、若是兩個盒子是嵌套關係，那麼設置了裏面一個盒子頂部的外邊距，外面一個盒子也會被頂下來

二、若是外面的盒子不想被一塊兒頂下來，那麼能夠給外面的盒子添加一個邊框屬性

在企業開發中，通常狀況下若是須要控制嵌套關係盒子之間的距離，應該首先考慮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/> ![](images/girl.jpg) <div class="son"></div> </div> </body> </html>

示例

內邊距（padding）

什麼是內邊距？
邊框和內容之間的距離就是內邊距

格式：

一、非連寫 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>

二、連寫 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>

注意點：

一、這三個屬性的取值省略時的規律 上 右 下 左 > 上 右 下 > 左邊的取值和右邊的同樣 上 右 下 左 > 上 右 > 左邊的取值和右邊的同樣 下邊的取值和上邊同樣 上 右 下 左 > 上 > 右下左邊取值和上邊同樣 二、給標籤設置內邊距以後，標籤佔有的寬度和高度會發生變化 三、給標籤設置內邊距以後，內邊距也會有背景顏色

浮動（float）

float取值

left：向左浮動
right：向右浮動
none： 默認值，不浮動

網頁的佈局方式

什麼是網頁的佈局方式？

網頁的佈局方式其實就是指瀏覽器是如何對網頁中的元素進行排版的

標準流

標準流（文檔流/普通流）排放方式

其實瀏覽器默認的排版方式就是標準流的排版方式
在CSS中將元素分爲三類，分別是塊級元素/行內元素/行內塊級元素

在標準流中有兩種排版方式，一種是垂直排版，一種是水平排版

垂直排版：若是元素是塊級元素，那麼就會垂直排版 水平排版：若是元素是行內元素/行內塊級元素，那麼就會水平排版

浮動流

浮動流是一種「半脫離標準流」的排版方式
浮動流只有一種排版方式，就是水平排版，它只能設置某個元素左對齊或者右對齊

注意點：

浮動流中沒有居中對齊，也就是沒有center這個取值 在浮動流中是不可使用margin: 0 auto;

特色：

一、在浮動流中是不區分塊級元素/行內元素/行內塊級元素的 不管是塊級元素/行內元素/行內塊級元素均可以水平排版 二、在浮動流中不管是塊級元素/行內元素/行內塊級元素均可以設置寬高 三、綜上所述，浮動流中的元素和標準流中的行內塊級元素很想

浮動元素的脫標

什麼是浮動元素的脫標？

脫標：脫離標準流 當某一個元素浮動以後，那麼這個元素看上去就像被從標準流中刪除了同樣，這個就是浮動元素的脫標

浮動元素脫標以後會有什麼影響？

若是前面一個元素浮動了，然後面一個元素沒有浮動，那麼這個時候前面一個元素就會蓋住後面一個元素

浮動元素排序規則

相同方向上的浮動元素，先浮動的元素會顯示在前面，後浮動的元素會顯示在後面

<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;
}

清除浮動

清除浮動方式一

給前面的父盒子添加高度

示例代碼：

<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>

View Code

添加高度前：
添加高度後：
注意點：在企業開發中能不寫高度就不寫高度，因此這種方式不經常使用

清除浮動方式二

利用clear:both; 屬性清除前面浮動元素對個人影響

clear取值：

left 在左側不容許浮動元素。 right 在右側不容許浮動元素。 both 在左右兩側均不容許浮動元素。 none 默認值。容許浮動元素出如今兩側。 inherit 規定應該從父元素繼承 clear 屬性的值。

示例代碼：

<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>

View Code

添加clear:both;前：
添加clear:both;後：
注意點：使用clear:both以後margin屬性會失效，因此不經常使用

清除浮動方式三

在兩個有浮動子元素的盒子之間添加一個額外的塊級元素

示例代碼：

<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>

View Code

添加額外塊級元素前：
添加額外塊級元素後：

注意點：

一、在外牆法中能夠經過設置額外標籤的高度來實現margin效果 二、搜狐中大量使用了這個技術，可是因爲須要添加大量無心義的標籤，因此不經常使用

清除浮動方式四

在前面一個盒子的最後添加一個額外的塊級元素

示例代碼：

<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>

View Code

添加額外塊級元素前：
添加額外塊級元素後：

注意點：

一、內牆法會自動撐起盒子的高度，因此能夠直接設置margin屬性 二、和內牆法同樣須要添加不少無心義的空標籤

清除浮動方式五（overflow）

如何利用overflow:hidden;清除浮動？

給前面一個盒子添加overflow:hidden屬性

示例代碼：

<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>

View Code

添加overflow:hidden;前：
添加overflow:hidden;後：

注意點：

一、因爲overflow:hidden能夠撐起盒子的高度, 因此能夠直接設置margin屬性 二、E8之前不支持利用overflow:hidden來清除浮動, 因此須要加上一個*zoom:1; 三、優勢能夠不用添加額外的標籤又能夠撐起父元素的高度, 缺點和定位結合在一塊兒使用時會有衝突

清除浮動方式六（僞元素）

給前面的盒子添加僞元素來清除浮動

示例代碼：

<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>

View Code

添加僞元素前：
添加僞元素後：

注意點：

一、本質上和內牆法同樣, 都是在前面一個盒子的最後添加一個額外的塊級元素 二、添加僞元素後能夠撐起盒子的高度, 因此能夠直接設置margin屬性 三、CSS中還有一個東西叫作僞類, 僞元素和僞類不是同一個東西

清除浮動方式七

給前面的盒子添加雙僞元素來清除浮動

示例代碼：

<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>

View Code

添加雙僞元素前：
添加雙僞元素後：

定位（position）

定位分爲了四類：

relative(相對定位）
absolute（絕對定位）
static（靜態定位）
fixed（固定定位）

相對定位

相對定位就是相對於本身之前在標準流中的位置來移動

格式：
```
position: relative;
```

示例：

<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>

View Code

注意點：

一、相對定位是不脫離標註流的，會繼續在標準流中佔用一份空間 二、在相對定位中同一個方向上的定位屬性只能使用一個 top/bottom只能用一個 left/right只能用一個 三、因爲相對定位是不脫離標準流的, 因此在相對定位中是區分塊級元素/行內元素/行內塊級元素 四、因爲相對定位是不脫離標準流的, 而且相對定位的元素會佔用標準流中的位置, 因此當給相對定位的元素設置margin/padding等屬性的時會影響到標準流的佈局

絕對定位

絕對定位就是相對於body或者某個定位流中的祖先元素來定位

格式：
```
position: absolute;
```

示例：

<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>

View Code

注意點：

一、絕對定位的元素是脫離標準流的, 不會佔用標準流中的位置 二、因爲絕對定位的元素是脫離標準流的, 因此絕對定位的元素不區分塊級元素/行內元素/行內塊級元素 三、若是一個絕對定位的元素是以body做爲參考點, 那麼實際上是以網頁首屏的寬度和高度做爲參考點, 而不是以整個網頁的寬度和高度做爲參考點 相對於body定位會隨着頁面的滾動而滾動 四、一個絕對定位的元素會忽略祖先元素的padding

絕對定位參考點

一、默認狀況下全部的絕對定位的元素，不管有沒有祖先元素，都會以body做爲參考點

二、若是一個絕對定位的元素有祖先元素，而且祖先元素中有一個是定位流的元素，那麼這個絕對定位的元素就會以定位流的那個祖先元素做爲參考點

三、若是一個絕對定位的元素有祖先元素，而且祖先元素中有多個是定位流的元素，那麼這個絕對定位的元素會以離它最近的那個定位流的祖先元素做爲參考點

絕對定位水平居中

注意當一個盒子絕對定位以後不能使用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">全球購![](hot.png)</li> <li>閃購</li> <li>團購</li> <li>拍賣</li> <li>江哥</li> </ul> </body> </html>

示例說明

相對定位和絕對定位通常都是用來作覆蓋效果的，當看到某個元素覆蓋在另一個元素上時，第一時間就要想到定位流

固定定位

固定定位和前面的背景關聯方式很像，背景關聯方式可讓某個圖片不隨着滾動條的滾動而滾動，而固定定位可讓某個盒子不隨着滾動條的滾動而滾動

格式：
```
position: fixed;
```

示例：

<!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>

View Code

注意點：

一、固定定位的元素是脫離標準流的, 不會佔用標準流中的位置 二、因爲固定定位的元素是脫離標準流的, 因此絕對定位的元素不區分塊級元素/行內元素/行內塊級元素 三、IE6不支持固定定位

應用場景：

網頁對聯廣告；網頁頭部通欄（穿透效果）

z-index屬性

用於指定定位的元素的覆蓋關係

定位元素的覆蓋關係：

默認狀況下定位的元素必定會蓋住沒有定位的元素 默認狀況下寫在後面的定位元素會蓋住前面的定位元素 默認狀況下全部元素的z-index值都是0, 若是設置了元素的z-index值, 那麼誰比較大誰就顯示在前面 定位元素的從父現象： 父元素沒有z-index值, 那麼子元素誰的z-index大誰蓋住誰 父元素z-index值不同, 那麼父元素誰的z-index大誰蓋住誰

前端基礎-- CSS

CSS知識

CSS語法

CSS的幾種引入方式

行內樣式

內部樣式

外部樣式

CSS選擇器

基本選擇器

標籤選擇器

id選擇器

類選擇器

組合選擇器

後代選擇器

子元素選擇器

兄弟選擇器

相鄰兄弟選擇器

通用兄弟選擇器

屬性選擇器

通配符選擇器

CSS三大特性

繼承性

層疊性

優先級

!important

CSS屬性相關

寬和高

文字屬性

font-style

font-weight

font-size

font-family

文字屬性的補充

文字屬性縮寫

文本屬性

text-align

text-decoration

text-indent

顏色屬性

overflow溢出屬性

CSS元素的顯示模式

什麼是塊級元素，什麼是行內元素？

塊級元素和行內元素的區別？

CSS元素顯示模式轉換（display屬性）

背景和精靈圖

背景相關屬性

background-color

background-image

background-repeat

background-position

背景屬性連寫

插入圖片和背景圖片的區別

精靈圖

CSS盒模型

邊框屬性（border）

外邊距（margin）

什麼是外邊距？

外邊距合併現象

margin-top問題

text-align:center;和margin:0 auto;區別

內邊距（padding）

浮動（float）

float取值

網頁的佈局方式

標準流

浮動流

浮動元素的脫標

浮動元素排序規則

浮動元素貼靠現象

浮動元素字圍現象

清除浮動

清除浮動方式一

清除浮動方式二

清除浮動方式三

清除浮動方式四

清除浮動方式五（overflow）

清除浮動方式六（僞元素）

清除浮動方式七

定位（position）

相對定位