層疊樣式表 (Cascading Style Sheets，縮寫為 CSS），是一種 樣式表 語言，用來描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之類的 XML 分支語言）文檔的呈現。CSS 描述了在屏幕、紙質、音頻等其它媒體上的元素應該如何被渲染的問題。

CSS 是開放網絡的核心語言之一，由 W3C 規範 實現跨瀏覽器的標準化。CSS節省了大量的工作。 樣式可以通過定義保存在外部.css文件中，同時控制多個網頁的佈局，這意味着開發者不必經歷在所有網頁上編輯佈局的麻煩。CSS 被分為不同等級：CSS1 現已廢棄， CSS2.1 是推薦標準， CSS3 分成多個小模塊且正在標準化中。

———— MDN

引入方式

1. 行內樣式 —— 寫在html標籤中

<div style="width: 100px; height: 100px;"></div>

2. 內嵌樣式 —— 寫在style標籤中如：

<style type="text/css">
    div {
        width: 200px;
    }
</style>

3. 鏈接樣式 —— 使用link標籤，如：

<link type="text/css" rel="stylesheet" href="style.css" />

4. 導入樣式

@import url("style.css")

如果使用第二種方式即寫在style標籤中，則最好在head標籤中引入。

選擇器

語法：選擇器 { 規則 }

• 標籤選擇器（元素選擇器）

div {
  width: 100px;
}

• 通配選擇器

* {
  margin: 0;
  padding: 0;
}

• id選擇器

#box1 {
  width: 100px;
}

• 類選擇器

.box {
   width: 200px;
}

• 另一種情況：

/ 選中class為box的div元素 /
div.box {

width: 100px;

}

- 包含選擇器 —— 通過包含嵌套選擇，只要包含就行

/ 選擇class為box的元素下的p元素下的a元素 /
.box p a {

color: red;

}

> 一般情況下包含選擇器不超過四層，上下層不一定是父子關係。

- 子選擇器 —— 一個元素下的直接子元素

.box > p {
color: red;
}

- 選擇器的權重

*通配選擇器 0.5
元素選擇器 1
類選擇器 10
id選擇器 100
內聯樣式 1000
!important 最重要，優先級最高

## 長度單位和顏色表示

### 長度單位

px / 像素，對於普通的屏幕，通常是一個設備像素 /
em / 以當前字體的高度為基準的倍數，受父元素的影響。如：當前為12px；則1em = 12px /
rem / 以html文檔的字體高度為基準的倍數，如：html { font-size: 16px; }, 則 1rem = 16px,多用於媒體查詢，做移動端適配 /
vw / 視口的初始包含塊的寬度的 1%，簡單説就是100vw = 1個視口的寬度 /
vh / 視口的初始包含塊的高度的 1%，簡單説就是100vh = 1個視口的高度 /

### 顏色表示

