概述
這篇文章是關于 Web 前端 CSS3 的基礎語法與盒模型的講解。包括 CSS3 層疊性及處理沖突規則、偽元素和新增偽類元素、屬性選擇器等。還介紹了文本與字體屬性，如段落和行相關屬性、字體文本屬性。最后闡述了盒子模型，如元素隱藏、行內與塊元素轉換、盒子構成及相關屬性等。
css3 層疊樣式表
css全名叫做層疊樣式表，層疊性是它很重要的性質，多個選擇器可以同時作用于同一個標簽，效果疊加。
css有嚴密的處理沖突的規則:ID權重 > Class權重 > 標簽權重，復雜選擇器可以通過個數的形式，計算權重：
| 項目 | 權重值 |
|---|---|
| ID | 2 |
| Class | 1 |
| Tag | 0 |
偽元素
1、::before 和::after
在被選元素的內容前面或后面插入額外的內容，常用來添加一些裝飾性的元素或實現特定的布局效果。
p::before {content: "?";color: blue;margin-right: 5px;
}p::after {content: "?";color: green;margin-left: 5px;
}
2、::first-letter
用于選擇并設置文本塊中第一個字母的樣式，可實現首字下沉等效果。
p::first-letter {font-size: 2em;color: red;float: left;margin-right: 5px;
}
3、::first-line
用來選擇并設置文本塊中第一行的樣式，比如可以改變第一行文本的字體、顏色、背景等。
p::first-line {font-weight: bold;color: purple;
}
4、::selection
用于設置用戶選中頁面元素時的樣式，包括文字選中時的背景色和文字顏色等。
p::selection {background-color: yellow;color: black;
}
5、::placeholder
用于設置表單輸入框中占位文本的樣式，可調整占位文本的顏色、字體等。
input::placeholder {color: gray;font-style: italic;
}
6、::marker
主要用于設置列表項標記（如項目符號或數字）的樣式。
ul li::marker {color: red;font-size: 1.2em;
}
新增偽類元素
1、:empty 選擇空標簽
2、:focus 選擇當前獲得焦點的表單元素
3、:enabled 和 :disabled 分別匹配可使用（啟用）和不可使用（禁用）的表單元素。
4、:checked 匹配被選中的表單元素，如復選框、單選框。
5、root 選擇根元素，即<html>標簽
屬性選擇器
| 舉例 | 意義 |
|---|---|
| img[alt] | 選擇有alt屬性的img標簽 |
| img[alt=“故宮”] | 選擇有alt屬性是故宮的img標簽 |
| img[alt^=“北京”] | 選擇有alt屬性是北京開頭的img標簽 |
| img[alt$=“夜景”] | 選擇有alt屬性是夜景結尾的img標簽 |
| img[alt*=“美”] | 選擇有alt屬性中含有美的img標簽 |
| img[alt~=“手機拍攝”] | 選擇有alt屬性中有空格隔開的手機拍攝字樣的img標簽 |
| img[alt | =“參賽作品”] |
序號選擇器
| 舉例 | 意義 |
|---|---|
| :first-child | 選擇父元素的第一個子元素 |
| :last-child | 選擇父元素的最后一個子元素 |
| :nth-child(n) | 第n個子元素 |
| :nth-of-type(n) | 選擇父元素下指定類型的第n個元素，只針對指定類型的元素進行計數和選擇，而不會考慮其他類型的元素 |
| :nth-last-child(n)] | 從父元素的最后一個子元素開始計數，選擇第n個元素 |
| :nth-last-of-type(n) | 從父元素的最后一個指定類型的子元素開始計數，選擇第n個元素 |
元素關系選擇器
| 名稱 | 舉例 | 意義 |
|---|---|---|
| 子選擇器 | div > p | div的子標簽p |
| 相鄰兄弟選擇器 | img+p | 圖片后面緊跟著的將被選中 |
| 通用兄弟選擇器 | p~span | p元素之后的所有同層級span元素 |
文本與字體屬性
文本相關的屬性普遍具有繼承性，只需要給祖先標簽設置，即可在后代所有標簽中生效。因為文字相關屬性有繼承性，所以通常會設置body標簽的字號、顏色、行高等，這樣就能當做整個網頁的默認樣式了。
繼承性有一個重要的原則：就近原則，在繼承的情況下，選擇器權重計算失效，而是就近原則。
段落和行相關屬性
1、text-indent
設置段落首行的縮進,可以使用長度值（如px、em、rem等）或百分比來指定縮進量。
p { text-indent: 2em; }
2、line-height
設置段落行與行之間的垂直間距，即行高。可以是數字、長度值或百分比。數字表示相對于字體大小的倍數；長度值直接指定行高的具體尺寸；百分比是相對于字體大小的比例。
p { line-height: 1.5; }
3、text-align
設置段落文本的水平對齊方式,left（左對齊）、right（右對齊）、center（居中對齊）、justify（兩端對齊）等。
p { text-align: center; }
4、letter-spacing
設置字符之間的水平間距,長度值，正值會增加字符間距，負值會減小字符間距。
p { letter-spacing: 2px; }
5、word-spacing
設置單詞之間的水平間距，長度值，用于調整單詞之間的間隔距離。
p { word-spacing: 5px; }
字體文本屬性
1、font-family
指定文本使用的字體族。可以設置多個字體，按優先級排列，瀏覽器會依次嘗試使用這些字體，直到找到可用的字體。
p {font-family: "微軟雅黑", Arial, sans-serif;
}
2、font-size
設置字體的大小。可以使用多種單位，如 px（像素）、em 、rem、% 等，網頁文字正文字號通常是16px，瀏覽器最小支持10px字號。
3. font-weight
設置字體的粗細程度。常見取值有 normal（正常粗細）、bold（粗體），還可以使用數字值，范圍從 100 - 900，數字越大字體越粗。
strong {font-weight: bold;
}
span {font-weight: 600;
}
4、font-style
設置字體的樣式，主要用于指定文本是否為斜體。取值有 normal（正常樣式）、italic（斜體）。
5、text-decoration
text-decoration屬性用于設置文本的修飾線外觀的(下劃線、刪除線)
p.red-underline {text-decoration-line: underline;text-decoration-color: red;
}
盒子模型
在 CSS3 中，有多種方法可以隱藏元素，每種方法都有其特點和適用場景：
元素的隱藏
1、display
該屬性值會讓元素完全從文檔流中移除，就好像這個元素在 HTML 文檔中不存在一樣。它不會占據頁面的空間，也不會響應任何用戶交互事件。
.hidden-element {display: none;
}
2、visibility
元素雖然在頁面上不可見，但它仍然占據原來的空間，并且保留其布局位置。也就是說，它會影響頁面的布局，但不會顯示內容，同時也不會響應鼠標事件等交互操作。
行內元素和塊元素的相互轉換
在 CSS3 中，可以使用display屬性來實現行內元素和塊元素的相互轉換。
1、行內元素轉換為塊元素
span {display: block;
}
2、塊元素轉換為行內元素
塊元素如<div>、<p>等，默認會獨占一行。若要將塊元素轉換為行內元素，需將display屬性值設置為inline。
div {display: inline;
}
3、轉換為行內塊元素
還有一種常見的情況是將元素轉換為行內塊元素，即display屬性值設置為inline-block。這種方式結合了行內元素和塊元素的部分特點，元素既可以在一行內顯示，又可以設置寬度、高度等塊級元素的屬性。
p {display: inline-block;
}
盒子模型
所有的html標簽都可以看成柜型盒子，由width、height、padding、border構成，成為盒模型。
需要注意的是：++width、height不是盒子的總寬高，盒子的總寬度 = width + 左右padding + 左右border，盒子的總高度 = height + 上下padding + 上下border++
1、box-sizing
在 CSS3 中，box-sizing 屬性用于定義元素在計算寬度和高度時所采用的盒模型類型，它可以改變元素的寬度和高度的計算方式。
2、margin
margin是盒子的外邊距，即盒子其他盒子的距離，豎直方向的margin有塌陷現象:小的margin會塌陷到大的margin中，從而margin不疊加，只以大值為準。
一些元素比如body、ul、p，都有默認的margin，在開始制作網頁的時候，要將他們清除。
盒子的水平居中，將盒子的左右兩邊的margin都設置成auto，盒子將水平居中。盒子的垂直居中，需要使用絕對定位技術實現。
3、padding
padding是盒子的內邊距，即盒子邊框內壁到文字的距離
4、width屬性
width屬性表示盒子內容的寬度，單位屬性通常是px，移動端開發也會涉及百分數、rem等單位。
當塊級元素div、h、li等沒有設置width屬性時，它將自動撐滿，但這不意味著width屬性可以繼承。
5、height屬性
height屬性表示盒子的內容高度，height屬性的單位通常是px,移動端開發也會涉及到百分數、rem等單位。
盒子的height屬性如果不設置，它將自動被其內容撐開，如果沒有內容，則height默認是0。
