如果本文章對你有用，可搜索關注本人的微信公眾號：爬界，上面會及時推送最近的博客文章，大家一起進步哦 ！

如果想要更好的閱讀體驗，可以進入 爬界博客網站 閱讀最新內容，網站地址：https://blog.climbtw.com，

本文主要涉及了 CSS介紹，基礎樣式，盒模型，定位機制，BFC，選擇器，CSS3 等內容，

1 介紹

參考檔案：W3school 官網 的 CSS 參考手冊，

• CSS：Cascading Style Sheets，層疊樣式表，
• 層疊樣式表 的優先級：高到低
  • !important 樣式
  • 行內樣式 / 行內樣式
  • 內部樣式表
  • 外部樣式表
  • 瀏覽器預設設定

1.1 CSS 基礎語法

CSS 規則：選擇器 + 一條 或 多條宣告，
CSS 注釋：/* … */

舉例：

p { color: red; font-size: 14px; }
p { color: #ff0000; }
p { color: #f00; }
p { color: rgb(255, 0, 0); }
p { color: rgb(100%, 0%, 0%); }
p { color: rgba(255, 0, 0, 0); }
p { font-family: 'sans serif'; }  /* 如果值為若干單詞，則要給 值 加 引號 */
p {					/* 可讀性 */
	text-align: center;
	color: black;
	font-family: arial;
}

注意的是：

• 最后一條規則是不需要加 分號 的，因為分號在英語中是一個 分隔符號，不是結束符號，然而，大多數有經驗的設計師會在每條宣告的末尾都加上 尾隨分號，這么做的好處是，當你從現有的規則中 增減宣告 時，會盡可能地 減少出錯 的可能性，
• 子元素從父元素 繼承 屬性，但是它并不總是按此方式作業，

2 CSS 基礎樣式

2.1 px，em，rem 單位的說明

2.2 CSS 字體（常用屬性 5個）

CSS 字體 常用屬性 包括 5個：font，font-style，font-weight，font-size，font-family

通用字體模板：

body {
  /* 
      Mac下默認 英文字體: 'Helvetica Neue', Helvetica (蘋果生態中最常用的西文字體, Helvetica Neue為 Helvetica 的改善版本)
      Win下默認 英文字體: Arial (Win上默認的無襯線西文字體)
      Mac下默認 中文字體: 'PingFang SC' (蘋方)
      Win下默認 中文字體: 'Hiragino Sans GB', 'Heiti SC', 'Microsoft YaHei' (冬青黑體, 黑體-簡, 微軟雅黑)
      Linux 下默認最佳簡體中文字體: 'WenQuanYi Micro Hei' (文泉驛微米黑)
      最后備選字體: sans-serif (無襯線體)
  */
  font-family: 'Helvetica Neue', Helvetica, Arial, 'PingFang SC',
  'Hiragino Sans GB', 'Heiti SC', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;

  /* 瀏覽器最小字體大小為: 16px */
  font-size: 16px;
}

相關屬性：

2.3 CSS 文本（常用屬性 14個）

CSS 文本 常用屬性 包括 14個：

• 普通屬性 12個：color，line-height，white-space，letter-spacing，word-spacing，direction，unicode-bidi，
  text-indent，text-align，vertical-align，text-transform，text-decoration，
• CSS3 屬性 2個： text-shadow，word-break

相關屬性：

2.4 CSS 背景（常用屬性 8個）

CSS 背景 常用屬性 包括 8個：

• 普通屬性 6個：background，background-color，background-image，background-repeat，background-attachment，background-position
• CSS3 屬性 2個：background-size，background-origin

需要注意的是：

• 背景 只會出現在 內容區域 上，

相關屬性：所有背景屬性都不能 繼承，

2.5 CSS 輪廓（常用屬性 4個）

CSS 輪廓 常用屬性 包括 4個：outline，outline-color，outline-style，outline-width

相關屬性：

2.6 CSS 鏈接：4 種狀態

鏈接的 4 種狀態，也稱 偽類選擇器：

• a:link：未被訪問 的鏈接，默認顏色為 藍色，
• a:visited：用戶 已訪問 的鏈接，默認顏色為 紫色，
• a:hover：滑鼠指標位于鏈接的 上方，默認顏色為 紅色，且帶有 下劃線 修飾，
• a:active：鏈接被 點擊的時刻，

需要注意的是：

• 如果同時設定鏈接 多個狀態 的樣式，則：
  • a:hover 必須位于 a:link 和 a:visited 之后，
  • a:active 必須位于 a:hover 之后，

相關屬性：

2.7 CSS 串列：修改 表項標志（常用屬性 4個）

無序串列 <ul>，有序串列 <ol>，它們的表項標志屬性 是 list-style，

CSS 串列 常用屬性 包括 4個：list-style，list-style-image，list-style-type，list-style-position

相關屬性：

2.8 CSS 表格（常用屬性 5個）

表格默認是 沒有邊框 的，

CSS 表格 常用屬性 包括 5個：border-collapse，border-spacing，empty-cells，caption-side，table-layout

相關屬性：

3 CSS 盒模型（Box Model），外邊距塌陷（常用屬性 4個）

CSS 盒模型：把 HTML 頁面中的元素看作是一個矩形的盒子，每個矩形都由 元素的內容，內邊距（padding），邊框（border），外邊距（margin）4 個部分組成，

常用盒模型 屬性 4個：

• 常用屬性 3個：border，padding，margin
• CSS3 屬性 1個：border-radius

需要注意的幾點：

• 在 CSS 中，width 和 height 指的是 內容區域 的寬度和高度，
  增加 內邊距、邊框 和 外邊距 不會影響 內容區域 的尺寸，但是會增加 元素框 的 總尺寸，

• 行內元素：
  內邊距 不會影響 行高 的計算，左右正常，左右 auto 不會居中，
  外邊距 的上下無效，左右正常不會合并，左右 auto 不會居中，
  舉例：如果一個行內元素，既有內邊距，又有背景，則在 視覺上 會 延伸到其他行，與其他內容重疊，

• 塊級元素：
  內邊距 正常，左右 auto 不會居中，
  外邊距，左右 auto 會居中，在垂直方向上會 合并，即 外邊距塌陷，合并規則：

  • 如果是上下相鄰：則 垂直外邊距 會取 較大值，
  • 如果是內外相鄰：如果父元素沒有 邊框 或 內邊距，則會發生 外邊距合并，垂直外邊距 會取 較大值，并作用于父元素上，子元素會緊貼父元素的邊緣，

  外邊距塌陷 解決方法：

  1. 給父元素 設定邊框，或 添加內邊距，
  2. 觸發 父元素的 BFC(塊級格式化背景關系)，如給父元素 添加屬性 overflow: auto;，

• 浮動元素：外邊距 不會合并，

• 盒模型屬性 使用優先級：width > padding > margin

覆寫 瀏覽器默認的盒模型樣式：

* {
  margin: 0;
  padding: 0;
}

相關屬性：

3.1 關于 水平，垂直居中 的小結

元素的 顯示模式，可以通過屬性 display 進行 自由轉換，

3.1.1 元素 顯示模式 轉換（常用屬性 2個）

常用 顯示模式 轉換屬性 2個：display，visibility，

元素的 3 種 顯示模式：

顯示模式 屬性：

3.2 盒模型 屬性（常用屬性 2個）

常用的 盒模型屬性 2個：

• CSS3 新增 2個：box-sizing，box-shadow

4 CSS 定位機制

CSS的 定位機制 有 3 種：標準流，浮動，定位，
浮動 和 定位 都會讓元素的 顯示模式 轉換為 行內塊 模式，

4.1 CSS 浮動

浮動：脫離 標準流，浮動元素可以 向左 或 向右 移動，直到它的 外邊緣 碰到 父元素邊緣 或另一個 浮動元素的邊緣為止，

需要注意的是：

• 浮動會找離它最近的 父元素 對齊，但是不會超出父元素的 內容區域，
• 相鄰浮動 的兩個元素之間是 沒有距離 的，而相鄰 的兩個 行內塊元素 之間是有距離的，而且不好清除，
• 浮動排列規則：前面的元素永遠在上方
  • 如果第一個元素不浮動，第二個元素浮動，則第二個元素會在第一個元素的下面進行浮動，
  • 如果第一個元素浮動，第二元素不浮動，則第一個元素會在第二個元素的上面進行浮動，
• 浮動元素下方的 文本 會 圍繞 浮動元素 進行顯示，如果想要取消 文本 圍繞效果，則給文本設定 清除浮動 屬性 clear，讓其左右不允許出現 浮動元素 即可，

4.1.1 清除浮動

清除浮動：讓 塊級元素 的 左右 不允許出現 浮動元素，
清除浮動的應用：

• 讓浮動元素 下方的文本，不再 圍繞 浮動元素 顯示，
  解決思路：在文本元素上添加 清除浮動屬性 即可，
• 避免 沒有設定高度 的父元素，因為子元素的浮動，而導致 高度為 0的問題，
  解決思路：在浮動元素的下面添加一個 塊級空標簽，然后設定 清除浮動屬性 即可，
  具體解決方案：
  1. 直接在 HTML 頁面 中添加 塊級空標簽：
     缺點是：添加無意義的標簽，結構化較差，

     <div style="clear: both;"></div>
     

  2. 通過 CSS 的 偽元素選擇器，在 父元素的尾部 添加 塊級空標簽：

     .father:after {
     	content: '';
     	display: block;
     	clear: both;
     }
     

  3. 觸發 父元素的 BFC(塊級格式化背景關系)，如給父元素 添加屬性 overflow: auto;，

4.2 CSS 定位

定位：脫離 標準流，讓元素 具體定位 到某一個位置，

需要注意的幾點：

• 當子元素需要設定 絕對定位 absolute 時，一般會給父元素設定 相對定位 relative，防止 子元素 脫離 父元素，

5 BFC（Block formatting context）塊級格式化背景關系

元素的 BFC 特性：使元素 成為一個 獨立的渲染區域，區域內的操作 不會影響 外部的元素，

應用場景：

• 觸發父元素的 BFC 特性，解決父元素無邊框 或 內邊距時，同子元素產生的 外邊距塌陷 問題，
• 觸發父元素的 BFC 特性，解決子元素浮動，父元素高度為 0 的問題，

BFC 特性的 特點：

• 在 BFC區域 / 父元素 中：
  • 子元素的 外邊距 是相對于 父元素的邊緣 而言的，無論父元素有無 邊框 或 內邊距，（即 不存在外邊距塌陷）
  • 父元素的高度計算，會包括 浮動 和 定位的 子元素的高度，
• 在 BFC區域 / 父元素 外：
  • 父元素的 外邊距 與 相鄰元素的 外邊距 不會發生重疊，（即 BFC區域的外邊距不會發生重疊）
  • 父元素 不會與 相鄰浮動元素 發生重疊，

BFC 特性的 觸發規則：

• 前提條件：元素的顯示模式必須為，block，table，list-item 之一，
• 觸發條件：給元素 添加下列屬性之一
  • overflow 屬性不為 visible，
  • float 屬性不為 none，
  • position 屬性為 absolute 或 fixed，
  • display 屬性為 inline-block，table-cell，table-caption，flex，inline-flex，

相關屬性：

5.1 單行文本，多行文本 溢位隱藏 的處理方法

單行文本溢位隱藏：

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行文本溢位隱藏：

div {
  height: 30px;
  overflow: hidden;
  position: relative;
}

div:after {
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0px 10px;
  background-color: #FFF; /* 默認背景顏色為 透明 */
}

6 CSS 選擇器

前面 提到的 選擇器 有：CSS 鏈接的 偽類選擇器，和 清除浮動的 偽元素選擇器，

6.1 基本選擇器

• 標簽選擇器：標簽名，可表示多個標簽
• 類選擇器：.類名，可表示多個標簽
• id 選擇器：#id
• 通配符選擇器：*，表示所有標簽
• 偽類選擇器：
  • 鏈接 偽類選擇器：
    a:link：未被訪問 的鏈接，默認顏色為 藍色，
    a:visited：用戶 已訪問 的鏈接，默認顏色為 紫色，
    a:hover：滑鼠指標位于鏈接的 上方，默認顏色為 紅色，且帶有 下劃線 修飾，
    a:active：鏈接被 點擊的時刻，
  • 位置 偽類選擇器：
    :first-child：選取父元素的首個子元素，
    :last-child：選取父元素的最后一個子元素，
    :nth-child(n)：匹配父元素的第 n 個子元素，n 的值包括：數字，even（偶數），odd（奇數），帶 n 的運算式（n 取值 0，1…）
    :nth-last-child(n)：同上，但是從最后一個子元素開始計數，
  • 目標 偽類選擇器：單獨使用
    :target：選取當前活躍的元素，如，被選中的錨，
  • 其他 偽類選擇器：
    :focus：獲得 鍵盤焦點的元素，
• 偽元素選擇器：
  E:first-letter：選取文本的第一個單詞 或 字，
  E:first-line：選取文本的第一行，
  E:selection：可以指定被選中文本的樣式，
  E:before：在元素 內部 的 開始位置 創建一個元素，該元素為 行內元素，必須結合 content 屬性使用，
  content 屬性指定元素的內容，盡量不要為空，防止舊版本瀏覽器有空隙，如 Firefox 7.0 之前的版本會生成 空格，
  E:after：同上，在元素 內部 的 結束位置 創建一個元素，

注意：新版本瀏覽器里 偽元素選擇器 的識別符號為 ::，舊版本為 :，新版本瀏覽器遇到 : 會自動轉換成 ::，
為了兼容性，統一使用 :，

6.2 復合選擇器

• 多類選擇器：類名.類名，表示同時含有多個類名的標簽，可表示多個標簽
• 交集選擇器：標簽名.類名，可表示多個標簽
• 并集選擇器：選擇器，選擇器，可表示多個標簽
• 后代選擇器：選擇器 選擇器，可表示多個標簽
• 子元素選擇器：選擇器 > 選擇器，可表示多個標簽
• 兄弟選擇器：選擇器 + 選擇器，選擇 相鄰 的標簽，，可表示多個標簽
• 屬性選擇器：標簽名[屬性=屬性值]，可表示多個標簽
  示例：
  E[attr]：存在attr屬性的元素，
  E[attr=val]：屬性值 等于 val 的元素，
  E[attr*=val]：屬性值 包含 val 字符并且在 任意位置 的元素，
  E[attr^=val]：屬性值 包含 val 字符并且在 開始位置 的元素，
  E[attr$=val]：屬性值 包含 val 字符并且在 結束位置 的元素，

6.3 滑鼠經過，給元素添加 透明蒙層（偽元素選擇器的 應用）

#div {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position: relative;
}

#div:hover:after {
  content: "蒙層的文本內容";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.8);
}

