CSS核心概念一把梭-基礎部分

CSS · 發表 2019-02-28 01:22:03

摘要：通過元素型別 tagName 、 * 、 .class 或 #id 匹配一個或多個元素。（2）、屬性選擇器通過屬性 / 屬性值匹配一個或多個元素。 Presence 型別匹配結果 ...

通過元素型別 tagName 、 * 、 .class 或 #id 匹配一個或多個元素。

（2）、屬性選擇器

通過屬性 / 屬性值匹配一個或多個元素。

Presence

型別	匹配結果
`[ attr ]`	匹配包含 `attr` 屬性的所有元素
`[ attr = val ]`	匹配 `attr` 屬性值為 `val` 的所有元素
`[ attr ~= val ]`	匹配 `attr` 屬性中包含 `val` 詞彙( `space-separated` )的所有元素

Substring

型別	匹配結果
`[ attr ^= val ]`	匹配 `attr` 屬性中以 `val` 開頭的所有元素
`[ attr \|= val ]`	匹配 `attr` 屬性中以 `val` 或者 `val-` 開頭的所有元素
`[ attr $= val ]`	匹配 `attr` 屬性中以 `val` 結尾的所有元素
`[ attr *= val ]`	匹配 `attr` 屬性中包含 `val` 的所有元素

（3）、偽類和偽元素

偽類：匹配元素的相關狀態和屬性，如 :hover :first-child :nth-child() ，單冒號。

偽元素：匹配元素的相關位置, 如 ::after ::first-letter ::selection ，雙冒號。

（4）、組合選擇器

組合選擇器：組合使用多個選擇器。

型別	組合	匹配結果
選擇器組	A , B	匹配 A or B選擇器規則
後代選擇器	A B	匹配B選擇器規則，且B是A的後代（子孫）
子代選擇器	A > B	匹配B選擇器規則，且B是A的子代（必須是直接子代）
相鄰兄弟選擇器	A + B	匹配B選擇器規則，且B是A的弟弟（AB屬於同一父代，且B緊跟A的後面）
任一兄弟選擇器	A - B	匹配B選擇器規則，且B是A的任意弟弟（AB屬於同一父代，且B在A之後，不一定緊挨）

2.2、選擇器優先順序

優先順序按以下規則遞增：

萬用字元 * 、組合選擇器( , > + - ' ')和否定偽類 :not() 對優先順序沒有影響（在 :not() 內部宣告的選擇器還是會按照規則影響）
瀏覽器預設樣式
元素型別選擇器 tagName 、偽元素選擇器 ::
類選擇器 .class 、屬性選擇器 [ attr ] 、偽類選擇器 :
id選擇器 #id
內聯樣式 < tagName style="" >
!important

3、值和單位

3.1、值

- 數值
- 百分比
- 顏色：背景顏色 background-color 文字顏色 color邊框顏色 border
- colorName
- HEX
- RGB
- HSL
- RGBA HSLA
- Opacity
- 函式
- rgb() rgba() hsla() linear-gradient()
- rotate() translate()
- calc()
- url()
複製程式碼

3.2、單位

-px
-em em are the most common **relative** unit you'll use in web development.
-rem
-ex ch
-vw vh
-無單位值
-動畫 s deg
複製程式碼

4、繼承

5、盒模型

5.1、盒模型基礎

margin ：外邊距，顏色透明
border ：邊框
padding ：內邊距，顏色透明
content ：盒子內容
- width 和 height : Content 的寬度和高度，預設為 auto ，即瀏覽器自動計算。
- max-width/min-width min-height/max-height

注意！再提一下，設定元素的 width 和 height ，實際上是設定的 content 區域的 width 和 height 。 元素的實際尺寸 還需計算 padding 、 border 和 margin 。有幾種計算模型需要了解：

w3c 標準盒模型

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
複製程式碼

IE 盒模型

5.4、輪廓 outline

OUTSIDE the borders , to make the element "stand out".

輪廓指的是邊框外的區域，目的是為了設定使元素顯得突出的樣式

5.2、溢位 overflow

溢位 overflow 控制的是內容區域 content 太大而溢位一片區域時候的情況。

值	匹配結果
`visible`	預設值，溢位部分不會被裁減，內容區域 `content` 會渲染到元素盒子之外
`hidden`	溢位部分會被裁減, 不可見
`scroll`	溢位部分會被裁減，但會出現滾動條以檢視內容（始終存在垂直和水平滾動條）
`auto`	和 `scroll` 相似，但只會在必要時，出現滾動條（只有溢位的方向出現滾動條）

5.3、背景剪裁 background-Clip

background-clip: border-box|padding-box|content-box|initial|inherit;
複製程式碼

5.5、盒子型別 display

5.6、外邊距合併

塊級格式化上下文 `BFC`

BFC ( block-formatting contexts )

6、調式CSS

Chrome開發者工具使用指南 | Google Developer

7、媒體查詢 `@media`

@media not|only mediatype and (expressions) {
CSS-Code;
}
複製程式碼

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
複製程式碼

參考：