CSS基礎

為網頁添加樣式
- 術語解釋
- - 選擇器
  - 聲明塊
- CSS代碼書寫的位置
- - 為什麼推薦使用外部樣式表？
常見的樣式屬性
選擇器
- 簡單選擇器
- 選擇器的組合
- 選擇器的并列
層疊
- 1.比較重要性
- 2.比較特殊性
- 3.比較源次序
- 應用
- - 1. 重置樣式表
  - 2. 愛恨法則
繼承
屬性值的計算過程
盒模型
- 盒子的組成部分
盒模型應用
- 改變寬高範圍
- 改變背景覆寫範圍
- 溢出處理
- 斷詞規則
- 空白處理
行盒的盒模型
- 顯著特點
- 行塊盒
- 空白折疊
- 可替換元素和非可替換元素
正常流
- 正常流布局
浮動
- 應用場景
- 浮動的基本特點
- 盒子尺寸
- 盒子排列
- 高度坍塌
定位
- position屬性
- 相對定位
- 絕對定位
- 固定定位
- 定位下的居中
- 多個定位元素重疊時
- 補充
- 透明
更多的選擇器
- 更多僞類選擇器
- 更多的僞元素選擇器
更多的樣式
- 透明度
- 滑鼠
- 盒子隐藏
- 背景圖
- - 和img元素的差別
  - 涉及的css屬性

為網頁添加樣式

術語解釋

h1{
    color:red;
    background-color: lightblue;
    text-align: center;
}

以上代碼叫做：CSS規則

CSS規則 = 選擇器 + 聲明塊

選擇器

選擇器：選中對應元素，用來選擇樣式的範圍。

ID選擇器：選中對應id值的元素
元素選擇器：選擇頁面上所有的同名元素
類選擇器（使用最廣泛）：選中類名相同的所有元素，且一個元素可以有多個類名，非常靈活

聲明塊

出現在大括号中

聲明塊中包含很多聲明（也叫作屬性），每一個聲明表達了某一方面的樣式規則

CSS代碼書寫的位置

内部樣式表

書寫在style元素中

通常把style元素放在head元素中，為的是浏覽器在讀取網頁時最先加載出CSS代碼
内聯樣式表（元素樣式表）

在元素上添加style屬性，直接把樣式添加到屬性中
外部樣式表（常用）

将樣式書寫到獨立的CSS檔案中

需要使用：

<link rel="stylesheet" href="">

告訴css檔案的路徑。

rel=“stylesheet” 表示連結的是一個樣式表。

實際上link元素不僅僅可以連結樣式表。

為什麼推薦使用外部樣式表？

外部樣式表可以解決多頁面樣式重複的問題
有利于浏覽器緩存，進而提高頁面響應速度
有利于代碼分離，更容易閱讀和維護

【漲知識】：在浏覽器中按住ctrl鍵再點選超連結，會在新視窗打開這個連結。

CSS注釋：

常見的樣式屬性

color

元素内部的文字顔色

預設值：定義好的單詞（在真實的項目裡用的并不多）

三原色，色值：光學三原色（紅、綠、藍），每個顔色可以使用0-255之間的數字來表達（數字越大，顔色越深），一共256色值。

RGB表示法：
比如：rgb(0,255,0) 代表綠色

hex(16進制) 表示法：
#紅綠藍
馬爾斯綠：#008c8c 對應rgb(0，140，140)

在浏覽器中，rgb法和hex法可以切換

【常見的顔色】

淘寶紅：#ff4400，這種情況可以簡寫為：#f40
黑色：#000000，#000
白色：#ffffff，#fff
紅：#ff0000，#f00
綠：#00ff00，0f0
藍：#0000ff，00f
紫色：#ff00ff，#f0f
青色：#00ffff，#0ff
黃色：#ffff00，#ff0
灰色：#cccccc，#ccc

background-color

元素背景顔色
font-size

元素内部文字的尺寸大小

每個元素必須有字型大小，如果沒有聲明，則直接使用父元素的字型大小，如果沒有父元素(html),則使用基準字号（根據浏覽器而定，可設定）。

【它的機關】：

px:像素，絕對機關
em:相對機關，相對于父元素的字型大小，它的值代表是父元素字型大小的幾倍

user agent,UA,使用者代理（浏覽器）

font-weight

文字粗細程度，可以取值數字，也可以取值為預設值

預設值：normal; 相當于400

