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

LeoooY發表於2019-02-27
CSS

封面圖片來自Google

1、基本語法

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

2、選擇器

2.1、選擇器型別

（1）、簡單選擇器

通過元素型別 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

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

注意！再提一下，設定元素的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">
複製程式碼

參考：

相關文章