css基礎知識點

1.css值

• 長度:
  • 絕對長度單位:cm(釐米),mm(毫米),Q(四分之一毫米),in(英寸),px(像素)
  • 相對長度單位:em(父元素的字體大小),rem(根元素的字體大小),lh( 元素的line-height),vw(視窗寬度的1%),vh(視窗高度的1%),vmin(視窗較小尺寸的1%),vmax(視窗較大尺寸的1%)
  • 百分比:相對於父元素值設置的
  • 數字
• 顏色:
  • 顏色關鍵詞:如 red
  • 十六進制RGB值:如 #02798b
  • RGB :RGB值是一個函數—RGB()—它有三個參數，表示顏色的紅色、綠色和藍色通道值.如 rgb(2, 121, 139)
  • RGBA :RGBA顏色——它們的工作方式與RGB顏色完全相同，因此您可以使用任何RGB值，但是有第四個值表示顏色的alpha通道，它控制不透明度。如果將這個值設置爲0，它將使顏色完全透明，而設置爲1將使顏色完全不透明。介於兩者之間的值提供了不同級別的透明度。如 rgba(2, 121, 139, .3)
  • HSL:hsl() 函數接受色調、飽和度和亮度值作爲參數
  • HSLA:hsla() 函數接受色調、飽和度、亮度值和透明度作爲參數

2.文本

• color: 定義字體顏色
• font-family: 定義字體種類(網頁安全字體(操作系統):Arial,Courier New,Georgia,Times New Roman,Trebuchet MS,Verdana 默認字體(瀏覽器):serif,sans-serif,monospace,cursive,fantasy)
• font-size:定義字體大小
• font-style: 用來打開和關閉文本 italic (斜體)
  • normal: 將文本設置爲普通字體 (將存在的斜體關閉)
  • italic: 如果當前字體的斜體版本可用，那麼文本設置爲斜體版本；如果不可用，那麼會利用 oblique 狀態來模擬 italics。
  • oblique: 將文本設置爲斜體字體的模擬版本，也就是將普通文本傾斜的樣式應用到文本中。
• font-weight: 設置文字的粗體大小。
  • normal, bold: 普通或者加粗的字體粗細
  • lighter, bolder: 將當前元素的粗體設置爲比其父元素粗體更細或更粗一步。
  • 100–900: 數值粗體值，如果需要，可提供比上述關鍵字更精細的粒度控制。
• text-transform: 允許你設置要轉換的字體
  • none: 防止任何轉型。
  • uppercase: 將所有文本轉爲大寫。
  • lowercase: 將所有文本轉爲小寫。
  • capitalize: 轉換所有單詞讓其首字母大寫
  • full-width: 將所有字形轉換成全角，即固定寬度的正方形，類似於等寬字體，允許拉丁字符和亞洲語言字形（如中文，日文，韓文）對齊。
• text-decoration: 設置/取消字體上的文本裝飾 (你將主要使用此方法在設置鏈接時取消設置鏈接上的默認下劃線。)
  • none: 取消已經存在的任何文本裝飾。
  • underline: 文本下劃線.
  • overline: 文本上劃線
  • line-through: 穿過文本的線
• text-shadow(文字陰影): 4px 4px 5px red;
  • 陰影與原始文本的水平偏移
  • 陰影與原始文本的垂直偏移
  • 模糊半徑
  • 陰影的基礎顏色
• text-align: 用來控制文本如何和它所在的內容盒子對齊
  • left: 左對齊文本。
  • right: 右對齊文本。
  • center: 居中文字。
  • justify: 文字向兩側對齊，對最後一行無效。
  • justify-all:和justify一致，但是強制使最後一行兩端對齊。
• line-height 屬性設置文本每行之間的高
• letter-spacing:設置你的文本中的字母與字母之間的間距
• word-spacing:設置你的文本中的單詞與單詞之間的間距
• text-indent: 指定文本內容的第一行前面應該留出多少的水平空間
• text-overflow: 定義如何向用戶表示存在被隱藏的溢出內容。
  • clip: 空字符串值 (’’)
  • ellipsis:省略號 (’…’)
  • <string>:用來表示被截斷的文本
