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

時間 2019-11-08

標籤 css 核心概念一把基礎部分欄目 CSS 简体版

原文原文鏈接

封面圖片來自Googlecss

一、基本語法

二、選擇器

2.一、選擇器類型

（1）、簡單選擇器

經過元素類型 tagName、*、.class 或 #id 匹配一個或多個元素。html

（2）、屬性選擇器

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

Presenceweb

類型	匹配結果
`[ attr ]`	匹配包含 `attr` 屬性的全部元素
`[ attr = val ]`	匹配 `attr` 屬性值爲 `val` 的全部元素
`[ attr ~= val ]`	匹配 `attr` 屬性中包含 `val` 詞彙( `space-separated` )的全部元素

Substringchrome

類型	匹配結果
`[ 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，雙冒號。express

（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.二、選擇器優先級

優先級按如下規則遞增：bash

通配符 * 、組合選擇器( , > + - '')和否認僞類:not()對優先級沒有影響（在 :not() 內部聲明的選擇器仍是會按照規則影響）
瀏覽器默認樣式
元素類型選擇器 tagName、僞元素選擇器 ::
類選擇器 .class、屬性選擇器 [ attr ]、僞類選擇器 :
id選擇器 #id
內聯樣式 < tagName style="" >
!important

三、值和單位

3.一、值

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

3.二、單位

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

四、繼承

五、盒模型

5.一、盒模型基礎

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

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

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.四、輪廓 outline

OUTSIDE the borders, to make the element "stand out".chrome-devtools

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

5.二、溢出 overflow

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

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

5.三、背景剪裁 background-Clip

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

5.五、盒子類型 display

5.六、外邊距合併

塊級格式化上下文 `BFC`

BFC ( block-formatting contexts )

六、調式CSS

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

七、媒體查詢 `@media`

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

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

參考：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。