7 CSS 三大特性

CSS 三大特性：層疊性，繼承性，優先級，
層疊性：如果出現樣式沖突，按照CSS 書寫順序，以 最后 的樣式為準，
繼承性：子標簽 會繼承 父標簽的某些樣式，如 字號，文本顏色 等文字類的屬性，
優先級：當2個 或 多個 規則同時應用到 一個元素 上時，需要考慮 權重 問題，

7.1 CSS 權重的計算規則

需要注意的問題：

• 繼承樣式的權重為 0，
• 行內樣式 的權重大于所有的 選擇器，
• !important 命令表示最大的優先級，
• 權重相同時，采取層疊性，

計算規則：

用一個 四位的數串 來表示 權重，每個數代表一個級別，從左到右，級別依次降低，級別之間不存在進位，
最后的權重值 由每個選擇器的 貢獻值疊加 得到，

8 其他屬性補充

8.1 CSS 尺寸

8.2 其他屬性

9 精靈圖技術

本質：將一個頁面涉及到的所有零星 背景影像 集中到一張大圖中去，然后將大圖用于 網頁，當用戶訪問該頁面時，只需向服務器發送一次請求，
使用：直接使用 background-position 等屬性來 精確定位 需要的背景部分即可，

10 滑動門技術

目的：使 各種特殊形狀的背景 能夠 自適應 元素中 文本內容 的多少，而自由的拉伸滑動，
關鍵技術：一張寬度足夠長的背景圖，同時設定在 鏈接 和 鏈接文本 的背景上，一左一右拉伸，