• white-space: 定義如何處理元素內部的空白和換行。
  • normal:連續的空白符會被合併，換行符會被當作空白符來處理。填充line盒子時，必要的話會換行。
  • nowrap: 和 normal 一樣，連續的空白符會被合併。但文本內的換行無效。
  • pre:連續的空白符會被保留。在遇到換行符或者
    元素時纔會換行。
  • pre-wrap:連續的空白符會被保留。在遇到換行符或者
    元素，或者需要爲了填充line盒子時纔會換行。
  • pre-line:連續的空白符會被合併。在遇到換行符或者
    元素，或者需要爲了填充line盒子時會換行。
  • break-spaces:與 pre-wrap的行爲相同，除了：(1).任何保留的空白序列總是佔用空間，包括在行尾。(2).每個保留的空格字符後都存在換行機會，包括空格字符之間。(3).這樣保留的空間佔用空間而不會掛起，從而影響盒子的固有尺寸（最小內容大小和最大內容大小）。
• word-break: 指定是否能在單詞內部換行。
  • normal:使用默認的斷行規則。
  • break-all:對於non-CJK (CJK 指中文/日文/韓文) 文本，可在任意字符間斷行。
  • keep-all:CJK 文本不斷行。 Non-CJK 文本表現同 normal。
• direction: 定義文本的方向
  • ltr:默認屬性。可設置文本和其他元素的默認方向是從左到右。
  • rtl:可設置文本和其他元素的默認方向是從右到左。
• text-orientation: 定義行內文本的方向。
• overflow-wrap: 指定瀏覽器是否可以在單詞內換行以避免超出範圍。
  • normal:表示在正常的單詞結束處換行。
  • break-word:表示如果行內沒有多餘的地方容納該單詞到結尾，則那些正常的不能被分割的單詞會被強制分割換行。
• writing-mode: 定義文本行佈局爲水平還是垂直，以及後繼文本流的方向。
• font-stretch:在給定字體的可選拉伸版本中切換。
  • normal:指定默認字體
  • semi-condensed, condensed, extra-condensed, ultra-condensed:小於默認字體，其中ultra-condensed是縮的最小的字體
  • semi-expanded, expanded, extra-expanded, ultra-expanded:大於默認字體的值
• font(簡寫屬性):font-style font-variant font-weight font-stretch font-size/line-height font-family.

3.背景

• background: background-image background-repeat background-attachment background-position/background-size (background-origin|background-clip) background-color
• background-attachment:決定背景圖像的位置是在視口內固定，還是隨着包含它的區塊滾動。
  • fixed:此關鍵字表示背景相對於視口固定。
  • local:此關鍵字表示背景相對於元素的內容固定。
  • scroll:此關鍵字表示背景相對於元素本身固定， 而不是隨着它的內容滾動
• background-clip:設置元素的背景（背景圖片或顏色）是否延伸到邊框下面。
  • border-box:背景延伸至邊框外沿（但是在邊框下層）。
  • padding-box:背景延伸至內邊距（padding）外沿。不會繪製到邊框處。
  • content-box:背景被裁剪至內容區（content box）外沿。
  • text :背景被裁剪成文字的前景色。
• background-color:設置元素的背景色
• background-image:爲一個元素設置一個或者多個背景圖像
• background-origin:規定了指定背景圖片background-image 屬性的原點位置的背景相對區域.
  • border-box:背景圖片的擺放以border區域爲參考
  • padding-box:背景圖片的擺放以padding區域爲參考
  • content-box:背景圖片的擺放以content區域爲參考
• background-position:爲每一個背景圖片設置初始位置。 這個位置是相對於由 background-origin 定義的位置圖層的。
• background-repeat:定義背景圖像的重複方式。背景圖像可以沿着水平軸，垂直軸，兩個軸重複，或者根本不重複。
  • repeat(repeat-x,repeat-y):圖像會按需重複來覆蓋整個背景圖片所在的區域. 最後一個圖像會被裁剪, 如果它的大小不合適的話.
  • space:圖像會盡可能得重複, 但是不會裁剪. 第一個和最後一個圖像會被固定在元素的相應的邊上, 同時空白會均勻地分佈在圖像之間.
  • round:隨着允許的空間在尺寸上的增長, 被重複的圖像將會伸展(沒有空隙), 直到有足夠的空間來添加一個圖像.
  • no-repeat:圖像不會被重複
• background-size:設置背景圖片大小。圖片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同時縮放到元素的可用空間的尺寸。
  • auto:以背景圖片的比例縮放背景圖片。
  • cover:縮放背景圖片以完全覆蓋背景區，可能背景圖片部分看不見
  • contain: 縮放背景圖片以完全裝入背景區，可能背景區部分空白
  • <length>:指定背景圖片大小，不能爲負值
  • <percentage>:背景圖片相對背景區的百分比,背景區由background-origin設置