加粗：bold; 相當于700

通常情況下這兩個預設值就夠用了
font-family

文字類型

必須是使用者計算機中存在的字型，才會有效。

可以使用多個字型，以比對不同的環境：

div{
    font-family: consolas,翩翩體-簡,微軟雅黑,Arial,sans-serif;
}

最後寫sans-serif，意思就是如果前面的字型你電腦都沒有的話，讓你的作業系統自行去選擇一個非襯線字型。

sans-serif:非襯線字型之一，字型的邊緣沒有經過修飾。在網頁顯示時很美觀。

襯線字型，字型邊緣經過了修飾，很美觀，比如宋體，往往用于印刷。

font-style

字型樣式，通常用它設定斜體

屬性值：italic，表示傾斜

i元素，預設樣式是傾斜字型。

在較早版本的 HTML 技術參數聲明中，i 标簽隻是一個用于将文本顯示為斜體的表示性元素，很像 b 标簽被用來将文本顯示為粗體。情況不再是這樣了，因為這些标簽現在定義了更多的語義而不隻是排版外觀。i 标簽應表現一系列帶有不同語義的文本，它的典型樣式顯示為斜體。

但在實際使用中，通常用它表示一個圖示。圖示（icon）

strong元素，預設加粗

em元素，預設斜體

strong:表示重要的，不能忽略的内容

em:表示強調的内容

text-decoration

文本修飾，給文本加線

屬性值：

line-through：文字中間一條橫穿線

overline:文字上面加一條橫線

underline:文字下面加一條線

del元素：錯誤（廢棄）的内容，它的樣式是給文本加橫穿線

s元素：過期的内容，樣式同上，通常用于原件，打折價

text-indent

首行文本縮進

屬性值：2em，代表縮進兩個字元（中文）
line-height

每行文本的高度，該值越大，每行文本的距離就越大。可以了解為行間距。

設定行高為容器的高度，可以讓單行文本垂直居中：

element.style {
    background-color: #008c8c;
    color: #fff;
    height: 50px;
    line-height: 50px;
}

行高可以設定為純數字，不帶機關，表示相對于目前元素的字型大小。

如果是多行文本，非常不建議使用絕對機關px來設定行高（否則當字型大小超過行高時會重疊混亂）。通常也不用em，直接用純數字即可。

10. width

設定元素的寬度

11. height

設定元素的高度

12. letter-space

設定文字間隙

13. text-align

元素内部文字的水準排列方式，預設靠左排列

left/center/right

選擇器

選擇器：幫助你精準地選中想要的元素

簡單選擇器

ID選擇器
元素選擇器
類選擇器
通配符選擇器

*,選中所有元素
屬性選擇器

根據屬性名和屬性值選中元素

[href]{
    color:red;
}
[href="https://www.sina.com" target="_blank" rel="external nofollow" ]{
    color:blue;
}

[attr=value] 表示帶有以attr命名的屬性，且屬性值為“value”的元素

[attr~=value] 表示帶有一attr命名的屬性的元素，并且該屬性是一個以空格作為分隔的值清單，其中[至少]一個值比對“value"

[attr|=value] 表示帶有以attr命名的屬性的元素，屬性值為”value“或是以”value-“為字首（”-“為連字元，Unicode編碼為U+002D）開頭。典型的應用場景是用來比對語言簡寫代碼（如zh-CN，zh-TW可以用zh作為value）

[attr^=value] 表示帶有以attr命名的屬性，且屬性值是以”value“開頭的元素

[attr$=value] 表示帶有以attr命名的屬性，且屬性值是以”value“結尾的元素

[attr*=value] 表示帶有以attr命名的屬性，且屬性值含有”value“的屬性

剩下的百度：屬性選擇器 mdn

6. 僞類選擇器

選中某些元素的某種狀态

（通常很多都是用在a元素上）

link:超連結未通路時的狀态
visited:超連結通路過後的狀态

(這裡浏覽器會有緩存，超連結通路一次過後就變不回去未被通路的狀态了，需要清空浏覽器緩存)
hover:滑鼠移動上去的狀态

選中滑鼠懸停時的a元素：

a:hover{
    color:red;
}

active:激活狀态，滑鼠按下狀态

選中滑鼠按下時的a元素：

a:active{
    color:red;
}

前兩個僞類選擇器隻有a元素可以使用！