<li>
  <a href="#">
    <span>導航欄內容</span>
  </a>
<li>

a {
  display: inline-block;
  height: 33px;
  background: url(images/ao.png) no-repeat;
  color: #FFF;
  text-decoration: none;
  line-height: 33px;
}

a span {
  display: inline-block;
  height: 33px;
  background: url(images/ao.png) no-repeat right;
}

11 CSS3 新特性

11.1 CSS3 字體：使用自定義字體

@font-face {
	font-family: myFirstFont;
	src: url('Sansation_Light.ttf'),
     	url('Sansation_Light.eot'); /* IE9+ */
}

div {
	font-family:myFirstFont;
}

11.2 CSS3 文本：文本陰影，自動換行模式，多列顯示

相關屬性 text-shadow，word-wrap 在 CSS 文本 中已經歸納，

11.2.1 多列顯示

11.3 CSS3 背景：尺寸，區域

相關屬性 background-size，background-origin 在 CSS 背景 中已經歸納，

11.4 CSS3 邊框：圓角，邊框陰影，盒模型型別

相關屬性 border-radius，box-shadow，box-sizing 在 CSS 盒模型 中已經歸納，

11.5 CSS3 過渡

需要注意的是：

• 過渡屬性 要寫在 需要過渡的元素 里， 而不是 元素變化后的樣式 里，
• 支持 多組 過渡屬性，用 逗號 分隔，