4.邊框

• border: [border-width ||border-style ||border-color |inherit]
  • border-width:屬性可以設置盒子模型的邊框寬度。
    • thin:細邊線
    • medium:中等邊線
    • thick:寬邊線
    • <length>:指定寬度值
  • border-style :設定元素所有邊框的樣式
    • none:不顯示邊框。
    • hidden:不顯示邊框。
    • dotted:顯示爲一系列圓點。
    • dashed:顯示爲一系列短的方形虛線。
    • solid:顯示爲一條實線。
    • double:顯示爲一條雙實線
    • groove:顯示爲有雕刻效果的邊框
    • ridge:顯示爲有浮雕效果的邊框
    • inset:顯示爲有陷入效果的邊框
    • outset:顯示爲有突出效果的邊框
  • border-color:設置元素四個邊框顏色
• border-image:image-source image-height image-width image-repeat(允許在元素的邊框上繪製圖像)
• border-radius:設置元素的外邊框圓角。當使用一個半徑時確定一個圓形，當使用兩個半徑時確定一個橢圓

5.佈局

• 彈性盒子:display:flex
  • flex-flow:flex-direction flex-wrap
    • flex-direction:指定主軸的方向(row,row-reverse,column,column-reverse )
    • flex-wrap:指定 flex 元素單行顯示還是多行顯示(nowrap,wrap,wrap-reverse)
  • align-items:控制 flex 項在交叉軸上的位置(默認stretch)
  • justify-content:控制 flex 項在主軸上的位置(默認flex-start)
    • start:從行首開始排列
    • flex-start:從行首開始排列
    • flex-end:從行尾開始排列
    • center:伸縮元素向每行中點排列
    • left:伸縮元素一個挨一個在對齊容器得左邊緣
    • right:元素以容器右邊緣爲基準
    • space-between:在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素與行首對齊，每行最後一個元素與行尾對齊。
    • space-around:在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素到行首的距離和每行最後一個元素到行尾的距離將會是相鄰元素之間距離的一半。
    • space-evenly:flex項都沿着主軸均勻分佈在指定的對齊容器中。相鄰flex項之間的間距，主軸起始位置到第一個flex項的間距,，主軸結束位置到最後一個flex項的間距，都完全一樣。
    • stretch:如果項目的組合大小小於對齊容器的大小，則任何自動大小的項目其大小都相同（不按比例增加），同時仍遵守最大高度/最大寬度（或等效功能）施加的約束，以便組合大小精確填充沿主軸的對齊容器。
  • flex:flex-grow flex-shrink flex-basis
    • flex-grow:定義彈性盒子項的拉伸因子
    • flex-shrink:指定了 flex 元素的收縮規則
    • flex-basis:指定了 flex 元素在主軸方向上的初始大小
      • <‘width’>:默認爲 auto
      • content:基於 flex 的元素的內容自動調整大小
  • order:規定了彈性容器中的可伸縮項目在佈局時的順序
• 網格: display:grid
  • grid-template:grid-template-rows grid-template-columns grid-template-areas
    • grid-template-rows:該屬性是基於 網格行 的維度
      • none:這個關鍵字表示不明確的網格
      • <length>:非負值的長度大小
      • <percentage>:非負值且相對於網格容器的 <百分比>
      • <flex>:非負值，用單位 fr 來定義網格軌道大小的彈性係數
      • max-content:是一個用來表示以網格項的最大的內容來佔據網格軌道的關鍵字
      • min-content:是一個用來表示以網格項的最大的最小內容來佔據網格軌道的關鍵字
      • minmax(min, max):是一個來定義大小範圍的屬性，大於等於min值，並且小於等於max值
      • auto:如果該網格軌道爲最大時，該屬性等同於 <max-content> ，爲最小時，則等同於 <min-content> 。
      • fit-content( [ <length> | <percentage> ] ):相當於公式 min(max-content, max(auto, argument))，類似於auto 的計算(即 minmax(auto, max-content))
      • repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ):表示網格軌道的重複部分，以一種更簡潔的方式去表示大量而且重複行的表達式。
    • grid-template-columns:
    • grid-template-areas:網格區域 在CSS中的特定命名
      • none:網格容器沒有定義任何的網格區塊
      • <string>+:每一個給定的字符串會生成一行，一個字符串中用空格分隔的每一個單元會生成一列。多個同名的，跨越相鄰行或列的單元稱爲網格區塊。非矩形的網格區塊是無效的
  • grid-row:grid-row-start / grid-row-end
  • grid-column:grid-column-start / grid-column-end
  • grid-area:grid-row-start / grid-column-start / grid-row-end / grid-column-end
  • grid-gap:row-gap column-gap(設置網格行與列之間的間隙)