【注意】：這四個僞類如果要同時寫，寫的順序是有講究的，按照以上排列的順序即可。（lvha愛恨法則）

7. 僞元素選擇器

(前面加兩個冒号)

（生成并選中某個元素内部的第一個子元素或最後一個子元素）

::before

::after

<p>
    袁老師和成老師的<span>HTML和CSS</span>課程真好看！
</p>

span::before{
    content: "《";
    color: red;
}
span::after{
    content: "》";
}

效果就是：袁老師和成老師的《HTML和CSS》課程真好看！

content屬性隻能在僞元素選擇器中使用

選擇器的組合

【牛逼寫法：】p.red 按tab鍵直接生成class屬性為red的p元素

并且(組合選擇器)

p.red{
    color: red;
}

中間不能有空格

2. 後代元素選擇器 —— 空格

它可以選擇某一進制素的特定後代元素，包括直接子元素和間接後代元素

這個選擇器很常用

【注意】p元素裡不能放ul與li元素

3. 子元素選擇器 —— >

隻能選中子元素

4. 相鄰兄弟元素選擇器 —— +

它會選中某元素的相鄰的下一個兄弟元素

5. 兄弟元素選擇器 —— ~

它會選中某元素的後邊出現的所有兄弟元素

選擇器的并列

多個選擇器，用逗号分隔

文法糖而已，假如兩個選擇器裡的樣式聲明都一模一樣，那麼可以把它們并列起來，用逗号分隔，書寫在一起，減輕我們書寫代碼的負擔。本質上在浏覽器運作的時候會看做它們是分開書寫的。

.special~li,p{
    color:#008c8c;
}

層疊

聲明沖突：同一個樣式，多次應用到同一個元素

層疊（權重計算）：解決聲明沖突的過程，是浏覽器自動處理的

我們簡單一點，隻看如下三步即可：

1.比較重要性

重要性從高到低：

作者樣式表：開發者書寫的樣式

1）作者樣式表中的！important樣式（重要性最高，不建議使用）

2）作者樣式表中的普通樣式

3）浏覽器預設樣式表中的樣式

2.比較特殊性

總體規則：選擇器選中的範圍越窄，越特殊

具體規則：通過選擇器，計算出一個4位數（xxxx），這個數越大，該選擇器越特殊

千位：如果是内聯樣式，記作1，否則記作0
百位：等于選擇器中所有id選擇器的個數
十位：等于選擇器中所有類選擇器、屬性選擇器、僞類選擇器的數量
個位：等于選擇器中所有元素選擇器、僞元素選擇器的數量

#mydiv #myul a :link{
    /*有兩個id選擇器，一個僞類選擇器，一個元素選擇器
    權重計算的結果為：0211
    */
    color:chocolate;
}

【注意】：這裡的4位數是逢256進一，也就是說，權重是一個256進制數。

做二次開發時，我們往往都是采用增權重重的方式制造沖突來覆寫樣式，而不是修改樣式。

3.比較源次序

代碼書寫靠後的勝出

應用

1. 重置樣式表

書寫一些作者樣式，覆寫浏覽器的預設樣式

重置樣式表 -> 浏覽器的預設樣式

先引用重置樣式表，再引用自己的樣式表。

常見的重置樣式表：normalize.css、reset.css、meyer.css

重置樣式表寫法相對固定，我們也不用自己書寫，網上複制粘貼或者遠端引用即可。

meyer.css代碼如下：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

2. 愛恨法則

a元素中寫僞類的順序：

link -> visited -> hover -> active

為什麼要按照這樣的順序書寫？

因為在某些時候，可能會有多個樣式應用到了同一個a元素

a:link{
    color:green;
}
a:visited{
    color:red;
}
a:hover{
    color:chocolate;
}
a:active{
    color:#000;
}

問：當超連結未通路且滑鼠移上去且滑鼠左鍵按下去的時候，我們希望該超連結顯示什麼顔色？

我們當然希望它顯示的是滑鼠按下去應當顯示出的顔色。如果不按照這個書寫順序，就達不到我們想要的結果。

繼承

子元素會繼承父元素的某些CSS屬性。

通常，跟文字内容相關的屬性都能被繼承。

是以，我們可以直接選中body元素，為網頁添加文字的樣式，這些樣式被一層一層地繼承下去。

body{
    font-family:Arial,Helvetica,sans-serif;
}

背景顔色，寬度，高度不能夠繼承。

