本篇文章適合基礎薄弱想籠統學習的童靴們，因為我就是從零自學開始的，把我學習中常用到的知識點整理一下以后常常溫故一下。
案例地址: https://github.com/pengjunshan/WebPJS/HtmlCss
其它Web文章
HtmlCss基礎學習第一章
CSS浮動的使用和解決浮動的五種方法
CSS定位relative、absolute、fixed使用總結
原生開發WebApi知識點總結
開發中常用jQuery知識點總結
C3動畫+H5+Flex布局使用總結
ES6常用知識總結
Vue學習知識總結
開發環境到生產環境配置webpack
待續......
本編文章會講到的知識點
- 引入CSS樣式表
- 標簽顯示模式
- CSS復合選擇器
- CSS 背景(background)
- CSS 三大特性
- 盒子模型
引入CSS樣式表
行內式（內聯樣式）
通過 標簽style屬性 設置樣式。
語法中，style是標簽的屬性，屬性和值的書寫規范與CSS相同，行內式只對 其所在的標簽 及嵌套在其中的子標簽起作用。
<標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標簽名>
內嵌式（內部樣式表）
內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標簽中，并且用style標簽定義。語法中，style標簽一般位于head標簽中title標簽之后，也可以把他放在HTML文檔的任何地方。
<head>
<style type="text/CSS">
選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>
外鏈式（外部樣式表）
鏈入式是將所有的樣式放在一個或多個以.CSS為擴展名的外部樣式表文件中，通過link標簽將外部樣式表文件鏈接到HTML文檔中
<head>
<link href="CSS文件的路徑" type="text/CSS" rel="stylesheet" />
</head>
三種樣式表總結
| 樣式表 | 優點 | 缺點 | 使用情況 | 控制范圍 |
|---|---|---|---|---|
| 行內式 | 書寫方便 權重高 | 沒有實現樣式和結構相分離 | 較少 | 控制一個標簽（少） |
| 內嵌式 | 一定程度的實現了 結構樣式分離 | 沒有徹底分離 | 較多 | 控制一個頁面（中） |
| 外鏈式 | 完全實現結構樣式分離 | 需要引入 | 最多，強烈推薦 | 可控制多個頁面（多） |
CSS樣式表案例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.inline-p {
font-size: 30px;
height: 100px;
background-color: rgb(202, 184, 21)
}
</style>
</head>
<body>
<p style="font-size: 30px; height: 100px; background-color: blue">我是行內式css</p>
<p class="inline-p">我是內嵌式css</p>
<p class="outside-p">我是外鏈式css</p>
</body>
</html>
標簽顯示模式（display）
在html中，元素主要分為行內元素和塊級元素、行內塊元素。
塊級元素(block-level)
每個塊元素通常都會獨自占據一整行，可設寬度、高度、對齊等，常用于網頁布局結構搭建。
常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標簽是最典型的塊元素。
塊級元素的特點：
- 獨占一整行
- 可設寬高，行高、外邊距以及內邊距都可設。
- 寬度默認撐滿父級
- 可以容納任何其他標簽
行內元素(inline-level)
行內元素（內聯元素）由內容撐開，一般不可以設置寬度、高度、對齊等屬性，常用于控制頁面中文本的樣式。
常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，
其中<span>標簽最典型的行內元素。
行內元素的特點：
- 一行排多個。
- 不能設寬高，但水平的padding和margin可以設置，垂直的無效。
- 被內容撐開
- 行內元素只能容納文本或則其他行內元素。（a特殊）
注意：
- 只有 文字才 能組成段落，因此 p 里面不能放塊級元素，
同理還有這些標簽h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標簽，里面不能放其他塊級元素。 - 鏈接里面不能再放鏈接。
#######行內塊元素（inline-block）
在行內元素中有幾個特殊的標簽——<img>、<input>、<td>，
可以對它們設置寬高和對齊屬性，有些資料可能會稱它們為行內塊元素。
行內塊元素的特點：
- 一行多個
- 默認寬高內容撐開
- 寬高，外邊距以及內邊距都可設
三種顯示模式轉換
- 塊 => 行內 display: inline;
- 行內 => 塊 display: block;
- 行內 => 行內塊 display: inline-block;
標簽顯示模式案例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
height: 50px;
width: 200px;
background-color: pink;
/* display:inline 轉成 行內元素*/
display: inline;
}
.sp-block {
width: 200px;
height: 50px;
background-color: rgb(23, 33, 179);
/* display:inline-block 可以轉成 行內塊元素 */
display: inline-block;
}
.sp-inline{
height: 50px;
width: 100%;
background-color: rgb(155, 22, 28);
/* display:block 轉成 塊級元素 */
display: block;
}
</style>
</head>
<body>
<div>我是div</div>
<span class="sp-block">我是塊級span</span>
<span class="sp-inline">我是行內span</span>
</body>
</html>
CSS復合選擇器
復合選擇器是由 兩個 或 多個基礎選擇器 組合而成的,目的是為了可以更準確的選擇目標元素。
交集選擇器
交集選擇器由兩個選擇器構成，兩個選擇器之間不能有空格。
交集選擇器 是 并且的意思，即...又...的意思。
必須兩個條件同時滿足，才能作用。
如果有 標簽選擇器 要放在最前面！
/* 類名既有tall 又有mm */
.tall.mm {
background-color: red;
}
/* 首先是p標簽 并且類名是sg */
p.sg{
color: red
}
并集選擇器
并集選擇器（CSS分組選擇器），逗號連接。
任何形式的選擇器（包括標簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。
如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。
并集選擇器的意思， 就是說，只要逗號隔開的，所有選擇器都會執行后面樣式。
/*
* p標簽選擇器 zxy類選擇器 gfc ID選擇器，
* 這三個選擇器都會執行顏色為紅色
*/
p, .zxy, #gfc{
color: red;
}
后代選擇器
后代選擇器，用來選擇元素的后代。.father .son。
寫法就是把 外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔。
子孫后代都可以選中。
/* ul下子孫li都會變紅 */
ul li {
color: red;
}
/* ul下類名為other的li變黑 */
ul li .other{
color: #000000;
}
子元素選擇器
子元素選擇器，只能 作用于 子元素。 父 > 子
規范：> 左右兩側各保留一個空格。
白話： 這里的子 指的是 親兒子 不包含孫子 重孫子之類。
/*
* box下子一級（兒子）的p標簽才會變藍色，
* 一級以下的都不會變（孫子）
*/
.box > p {
color: blue;
}
屬性選擇器
屬性選擇器可以根據元素的屬性及屬性值來選擇元素。
/* 選擇器[屬性名] : 只要包含該屬性即可被選中; */
li[type] {
color: blue;
}
/*
選擇器[屬性名="屬性值"]：
屬性值必須完全相同才會被選中 */
li[type="meat"] {
color: red;
}
/*
選擇器[屬性名*="屬性值"]
只要包含該屬性值就可以被選中
*/
li[type*="hot"] {
color: green;
}
/*
選擇器[屬性名^="val"]
當該元素屬性值以這個 val 開頭時作用
^: 表示以 .... 開頭 ;
*/
li[type^="dr"] {
color: blue;
}
/*
$：表示以 ... 結尾
選擇器[屬性名$="val"]
當該元素屬性值 以 val 結尾時起作用
*/
li[type$="t"] {
color: red;
}
/*
找到 type,對屬性值進行分析，按照空格分隔匹配，
必須與分隔出來的屬性值完全相等，才起作用
*/
li[type~="hot"] {
color: blue;
}
/* 跟 * 區別， *是只要包含，就能生效，不管有沒空格，不管什么位置 */
/*
推測：
先找 price，根據空格分隔所有的屬性值,
中間只要有類似于 very 和 very- 就可以被選中
可以選中 very very-...
這是不對的
結果：
E[屬性|="val"] 必須以 val 開頭
1. 只是 val 可以被選中
2. val-...
*/
偽元素選擇器
- E::first-letter文本的第一個單詞或字（如中文、日文、韓文等）
- E::first-line 文本第一行；
- E::selection 可改變選中文本的樣式；
- E::before和E::after
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*
選擇器::first-letter
選中段落中的第一個字
*/
p::first-letter {
color: red;
font-size: 50px;
font-weight: bolder;
}
/*
選擇器::first-line
選中段落中的第一行
*/
p::first-line {
color: green;
}
/*
選擇器::selection
控制選中內容的樣式
*/
p::selection {
background-color: rgb(236, 19, 63);
color: blue
}
/*
選擇器::before
可以給當前元素最前面 加 內容
最關鍵屬性 content 不能少
*/
p::before {
content: "￥";
height: 50px;
width: 50px;
display: inline-block;
background-color: blue;
background-image: url(08.gif);
}
/*
選擇器::after
可以給當前元素 最后面 添加 內容
最關鍵屬性 content 不能少
行內元素的效果
*/
p::after {
content: "------你個損塞";
}
</style>
</head>
<body>
<p>
英語詞匯，一般指即興的、隨性的隨意的發揮，例如HIPHOP說唱中的freestyle就是即興說唱的意思。2017年6月，因吳亦凡屢次提起而火遍網絡。 吳亦凡爆紅的freestyle，其實是嘻哈選手的基本功，也是《中國有嘻哈》節目中的一個環節名稱。 發展經過編輯 從吳亦凡口里說出來，freestyle就變得很魔性了，因為他見人都會問一句，你有freestyle嗎？兩個選手難以選擇，還是這句，“你們有freestyle嗎”？
</p>
</body>
</html>
CSS 背景(background)
CSS 可以添加背景顏色和背景圖片，以及來進行圖片設置。
- 背景顏色: background-color
- 背景圖片地址: background-image
- 是否平鋪: background-repeat
- 背景位置: background-position
- 背景固定還是滾動: background-attachment
背景圖片(image)
語法：background-image : none | url (url)
參數：
none : 無背景圖（默認的）
url : 使用絕對或相對地址指定背景圖像
圖片覆蓋不到地地方都會被背景色填充。
背景平鋪（repeat）
語法：background-repeat : repeat | no-repeat | repeat-x | repeat-y
默認就是 repeat
參數：
repeat : 背景圖像在縱向和橫向上平鋪（默認的）
no-repeat : 背景圖像不平鋪
repeat-x : 背景圖像在橫向上平鋪
repeat-y : 背景圖像在縱向平鋪
背景位置(position)
語法：
- background-position : length || length
- background-position : position || position
參數：
length : 百分數 | 由浮點數字和單位標識符組成的長度值。請參閱長度單位
position : top | center | bottom | left | center | right
說明：
設置或檢索對象的背景圖像位置。必須先指定background-image屬性。默認值為：(0% 0%)。
如果只指定了一個值，該值將用于橫坐標。縱坐標將默認為50%。第二個值將用于縱坐標。
注意：
- position 后面是x坐標和y坐標。 可以使用方位名詞或者 精確單位。
- 如果和精確單位和方位名字混合使用，則必須是x坐標在前，y坐標后面。比如 background-position: 15px top; 則 15px 一定是 x坐標 top是 y坐標。
實際工作用的最多的，就是背景圖片居中對齊了。
background-position: center center;
背景附著
語法：background-attachment : scroll | fixed
參數：
scroll : 背景圖像是隨對象內容滾動
fixed : 背景圖像固定
背景簡寫
background 屬性值的書寫順序，沒有強制標準的。
但為了可讀性，建議大家如下寫：
background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
背景透明
CSS3支持背景半透明的寫法語法格式是:
background: rgba(0,0,0,0.3);
最后一個參數是alpha 透明度 取值范圍 0~1之間
注意： 背景半透明是指盒子背景半透明， 盒子里面的內容不受影響。
同樣， 可以給 文字和邊框透明 都是 rgba 的格式來寫。
color:rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
背景縮放
通過background-size設置背景圖片的尺寸，就像我們設置img的尺寸一樣，在移動Web開發中做屏幕適配應用非常廣泛。
其參數設置如下：
- 可以設置長度單位(px) 或 百分比（設置百分比時，參照盒子的寬高）
- 設置為cover時，必須填滿。覆蓋整個父容器，不會失去原來的比例，按照原來比例撐滿整個父容器
- 設置為contain, 必須完整。必須保證原有比例的前提，進行盡可能的放大。默認會居中
div {
height: 400px;
background: url("0 8.gif") no-repeat center top;
background-color: rgba(0,0,0, 0.7);
/* background-size: 100% 400px; */
/*覆蓋整個父容器，不會失去原來的比例，按照原來比例撐滿整個父容器*/
/* background-size: cover; */
/* 必須保證原有比例的前提，進行盡可能的放大。默認會居中 */
/* background-size: contain; */
}
多背景
以逗號分隔可以設置多背景，可用于自適應布局
background-image: url('images/a.jpg'), url('images/b.png');
CSS 背景(background)案例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
height: 1000px;
width: 100%;
background-color: pink;
background-image: url("0 8.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
/*background 連寫*/
background: pink url("0 8.gif") no-repeat fixed center center;
/* 背景透明 */
background: rgba(0,0,0, 0.5) url("0 8.gif") no-repeat fixed center center;
/* 設置圖片大小 */
background-size: contain;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
CSS 三大特性
CSS 三大特性：層疊性 繼承性 優先級
層疊性
層疊性 指 CSS樣式沖突產生的 疊加現象,出現樣式沖突，才會觸發層疊。
- 樣式沖突，就近原則。
- 樣式不沖突，不會層疊
繼承性
繼承性：子標簽 繼承 父標簽的某些樣式，如文本顏色和字號等。恰當地使用繼承可以簡化代碼，降低CSS樣式的復雜性。
哪些樣式可繼承？: text-，font-，line-開頭，以及color，可繼承
CSS優先級
兩個或更多規則應用于同一元素上，會出現優先級問題。
考慮權重時，應注意：
- 繼承權重為0。
- 行內優先。大于所有選擇器，小于!important
- 權重相同，就近原則。
- !important 最大優先級
CSS權重計算公式(0, 0, 0, 0) :
- !important 1,0,0,0
- id 選擇器 0,1,0,0
- 類選擇器,偽元素,偽類選擇器 0,0,1,0
- 標簽選擇器 0,0,0,1
- 行內樣式不參與權重計算，比選擇器大，比 !important小
發生樣式沖突時，比較權重:
先比第一個：誰大，優先級就高
第一個一樣，就比第二個：誰大，優先級就高
第二個一樣，就比第三個：誰大，優先級就高
第三個一樣，就比第四個：誰大，優先級就高
比完發現都一樣，權重相同，就近原則（層疊性）
注意：
- 繼承的 權重是 0。
- 基本優先級： !important > 行內樣式 > id選擇器 > 類選擇器 > 標簽選擇器 > 通配符選擇器 > 繼承
- 權重相同，就近原則
盒子模型
盒子模型就是把 頁面元素 看作是一個矩形的盒子。
每個盒子 由 內容(content)、內邊距（padding）、邊框（border）和外邊距（margin）四大部分組成。
每一個盒子都由四部分組成: content padding border margin。
盒子邊框（border）
設置盒子在外層的一層皮，可以設置皮的寬度、樣式、顏色。
語法：
border : border-width || border-style || border-color
border: 1px solid red;
border-style 邊框樣式常用屬性：
- none：沒有邊框
- solid：單實線(常用)
- dashed：虛線
- dotted：點線
- double：雙實線
盒子邊框寫法總結:
上邊框:
border-top-style 樣式
border-top-width 寬度
border-top-color 顏色
連寫：
border-top: 寬度 樣式 顏色
border-top: 1px solid blue;
下邊框 border-bottom-...
左邊框 border-left- ...
右邊框 border-right- ...
合并邊框border-collapse：
當邊框重疊時，會增加邊框的寬度、顏色重度。可以使用border-collapse屬性合并邊框。
border-collapse:collapse; //表示邊框合并在一起。
圓角邊框
語法：
border-radius: 左上 右上 右下 左下;
border-radius: **px;
border-radius: **%;
- 可以分別為左上 右上 右下 左下設置圓角。
- 可以簡寫一次性設置四條邊。
- 可以寫百分比。
內邊距（padding）
padding: 內邊距。 指 邊框與內容之間的距離。
- padding-top:上內邊距
- padding-right:右內邊距
- padding-bottom:下內邊距
- padding-left:左內邊距
- padding: 上 右 下 左;
外邊距（margin）
margin屬性用于設置外邊距。設置外邊距會在元素之間創建“空白”， 這段空白通常不能放置其他內容。
- margin-top: 上外邊距
- margin-right: 右外邊距
- margin-bottom:下外邊距
- margin-left: 左外邊距
- margin:上 右 下 左;
注意：
給行內元素 設置 垂直外邊距margin 會無效
所以不要給 行內 設 margin-top 和 margin-bottom
給行內元素 設置 垂直 內邊距 padding 也會有問題
所以不要給 行內 設 padding-top 和 padding-bottom
如果想設置上下內外邊距，先轉為塊級元素。
外邊距實現盒子居中
左右外邊距設 auto, 實現盒子水平居中
需要滿足兩個條件：
- 必須是塊級元素。
- 設了寬度（width）
.header{ width:660px; margin:0 auto;}
圖片在盒子中居中的兩種方式
- 方式一：父盒子，設置 text-align: center
- 方式二：轉成塊, display:block; 設寬 , margin: 0 auto;
文字盒子居中區別，圖片和背景區別
- 文字內容居中是 text-align: center
- 盒子居中 左右margin 改為 auto （塊級元素，要有寬度）
- 插入img，用的最多。比如產品展示類
- background-image 小圖標或者 超大背景可以用到
清除元素的默認內外邊距
為更方便控制網頁元素，可清除默認內外邊距：
* {
padding:0; /* 清除內邊距 */
margin:0; /* 清除外邊距 */
}
外邊距合并
margin定義 塊元素 垂直外邊距時，很可能出現 外邊距合并。
相鄰塊元素垂直外邊距的合并:
上下相鄰兩個塊元素相遇，若上面設margin-bottom，下面設 margin-top。
他們垂直間距不是 margin-bottom 與 margin-top 之和，而是較大者。
嵌套塊元素垂直外邊距的合并:
嵌套關系的塊元素，父元素 margin-top 可能會與子元素的 margin-top 合并，合并成較大者。
且子元素并沒和父元素 margin開。
解決方案：
- 為父元素定義 1px 的上邊框。
- 為父元素定義 1px 上內邊距。
- 父元素添加 overflow:hidden （觸發BFC 后再會講）。
- 浮動，定位（觸發BFC 后再會講）。
盒子實際寬度和高度
在頁面中占據的空間 margin + border + padding + content
注意：
1、width 和 height 對塊級有效，對行內無效（ img 標簽和 input除外，因為他們是行內塊）。
2、計算總高度時，應考慮 垂直外邊距 合并問題。
3、如果盒子沒給寬度, 繼承父親的寬度，則 padding 一般不會影響盒子大小。