• 浮動
  • float:指定一個元素應沿其容器的左側或右側放置，允許文本和內聯元素環繞它。該元素從網頁的正常流動中移除，儘管仍然保持部分的流動性
    • left:表明元素必須浮動在其所在的塊容器左側的關鍵字
    • right:表明元素必須浮動在其所在的塊容器右側的關鍵字
    • none:表明元素不進行浮動的關鍵字
    • inline-start:表明元素必須浮動在其所在塊容器的開始一側，在ltr腳本中是左側，在rtl腳本中是右側
    • inline-end:表明元素必須浮動在其所在塊容器的結束一側，在ltr腳本中是右側，在rtl腳本中是左側。
  • clear:指定一個元素是否必須移動(清除浮動後)到在它之前的浮動元素下面(關鍵字同上)
• 定位
  • 靜態定位(position: static):每個元素獲取的默認值,它只是意味着“將元素放入它在文檔佈局流中的正常位置,此時 top, right, bottom, left 和 z-index 屬性無效
  • 相對定位(position: relative):元素先放置在未添加定位時的位置，再在不改變頁面佈局的前提下調整元素位置
  • 絕對定位(position: absolute):不爲元素預留空間，通過指定元素相對於最近的非 static 定位祖先元素的偏移，來確定元素位置
  • 固定定位(position: fixed):不爲元素預留空間，而是通過指定元素相對於屏幕視口的位置來指定元素位置
  • 粘性定位(position: sticky;top:10px):粘性定位可以被認爲是相對定位和固定定位的混合。元素在跨越特定閾值前爲相對定位，之後爲固定定位

6.選擇器

選擇器

• 基本選擇器
  • 元素選擇器 :elementname(元素名稱)
  • 類選擇器 :.classname(類名)
  • ID 選擇器 :#idname(ID 名)
  • 通配選擇器(性能最低的一個CSS選擇器)
    • ns|* :會匹配ns命名空間下的所有元素
    • *|* :會匹配所有命名空間下的所有元素
    • |* :會匹配所有沒有命名空間的元素
  • 屬性選擇器 :[屬性=值]
• 組合選擇器
  • 相鄰兄弟選擇器 :A + B
  • 普通兄弟選擇器 :A ~ B
  • 子選擇器 :A > B
  • 後代選擇器 :A B
• 僞類: 允許基於未包含在文檔樹中的狀態信息來選擇元素
  • :active:匹配被用戶激活的元素
  • :checked:表示任何處於選中狀態的radio,checkbox,select元素中的option
  • :focus:表示獲得焦點的元素
  • :nth-child(an+b):首先找到所有當前元素的兄弟元素，然後按照位置先後順序從1開始排序，選擇的結果爲CSS僞類:nth-child括號中表達式（an+b）匹配到的元素集合
  • :nth-last-child(an+b):從兄弟節點中從後往前匹配處於某些位置的元素
  • :not(): 匹配不符合一組選擇器的元素,不能包含另外一個否定選擇器
  • :in-range:代表一個 元素，其當前值處於屬性min 和max 限定的範圍之內
  • :out-of-range:表示一個 元素，其當前值處於屬性 min 和 max 限定的範圍外
  • :disabled:表示任何被禁用的元素
  • :enabled:表示任何被啓用的元素
  • :hover:用於用戶使用指示設備虛指一個元素（沒有激活它）的情況
  • :link :用來選中元素當中的鏈接。它將會選中所有尚未訪問的鏈接
  • :visited:表示用戶已訪問過的鏈接
  • :required:表示任意擁有required屬性的 <input> 或 <textarea> 元素
  • :valid:表示內容驗證正確的<input> 或其他 <form> 元素
  • :invalid:表示任意內容未通過驗證的 <input> 或其他 <form> 元素
  • :target:代表一個唯一的頁面元素(目標元素)，其id 與當前URL片段匹配
  • :has():代表一個元素，其給定的選擇器參數（相對於該元素的 :scope）至少匹配一個元素。
  • :read-only:表示元素不可被用戶編輯的狀態（如鎖定的文本輸入框）
  • :read-write:代表一個元素（例如可輸入文本的 input元素）可以被用戶編輯