【留下一個問題】：當繼承和層疊的樣式沖突後，浏覽器該怎麼處理？

屬性值的計算過程

浏覽器渲染頁面的過程，是一個元素一個元素依次渲染，按照頁面文檔的樹形目錄結構順序進行。

CSS基礎（CSS知識點總結）為網頁添加樣式常見的樣式屬性選擇器層疊繼承屬性值的計算過程盒模型盒模型應用行盒的盒模型正常流浮動定位更多的選擇器更多的樣式

如圖，先渲染html元素，然後再依次渲染head，meta，title，body，h3，p，strong，a，img。

渲染每個元素的前提條件：該元素的所有CSS屬性必須有值。

一個元素，從所有屬性都沒有值，到所有的屬性都有值，這個計算過程，叫做屬性值計算過程。

确定聲明值：把參考樣式表中沒有沖突的聲明，直接作為CSS屬性值
層疊沖突：對樣式表有沖突的聲明使用層疊規則，确定CSS屬性值
- 比較重要性
- 比較特殊性
- 比較源次序（寫在後面的樣式勝出）
使用繼承：對仍然沒有值的屬性，若可以繼承，則繼承父元素的值
使用預設值：對仍然沒有值的屬性，使用預設值

舉個例子：

<div>
        <a href="">
            舉個例子
        </a>
        <p>
            p元素
        </p>
    </div>

div {
        color: red;
    }

a元素的顔色不能繼承,是以它的顔色不是紅色。a元素的顔色是屬性值計算過程的第一步就确定了聲明值。

【小技巧：】

我們寫重置樣式的時候，很多時候希望把a元素的樣式重置一下。

a{
    /* 沒有下劃線，顔色繼承父元素 */
    text-decoration: none;
    color: inherit;    /*inherit表示強制繼承*/
}

再舉個例子，有的時候我們不希望改動以前的css代碼，想要把如下的div的背景顔色改為預設值，假如我們還不知道預設值為透明（transparent），那我們可以使用initial這個值，直接将該屬性設定為預設值。

<div class="mydiv">

    </div>

div {
        width:100px;
        height: 100px;
        background: lightblue;
    }

    .mydiv{
        background: initial;
    }

背景顔色的預設值（Initial value）：透明

background-color:transparent

另外背景顔色不可被繼承。

特殊的兩個CSS取值：

inherit：手動（強制）繼承，将父元素的值取出應用到該元素
initial：初始值，将該屬性設定為預設值

盒模型

box：盒子，每個元素在頁面中都會生成一個矩形區域（盒子）

盒子類型：

行盒，display等于inline的元素
塊盒，display等于block的元素

行盒在頁面中不換行、塊盒獨占一行

display預設值為inline

浏覽器預設樣式表設定的塊盒：容器元素、h1~h6、p

常見的行盒：span、a、img、video、audio

盒子的組成部分

無論是行盒、還是塊盒，都由下面幾個部分組成，從内到外分别是：

内容 content

width、height，設定的是盒子内容的寬高

内容部分通常叫做整個盒子的内容盒 content-box

填充(内邊距) padding

盒子邊框到盒子内容的距離

padding-left、padding-right、padding-top、padding-bottom

padding的簡寫簡寫屬性(速寫屬性)：

同時設定4個方向的值:

padding: 上右下左

當上下值和左右值相等:

padding:上下左右;

如果4個方向的内邊距值都相等：

padding:50px;

填充區+内容區 = 填充盒 padding-box

邊框 border

邊框 = 邊框樣式 + 邊框寬度 + 邊框顔色

邊框樣式：border-style

邊框寬度：border-width

邊框顔色：border-color

（這幾個屬性也全是速寫屬性）

不僅如此，它們還可以進一步簡寫：

順序為：寬度，樣式，顔色。

border:4px dashed red;

邊框+填充區+内容區 = 邊框盒 border-box

外邊距 margin

邊框到其他盒子的距離

margin-top、margin-left、margin-right、margin-bottom

速寫屬性margin

盒模型應用

改變寬高範圍

預設情況下，width 和 height 設定的是内容盒寬高。

頁面重構師：将psd檔案（設計稿）制作為靜态頁面

衡量設計稿尺寸的時候，往往使用的是邊框盒，但設定width和height，則設定的是内容盒

解決辦法：

精确計算
CSS3：box-sizing

例如：改變寬高的影響範圍：

box-sizing:border-box;