element { color: red }
element { color: #f00 }
element { color: #ff0000 }
element { color: rgb(255,0,0) }
element { color: rgb(100%, 0%, 0%) }
element { color: hsl(0, 100%, 50%) }

/ 50% 半透明 /
element { color: rgba(255, 0, 0, 0.5) }
element { color: hsla(0, 100%, 50%, 0.5) }

## 字體文本樣式

- `font-family` 通過給定一個有先後順序的，由字體名或者字體族名組成的列表來為選定的元素設置字體。

> font-family 屬性指定的是一個優先級從高到低的可選字體列表。 字體的選定不是在發現用户計算機上安裝的列表中的第一個字體時停止。相反，對字體的選擇是逐字進行的。也就是説即使某個字符周圍都在某個字體中可以顯示，但該字符在當前的字體文件中沒有適合的圖形，那麼會繼續嘗試列表中靠後的字體。（不過這在 Internet Explorer 6 以及之前的版本的 IE 瀏覽器中不適用。）當一個字體只在某些特定的 font-style、 font-variant、或 font-size 屬性值下有效時，這些屬性的值也可能對字體族 font family 的選擇造成影響。 —— MDN

/ 一個字體族名和一個通用字體族名 /
font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

/ 全局值 /
font-family: inherit;
font-family: initial;
font-family: unset;

- `font-size` 指定字體的大小。因為該屬性的值會被用於計算em和ex長度單位，定義該值可能改變其他元素的大小。

/ <absolute-size>，絕對大小值 /
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/ <relative-size>，相對大小值 /
font-size: larger;
font-size: smaller;

/ <length>，長度值 /
font-size: 12px;
font-size: 0.8em;

/ <percentage>，百分比值 /
font-size: 80%;
font-size: inherit;

- `font-style`允許你選擇 `font-family` 字體下的 `italic` 或 `oblique` 樣式

font-style: normal; / 常規體 /
font-style: italic; / 斜體 一般是指書寫體，相比無樣式的字體，通常會佔用較少的高度 /
font-style: oblique; / 傾斜體 只是常規字形的傾斜版本 /
font-style: oblique 10deg; / 如果是oblique關鍵字，可附加傾斜角度 /

/ 全局屬性 /
font-style: inherit;
font-style: initial;
font-style: unset;

- `font-weight`    指定了字體的粗細程度。 一些字體只提供 `normal` 和 `bold` 兩種值。

font-weight: normal; / 正常 /
font-weight: bold; / 粗體 /
font-weight: bolder; / 加粗體 /
font-weight: lighter; / 細體 /
font-weight: 400; / 數字100-900，數值越大越粗，400是正常 /

/ 全局屬性 /
font-weight: inherit;
font-weight: initial;
font-weight: unset;

- `text-transform` 指定如何將元素的文本大寫。它可以用於使文本顯示為全大寫或全小寫，也可單獨對每一個單詞進行操作

text-transform: capitalize; / 單詞首字母大寫 /
text-transform: uppercase; / 全部大寫 /
text-transform: lowercase; / 全部小寫 /
text-transform: none; / 阻止所有字符的大小寫被轉換 /
text-transform: full-width; / 這個關鍵字強制字符 — 主要是表意字符和拉丁文字 — 書寫進一個方形裏，並允許它們按照一般的東亞文字（比如中文或日文）對齊。 --MDN /

- `text-decoration` 用於設置文本的修飾線外觀的（下劃線、上劃線、貫穿線/刪除線  或 閃爍）它是 `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, 和新出現的 `text-decoration-thickness` 屬性的縮寫。

1、`text-decoration-line`文本修飾的位置，如下劃線`underline`，刪除線`line-through`。
  

text-decoration-line: none; / 沒有文本修飾效果 /
text-decoration-line: underline; / 在文本的下方有一條修飾線 /
text-decoration-line: overline; / 在文本的上方有一條修飾線 /
text-decoration-line: line-through; / 有一條貫穿文本中間的修飾線 /
text-decoration-line: blink; / 文本閃爍（文本交替處於顯示與隱藏狀態），瀏覽器好像都沒有實現 /
text-decoration-line: underline overline; / 兩條修飾線 /
text-decoration-line: overline underline line-through; / 多條修飾線 /

  
  2、`text-decoration-color`文本修飾的顏色，文本修飾線是通過 `text-decoration-line` 屬性指定的
  

text-decoration-color: currentColor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgba(255, 128, 128, 0.5);
text-decoration-color: transparent;

  
  3、`text-decoration-style`用於設置由 `text-decoration-line` 設定的線的樣式。如波浪線`wavy`實線`solid`虛線`dashed`。
  

text-decoration-style: solid; / 畫一條實線 /
text-decoration-style: double; / 畫一條雙實線 /
text-decoration-style: dotted; / 畫一條點劃線 /
text-decoration-style: dashed; / 畫一條虛線 /
text-decoration-style: wavy; / 畫一條波浪線 /
text-decoration-style: none; / 不畫線 /

4、`text-decoration-thickness`屬性用來設置元素中文本所使用的裝飾線如 `line-through`, `underline`, or `overline` 的厚度或者寬度。

text-decoration-thickness: auto; / 瀏覽器為文本裝飾線選擇合適的寬度 /
text-decoration-thickness: from-font; / 如果字體文件中包含了首選的厚度值則會使用字體文件的這個厚度值. 如果字體文件中沒有設置，則效果和設置為auto一樣，由瀏覽器選擇一個合適的厚度值 /

/ length /
/ 以 length 類型指定裝飾線厚度, 這樣會覆蓋掉字體文件指定的或瀏覽器默認的值 /
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;

5、`text-decoration`是上面4個屬性的縮寫

.wavy {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}

.wavy {
text-decoration: underline wavy red; / 與上面寫法的效果是相同的 /
}

- `text-indent` 定義一個塊元素首行文本內容之前的縮進量。

/ <length> 長度值 /
text-indent: 3mm;
text-indent: 40px;

/ <percentage>百分比值取決於其包含塊（containing block）的寬度/
text-indent: 15%;

/ 關鍵字 /
text-indent: 5em each-line; / 文本縮進會影響第一行，以及使用
強制斷行後的第一行 /
text-indent: 5em hanging; / 該值會對所有的行進行反轉縮進：除了第一行之外的所有的行都會被縮進，看起來就像第一行設置了一個負的縮進值 /
text-indent: 5em hanging each-line;

- `letter-spacing` 用於設置文本字符的間距表現。

letter-spacing: normal; / 此間距是按照當前字體的正常間距確定的。和 0 不同的是，用户代理根據此屬性來確定文字的默認對齊方式 /
/ <length> 指定文字間的間距以替代默認間距。可以是負值 /
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;

- `word-spacing` 用於設置單詞和標籤之間的間距

word-spacing: normal; / 正常的單詞間距，由當前字體和/或瀏覽器定義 /
word-spacing: 3px; / <length> values /
word-spacing: 0.3em;
word-spacing: inherit;

- `line-height` 用於設置多行元素的空間量，如多行文本的間距。

line-height: normal;
line-height: 3.5; / 設置為該屬性值乘以該元素的字體大小 /
line-height: 3em; / 指定<長度>用於計算 line box 的高度 /
line-height: 34%; / 計算值是給定的百分比值乘以元素計算出的字體大小。 /

/ 全局屬性 /
line-height: inherit;
line-height: initial;
line-height: unset;

> 可以使用`line-height`的值與`height`的值相等，達到文本在一行內垂直居中的效果。


- `text-align` 定義行內內容（例如文字）如何相對它的塊父元素對齊，text-align 並不控制塊元素自己的對齊，只控制它的行內內容的對齊。

/ Keyword values /
text-align: left; / 行內內容向左側邊對齊 /
text-align: right; / 行內內容向右側邊對齊 /
text-align: center; / 行內內容居中 /
text-align: justify; / 文字向兩側對齊，對最後一行無效。 /
text-align: justify-all; / 和justify一致，但是強制使最後一行兩端對齊。 /
text-align: start; / 如果內容方向是左至右，則等於left，反之則為right /
text-align: end; / 如果內容方向是左至右，則等於right，反之則為left /
text-align: match-parent;/ 和inherit類似，區別在於start和end的值根據父元素的direction確定，並被替換為恰當的left或right。 /

/ 全局屬性 /
text-align: inherit;
text-align: initial;
text-align: unset;

效果：

![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0eb968b1299e4327924148382c2ade35~tplv-k3u1fbpfcp-zoom-1.image)

- `vertical-align`指定行內元素（`inline`）或表格單元格（`table-cell`）元素的垂直對齊方式

/ Keyword values /
vertical-align: baseline; / 使元素的基線與父元素的基線對齊。 /
vertical-align: sub; / 使元素的基線與父元素的下標基線對齊 /
vertical-align: super;/ 使元素的基線與父元素的上標基線對齊 /
vertical-align: text-top;/ 使元素的頂部與父元素的字體頂部對齊 /
vertical-align: text-bottom;/ 使元素的底部與父元素的字體底部對齊 /
vertical-align: middle; / 使元素的中部與父元素的基線加上父元素x-height（譯註：x高度）的一半對齊 /
vertical-align: top; / 使元素及其後代元素的頂部與整行的頂部對齊 /
vertical-align: bottom;/ 使元素及其後代元素的底部與整行的底部對齊 /

/ 長度值，使元素的基線對齊到父元素的基線之上的給定長度。可以是負數。 /
vertical-align: 10em;
vertical-align: 4px;

/ 百分比，使元素的基線對齊到父元素的基線之上的給定百分比，該百分比是line-height屬性的百分比。可以是負數。 /
vertical-align: 20%;

/ 全局屬性 /
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

> `x-height`傳送門：[x-height](https://www.zhangxinxu.com/wordpress/2015/06/about-letter-x-of-css/)

## 盒子模型

> 具體介紹請看[CSS基礎盒模型介紹](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)。簡單説盒子模型是由`content`（內容）、`padding`（內邊距）、`border`（邊框）和`margin`（外邊距）組成的抽象模型。
>
> 一般又分為IE模型和常規模型，具體區別就自行百度或google了

- `padding`內邊距，padding區域指一個元素的內容和其邊界之間的空間，該屬性不能為負值。

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

簡寫：

padding: 20px; / 上下左右都為20px /
padding: 20px 30px; / 上下為20px，左右為30px /
padding: 20px 30px 40px; / 上為20px 左右為30px 下為40px /
padding: 20px 30px 40px 50px; / 依次為上右下左 /

- `border`用於設置各種單獨的邊界屬性的簡寫屬性。`border`可以用於設置一個或多個以下屬性的值： `border-width`, `border-style`, `border-color`。

border: none; / 沒有邊框 /
border-width: 10px; / 邊框的寬度 /
border-color: red; / 邊框的顏色 /
border-style: solid; / 邊框的樣式 （值：solid實心 dotted小圓點 dashed虛線 ...） /

/ 樣式 | 顏色 /
border: outset #f33;

/ 寬度 | 樣式 | 顏色 /
border: 10px solid red;

/ 單獨對一個方向上的邊框設置 /
border-right: 10px solid red;

- `margin`給定元素設置所有四個（上下左右）方向的外邊距屬性。這是四個外邊距屬性設置的簡寫。四個外邊距屬性設置分別是： `margin-top`， `margin-right`， `margin-bottom` 和 `margin-left` 。指定的外邊距允許為負數。

margin: style / 單值語法 所有邊緣 / 舉例： margin: 1em;
margin: vertical horizontal / 二值語法 縱向 橫向 / 舉例： margin: 5% auto;
margin: top horizontal bottom / 三值語法 上 橫向 下 / 舉例： margin: 1em auto 2em;
margin: top right bottom left / 四值語法 上 右 下 左 / 舉例： margin: 2px 1em 0 auto;
margin: inherit

> 注意：
> 1. 左右橫排的盒子之間的間距是 兩者的外邊距相加
> 2. 上下排列的盒子之間的間距是 以最大的為準（大的會把小的給覆蓋掉）
> 3. 兩個嵌套的盒子，他們都有`margin-top` 以最大的為準（大的會把小的給覆蓋掉） 
> 
> 解決方案:給父元素加`overflow: hidden;`
> 
> 更多內容：[BFC（塊級格式化上下文）](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context)

margin: 0 auto; / 塊級元素水平居中 /

## 背景

- `background-color`設置元素的背景色, 屬性的值為顏色值或關鍵字.

/ 顏色值 /
background-color: red;
background-color: #bbff00;
background-color: rgb(255, 255, 128);
background-color: hsla(50, 33%, 25%, 0.75);

/ 特殊值 /
background-color: currentColor;
background-color: transparent;

/ 全局屬性 /
background-color: inherit;
background-color: initial;
background-color: unset;

- `background-image`屬性用於為一個元素設置一個或者多個背景圖像，每個背景圖像被明確規定為關鍵字 `none` 或是一個`<image>`值，可以提供由逗號分隔的多個值來指定多個背景圖像

background-image:
linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
url('https://mdn.mozillademos.org/...');

- `background-repeat`定義背景圖像的重複方式。背景圖像可以沿着水平軸，垂直軸，兩個軸重複，或者根本不重複。

值：

`repeat`:  圖像會按需重複來覆蓋整個背景圖片所在的區域. 如果最後一個圖像大小不合適會被裁剪。

`space`:  圖像會盡可能得重複, 但是不會裁剪。

`round`: 隨着允許的空間在尺寸上的增長, 被重複的圖像將會伸展(沒有空隙), 直到有足夠的空間來添加一個圖像。

`no-repeat`: 圖像不會被重複

/ 單值語法 /
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/ 雙值語法: 水平horizontal | 垂直vertical /
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

background-repeat: inherit;

- `background-position` 為每一個背景圖片設置初始位置。 這個位置是相對於由 background-origin 定義的位置圖層的。

background-position: 20px 30px; / 距左邊20px, 距上邊30px /
background-position: left top; / 左上 可以寫兩個定位的單詞（left right center top bottom）/
background-position: 50% 100%; / 相當於 center bottom /

- `background-size`設置背景圖片大小。圖片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同時縮放到元素的可用空間的尺寸。

background-size: 20px 20px; / 寬度高度都為20px，寬高相同時，可以只寫一個值 /
background-size: 100%；
background-size: cover; / 把背景圖片擴展至足夠大，以使圖像完全覆蓋區域，等比例擴展可能會切割圖片（顯示不完整） /
background-size: contain; / 等比例擴展至足夠大，圖片完整（可能會引起區域空白） /

/ 逗號分隔的多個值：設置多重背景 /
background-size: auto, auto; / 不同於background-size: auto auto /
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

效果：


![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6b191963d9b14db0be6c1b499eb913a6~tplv-k3u1fbpfcp-zoom-1.image)


> 注意：沒有被背景圖片覆蓋的背景區域仍然會顯示用`background-color`屬性設置的背景顏色。此外，如果背景圖片設置了透明或者半透明屬性，襯在背景圖片後面的背景色也會顯示出來。

- `background-origin`規定了指定背景圖片`background-image`屬性的原點位置的背景相對區域.

background-origin: padding-box; /（默認）渲染從padding 開始 /
background-origin: content-box; / 在內容裏渲染 /
background-origin: border-box; / 從邊框往裏渲染 /
background-origin: content-box, padding-box; / 多個背景 /

- `background-attachment`規定背景圖像的位置是在視口內固定，或者隨着包含它的區塊滾動。

background-attachment: scroll; / 默認 背景相對於元素本身固定， 而不是隨着它的內容滾動（對元素邊框是有效的） /
background-attachment: fixed; / 背景相對於視口固定 /
background-attachment: local; / 背景相對於元素的內容固定。如果一個元素擁有滾動機制，背景將會隨着元素的內容滾動， 並且背景的繪製區域和定位區域是相對於可滾動的區域而不是包含他們的邊框。 /

簡寫：

background: #f00 url('路徑') no-repeat center center;

## 浮動

float: left; / 左浮動 /
float: right; / 右浮動 /
float: none; / 不浮動（默認） /

> 浮動造成標籤的浮動，影響正常文檔流空間，脱離正常文檔流會對後面的元素產生影響，不會對前面的元素產生影響。
> **元素浮動後自動變成塊級元素**

## 清除浮動

- 給父元素加`height`

.parent {
height: 100px; / 固定高度，撐開空間 /
}

- 給父元素加`overflow: hidden`

- 在浮動元素後面加一個空的塊級元素 給它加樣式` clear: both`   `clear`(`left`清除左浮動 `right`清除右浮動  `both`清除左右浮動）

.clear {
clear: both | left | right;
}

- 給父元素加偽元素` ::after `

.parent::after {
content: "";
display: block;
clear: left;
}

## 定位

- `position`用於指定一個元素在文檔中的定位方式。`top`、`right`、`bottom` 和 `left` 屬性則決定了該元素的最終位置。

position: static; / 不定位 （默認正常文檔流） /
position: relative; / 相對定位 （相對於自身）/
position: absolute; / 絕對定位 (相對於外層定位元素定位，若沒有則相對於瀏覽器) /
position: fixed; / 固定定位（相對於瀏覽器） /
position: sticky; / 粘性定位 /

> 多個定位元素的覆蓋次序 通過`z-index`來判斷, `z-index`的值是一個沒有單位的數值
> 誰的`z-index`的值越大，誰就在最上層

## 其他

- 元素類型的轉換

display: block; / 任何元素轉換為塊級元素 /
display: inline-block; / 任何元素轉換為行內塊級元素（ie7及以下版本不支持） /
display: inline; / 任何元素轉換為行內元素 /
display: none; / 任何元素消失不見 /

- `box-sizing`  盒子大小（css3屬性）

box-sizing: content-box / 設置寬度為內容的寬度，加padding盒子會變大 /
box-sizing: border-box / 設置寬度為border之內的加padding不會增大盒子 /

- 內容溢出

overflow: visible; / (默認)可見 /
overflow: hidden; / 隱藏 /
overflow: scroll; / 出現滾動條 /
overflow: auto; / 瀏覽器自動處理 /

- `text-overflow` 文本溢出處理

text-overflow: clip; / 不顯示省略標記 /
text-overflow: ellipsis; / 顯示省略標記 /

- `white-space` 元素空白處理

white-space: normal; / 默認 /
white-space: nowrap; / 不換行 /
white-space: pre; / 空白被保留 /

/ 單行文本溢出顯示省略號 /
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

/ 多行文本溢出顯示省略號 /
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; / 超出2行，最後會顯示省略號 /
-webkit-box-orient: vertical;

> 一般處理文本溢出，三者搭配使用
> 新標籤：`<nobr></nobr>`強制不換行

- 元素消失（不可見）

display : none; / 元素在頁面不顯示 位置也不見了 /
visibility: hidden; / 元素在頁面不顯示 位置還在 /
opacity: 0; / 元素在頁面看不見 位置還在 /
z-index : -999999; / 元素在頁面也看不見，需要與position屬性配合使用 /

- 列表樣式

1. `list-style-type`  列表樣式類型
值：

list-style-type: disc; / 實心原點 /
list-style-type: none; / 去掉樣式 /
list-style-type: circle; / 空心圓 /
list-style-type: square; / 實心方形 /

1. `list-style-image`列表樣式圖片

list-style-image: url('test.png');

2. `list-style-position`   列表樣式的位置

list-style-position: outside; / 列表樣式在內容的外面 /
list-style-position: inside; / 使列表樣式在內容的裏面 /

*CSS內容太多了，就暫時先到這裏，有錯誤之處歡迎指出，非常感謝！！*

*如果覺得有用或者喜歡可以 **點贊 + 收藏**哦 *