• 僞元素:表示所有未被包含在HTML的實體
  • ::before:創建一個僞元素，其將成爲匹配選中的元素的第一個子元素。常通過 content 屬性來爲一個元素添加修飾性的內容。此元素默認爲行內元素
  • ::after:用來創建一個僞元素，作爲已選中元素的最後一個子元素。通常會配合content屬性來爲該元素添加裝飾內容。這個虛擬元素默認是行內元素
  • ::placeholder:可以選擇一個表單元素的佔位文本，它允許開發者和設計師自定義佔位文本的樣式。

7.動畫

動畫

• animation:animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state animation-name
  • animation-duration:指定一個動畫週期的時長,默認值爲0s，表示無動畫
    • <time>:一個動畫週期的時長，單位爲秒(s)或者毫秒(ms)，無單位值無效
  • animation-timing-function(linear|ease|ease-in|ease-in-out|ease-out|step-start|step-end):定義CSS動畫在每一動畫週期中執行的節奏
    • <timingfunction>:每個 <timing-function>代表了應用於動畫的timing function，定義於animation-property.
  • animation-delay:定義動畫於何時開始，即從動畫應用在元素上到動畫開始的這段時間的長度。0s是該屬性的默認值
  • animation-iteration-count: 定義動畫在結束前運行的次數
    • infinite:無限循環播放動畫
    • <number>動畫播放的次數
  • animation-direction:指示動畫是否反向播放
    • normal:每個循環內動畫向前循環，換言之，每個動畫循環結束，動畫重置到起點重新開始，這是默認屬性。
    • alternate:動畫交替反向運行，反向運行時，動畫按步後退，同時，帶時間功能的函數也反向
    • reverse:反向運行動畫，每週期結束動畫由尾到頭運行。
    • alternate-reverse:反向交替， 反向開始交替,動畫第一次運行時是反向的，然後下一次是正向，後面依次循環。決定奇數次或偶數次的計數從1開始。
    • animation-fill-mode:設置CSS動畫在執行之前和之後如何將樣式應用於其目標
      • none:當動畫未執行時，動畫將不會將任何樣式應用於目標，而是已經賦予給該元素的 CSS 規則來顯示該元素。這是默認值
      • forwards:目標將保留由執行期間遇到的最後一個關鍵幀計算值
      • backwards:動畫將在應用於目標時立即應用第一個關鍵幀中定義的值
      • both:動畫將遵循forwards和backwards的規則，從而在兩個方向上擴展動畫屬性
  • animation-play-state:定義一個動畫是否運行或者暫停
    • running:當前動畫正在運行。
    • paused:當前動畫以被停止。
  • animation-name:指定應用的一系列動畫，每個名稱代表一個由@keyframes定義的動畫序列

8.媒體查詢

媒體查詢

• 媒體特徵:
  • (min/max-)color:指定輸出設備每個像素單元的比特值。如果設備不支持輸出顏色，則該值爲0。
  • (min/max-)color-index:指定了輸出設備中顏色查詢表中的條目數量
  • (min/max-)aspect-ratio:描述了輸出設備目標顯示區域的寬高比。該值包含兩個以“/”分隔的正整數。代表了水平像素數與垂直像素數的比例。
  • (min/max-)device-aspect-ratio:描述了輸出設備的寬高比。該值包含兩個以“/”分隔的正整數
  • (min/max-)device-height:描述了輸出設備的高度
  • (min/max-)device-width:描述了輸出設備的寬度
  • grid:判斷輸出設備是網格設備還是位圖設備。如果設備是基於網格的（例如電傳打字機終端或只能顯示一種字形的電話），該值爲1，否則爲0
  • (min/max-)height:描述了輸出設備渲染區域
  • (min/max-)width:輸出設備渲染區域的寬度
  • orientation:指定了設備處於橫屏模式還是豎屏模式。
  • (min/max-)resolution:指定輸出設備的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每釐米（dpcm）的點數來表示
• 邏輯操作符
• and:用於合併多個媒體屬性或合併媒體屬性與媒體類型
• 逗號分隔列表:媒體查詢中使用逗號分隔效果等同於or邏輯操作符
• not:應用於整個媒體查詢，在媒體查詢爲假時返回真
• only:防止老舊的瀏覽器不支持帶媒體屬性的查詢而應用到給定的樣式

10.優先級

優先級

• 比較: 元素選擇器<類選擇器,屬性選擇器,僞類<ID 選擇器<內聯樣式(最高的優先級)
• !important :此聲明將覆蓋任何其他聲明,!important 與優先級無關，但它與最終的結果直接相關