11.6 CSS3 2D 變換

多組變形，用空格隔開，

11.7 CSS3 3D 變換

多組變形，用空格隔開，

11.7.1 旋轉輪播圖：3D 變換 示例

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
		<title>測驗</title>
		<style>
			body {
				perspective: 1000px;
			}
			section {
				width: 300px;
				height: 200px;
				margin: 100px auto;
				background: url(h.png) no-repeat;
				background-size: cover;
				position: relative;
				transform-style: preserve-3d; 
				transition: all 5s linear;
			}
			section:hover {
				transform: rotateY(360deg);
			}
			section div {
				width: 100%;
				height: 100%;
				background: url(h.png) no-repeat;
				background-size: cover;
				position: absolute;
				top: 0;
				left: 0;
			}
			section div:nth-child(1) {
				transform: rotateY(0deg) translateZ(400px);
			}
			section div:nth-child(2) {
				transform: rotateY(60deg) translateZ(400px);
			}
			section div:nth-child(3) {
				transform: rotateY(120deg) translateZ(400px);
			}
			section div:nth-child(4) {
				transform: rotateY(180deg) translateZ(400px);
			}
			section div:nth-child(5) {
				transform: rotateY(240deg) translateZ(400px);
			}
			section div:nth-child(6) {
				transform: rotateY(300deg) translateZ(400px);
			}
		</style>
	</head>

	<body>
		<section>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</section>
	</body>
</html>

11.8 CSS3 影片

11.8.1 影片組 的設定

@keyframes 影片名稱 {
	from {
		// 變換操作
	}
	to {
		// 變換操作
	}
}

/* 或 */

@keyframes 影片名稱 {
	0% {
		// 變換操作
	}
	50% {
		// 變換操作
	}
	100% {
		// 變換操作
	}
}

11.9 CSS3 顯示模式 flex：伸縮布局模式（Flex布局）

Flex布局 核心：父元素設定 display: flex;，子元素設定所占份數 flex:1;，如果不設定，則不參與伸縮分配，
注意：Flex 布局的 語法規范 發生了很多變化，瀏覽器支持不一致，所以 使用的不多，

父元素 部分相關屬性：

子元素 相關屬性：

12 瀏覽器 屬性前綴

解決某些 屬性 的 兼容性問題，