改變背景覆寫範圍

預設情況下，背景覆寫邊框盒

可以通過background-clip進行修改

溢出處理

overflow，控制内容溢出邊框盒後的處理方式

斷詞規則

word-break，會影響文字在什麼位置被截斷換行

normal：普通。CJK字元（文字位置截斷），非CJK字元（單詞位置截斷）

break-all：截斷所有。所有字元都在文字處截斷

keep-all：保持所有。所有文字都在單詞之間截斷

空白處理

white-space: nowrap

<body>
    <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Atque animi delectus corporis hic!</li>
        <li>Reiciendis quos ratione culpa saepe.</li>
        <li>Deserunt voluptas numquam doloremque beatae!</li>
        <li>Cum architecto nulla dolorem at.</li>
        <li>Repudiandae deserunt temporibus tempora quaerat?</li>
        <li>Dolores laborum veritatis fuga commodi!</li>
        <li>Velit explicabo dicta doloremque unde!</li>
        <li>Sed magnam ratione quaerat ducimus!</li>
        <li>Explicabo perspiciatis aspernatur maiores. Accusantium?</li>
    </ul>
</body>

li{
      border-bottom: 1px dashed #ccc;
      line-height: 2;
      border-left: 3px solid #008c8c;
      padding-left: 10px;
      margin: 1em 0;
      width: 300px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

行盒的盒模型

常見的行盒：包含具體内容的元素

span、strong、em、i、img、video、audio

顯著特點

盒子沿着内容沿伸
行盒不能設定寬高

調整行盒的寬高，應該使用字型大小、行高、字型類型，間接調整。

内邊距（填充區）

水準方向有效，垂直方向不會實際占據空間。

邊框

水準方向有效，垂直方向不會實際占據空間。

外邊距

水準方向有效，垂直方向不會實際占據空間。

行塊盒

display：inline-block 的盒子

不獨占一行
盒模型中所有尺寸都有效

空白折疊

空白折疊，發生在行盒（行塊盒）内部或行盒（行塊盒）之間

可替換元素和非可替換元素

大部分元素，頁面上顯示的結果，取決于元素内容，稱為非可替換元素

少部分元素，頁面上顯示的結果，取決于元素屬性，稱為可替換元素

可替換元素：img、video、audio

絕大部分可替換元素均為行盒。

可替換元素類似于行塊盒，盒模型中所有尺寸都有效。

正常流

盒模型：規定單個盒子的規則

視覺格式化模型（布局規則）：頁面中的多個盒子排列規則

視覺格式化模型，大體上将頁面中盒子的排列分為三種方式：

正常流
浮動
定位

正常流布局

正常流、文檔流、普通文檔流、正常文檔流

所有元素，預設情況下，都屬于正常流布局

總體規則：塊盒獨占一行，行盒水準依次排列

包含塊（containing block）：每個盒子都有它的包含塊，包含塊決定了盒子的排列區域。

絕大部分情況下：盒子的包含塊，為其父元素的内容盒

塊盒

每個塊盒的總寬度，必須剛好等于包含塊的寬度

寬度的預設值是auto

margin的取值也可以是auto，預設值0

auto：将剩餘空間吸收掉

width吸收能力強于margin

若寬度、邊框、内邊距、外邊距計算後，仍然有剩餘空間，該剩餘空間被margin-right全部吸收

在正常流中，塊盒在其包含快中居中，可以定寬、然後左右margin設定為auto。

每個塊盒垂直方向上的auto值

height:auto，适應内容的高度

margin:auto，表示0

百分比取值

padding、寬、margin可以取值為百分比

以上的所有百分比相對于包含塊的寬度。

高度的百分比：

1）. 包含塊的高度是否取決于子元素的高度，設定百分比無效

2）. 包含塊的高度不取決于子元素的高度，百分比相對于父元素高度

上下外邊距的合并

兩個正常流塊盒，上下外邊距相鄰，會進行合并。

兩個外邊距取最大值。

浮動

視覺格式化模型，大體上将頁面中盒子的排列分為三種方式：

正常流
浮動
定位

應用場景

文字環繞
橫向排列

浮動的基本特點

修改float屬性值為：

left：左浮動，元素靠上靠左
right：右浮動，元素靠上靠右

預設值為none

當一個元素浮動後，元素必定為塊盒(更改display屬性為block)
浮動元素的包含塊，和正常流一樣，為父元素的内容盒

盒子尺寸

寬度為auto時，适應内容寬度
高度為auto時，與正常流一緻，适應内容的高度
margin為auto，為0.
邊框、内邊距、百分比設定與正常流一樣

盒子排列

左浮動的盒子靠上靠左排列
右浮動的盒子考上靠右排列
浮動盒子在包含塊中排列時，會避開正常流塊盒
正常流塊盒在排列時，無視浮動盒子
行盒在排列時，會避開浮動盒子
外邊距合并不會發生

如果文字沒有在行盒中，浏覽器會自動生成一個行盒包裹文字，該行盒叫做匿名行盒。

高度坍塌

高度坍塌的根源：正常流盒子的自動高度，在計算時，不會考慮浮動盒子

清除浮動，涉及css屬性：clear

預設值：none
left：清除左浮動，該元素必須出現在前面所有左浮動盒子的下方
right：清除右浮動，該元素必須出現在前面所有右浮動盒子的下方
both：清除左右浮動，該元素必須出現在前面所有浮動盒子的下方

定位

視覺格式化模型，大體上将頁面中盒子的排列分為三種方式：

正常流
浮動：float
定位：position

定位：手動控制元素在包含塊中的精準位置

涉及的CSS屬性：position

position屬性

預設值：static，靜态定位（不定位）
relative：相對定位
absolute：絕對定位
fixed：固定定位

一個元素，隻要position的取值不是static，認為該元素是一個定位元素。

定位元素會脫離文檔流（相對定位除外）

一個脫離了文檔流的元素：

文檔流中的元素擺放時，會忽略脫離了文檔流的元素
文檔流中元素計算自動高度時，會忽略脫離了文檔流的元素

相對定位

不會導緻元素脫離文檔流，隻是讓元素在原來位置上進行偏移。

可以通過四個CSS屬性對設定其位置：

left
right
top
bottom

盒子的偏移不會對其他盒子造成任何影響。

絕對定位

寬高為auto，适應内容
包含塊變化：找祖先中第一個定位元素，該元素的填充盒為其包含塊。若找不到，則它的包含塊為整個網頁（初始化包含塊）

固定定位

其他情況和絕對定位完全一樣。

包含塊不同：固定為視口（浏覽器的可視視窗）

定位下的居中

某個方向居中：

定寬（高）
将左右（上下）距離設定為0
将左右（上下）margin設定為auto

絕對定位和固定定位中，margin為auto時，會自動吸收剩餘空間

多個定位元素重疊時

堆疊上下文

設定z-index，通常情況下，該值越大，越靠近使用者

隻有定位元素設定z-index有效

z-index可以是負數，如果是負數，則遇到正常流、浮動元素，則會被其覆寫

補充

絕對定位、固定定位元素一定是塊盒
絕對定位、固定定位元素一定不是浮動
沒有外邊距合并

透明

每個顔色都具有透明通道, 0 ~ 1

rgba(紅, 綠, 藍, alpha)
hex： #紅綠藍透

CSS基礎（CSS知識點總結）為網頁添加樣式常見的樣式屬性選擇器層疊繼承屬性值的計算過程盒模型盒模型應用行盒的盒模型正常流浮動定位更多的選擇器更多的樣式

CSS基礎

為網頁添加樣式

術語解釋

選擇器

聲明塊

CSS代碼書寫的位置

為什麼推薦使用外部樣式表？

常見的樣式屬性

選擇器

簡單選擇器

選擇器的組合

選擇器的并列

層疊

1.比較重要性

2.比較特殊性

3.比較源次序

應用

1. 重置樣式表

2. 愛恨法則

繼承

屬性值的計算過程

盒模型

盒子的組成部分

盒模型應用

改變寬高範圍

改變背景覆寫範圍

溢出處理

斷詞規則

空白處理

行盒的盒模型

顯著特點

行塊盒

空白折疊

可替換元素 和 非可替換元素

正常流

正常流布局

浮動

應用場景

浮動的基本特點

盒子尺寸

盒子排列

高度坍塌

定位

position屬性

相對定位

絕對定位

固定定位

定位下的居中

多個定位元素重疊時

補充

透明

更多的選擇器

更多僞類選擇器

更多的僞元素選擇器

更多的樣式

透明度

滑鼠

盒子隐藏

背景圖

和img元素的差別

涉及的css屬性

繼續閱讀

可替換元素和非可替換元素