CSS查漏補缺

• css樣式優先級

  • !important > 內聯樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 僞類選擇器 > 標籤選擇器 = 僞元素選擇器

  • 在學習過程當中，你可能發現給選擇器加權值的說法，即 ID 選擇器權值爲 100，類選擇器權值爲 10，標籤選擇器權值爲 1，當一個選擇器由多個 ID 選擇器、類選擇器或標籤選擇器組成時，則將全部權值相加，而後再比較權值。這種說法實際上是有問題的。好比一個由 11 個類選擇器組成的選擇器和一個由 1 個 ID 選擇器組成的選擇器指向同一個標籤，按理說 110 > 100，應該應用前者的樣式，然而事實是應用後者的樣式。錯誤的緣由是： 選擇器的權值不能進位。仍是拿剛剛的例子說明。11 個類選擇器組成的選擇器的總權值爲 110，但由於 11 個均爲類選擇器，因此其實總權值最多不能超過 100， 你能夠理解爲 99.99，因此最終應用後者樣式。

• CSS文本

  • text-indent

    • 沒法將該屬性應用於行內元素以及圖像之類的替換元素上
    • 該屬性能夠繼承

  • text-transform

    • 能夠處理文本的大小寫
    • 小寫/大寫/首字母大寫

• white-space

  • 設置如何處理元素內的空白(空格、換行和 tab 字符)
    

• word-break

  • 規定自動換行的處理方法

• word-wrap

  • 規定長單詞或 URL 地址換行到下一行的規則

• CSS 背景

  • background-color ：默認爲transparent，而不是白色,這樣其祖先元素的背景才能可見

  • background-origin ：規定 background-position 屬性相對於什麼位置來定位，默認爲padding-box

    • border-box：左上角爲外邊框的左上角
    • padding-box：左上角爲內邊框的左上角，即padding-box的左上角
    • content-box：左上角爲padding內邊距的左上角

  • background-position

    • 有background-image屬性時纔有效，能夠改變圖像在背景中的位置，
    • 默認在左上角位置（top left; 0% 0%; 0px 0px），下面涉及到的左上角，左邊等要考慮background-origin 屬性的值而定

    • 關鍵字設置值

      • 位置關鍵字能夠按任何順序出現(由於關鍵字能夠直接辨別方向)，只要保證不超過兩個關鍵字，一個對應水平方向(left或'right或center)，另外一個對應垂直方向(top或'bottom或center)；
      • 若是隻出現一個關鍵字，則認爲另外一個關鍵字是 center。

    • 百分數設置值

      • 百分數值前一個對應水平方向，後一個對應垂直方向，若只有一個則這個對應水平方向，另外一個爲50%
      • 百分數值同時應用於元素和圖像，圖像位於 0% 0%，其左上角將放在元素左上角;圖像位於 50% 50%，其中心點將與元素的中心點對齊；圖像位於 100% 100%，其右下角將放在元素的右下角
      • 水平方向的0%是圖像的左邊界與元素的左邊對齊，100%是圖像的右邊界與元素的右邊對齊；垂直方向的0%是圖像的上邊界與元素的上邊對齊，100%是圖像的下邊界與元素的下邊對齊；

    • 長度值設置值

      • 長度值解釋的是元素左上角的偏移，偏移點是圖像的左上角，僅應用於圖像
      • 圖像的左上角與 background-position 聲明中指定的點對齊，即0px 0px圖像的左上角位於元素的左上角
      • 能夠混合使用百分數值和長度值，當志願一個長度值時它對應水平方向，垂直方向將爲50%

  • background-attachment

    • 聲明背景圖像相對於可視區是固定(fixed)仍是滾動(scroll)的

  • background-size

    • 在 CSS3 以前，背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中，能夠規定背景圖片的尺寸，這就容許咱們在不一樣的環境中重複使用背景圖片。
    • 第一個值設置寬度，第二個值設置高度，若是隻設置一個值，則第二個值會被設置爲 "auto"。

    • 百分比設置值

      • 以父元素的寬高的百分比來設置背景圖像的寬度和高度

    • 長度值設置值

      • 直接設置背景圖像的高度和寬度

    • 關鍵字設置值

      • cover：把背景圖像擴展或縮小，以使背景圖像可以徹底覆蓋背景區域，因此背景圖像的某些部分可能沒法顯示在背景區域中。
      • contain：把圖像圖像擴展或縮小，以使其寬度和高度徹底適應內容區域，背景區域可能會有空白

  • background-clip

    • 規定背景的繪製區域，能夠裁剪背景到指定區域,默認爲border-box
    • border-box：背景圖像在 border-box內的部分纔會顯示
    • padding-box：背景圖像在 padding-box內的部分纔會顯示
    • content-box：背景圖像在 content-box內的部分纔會顯示

• box-shadow

  • box-shadow: h-shadow v-shadow blur spread color inset;
  • h-shadow v-shadow爲必須的，是陰影的位置，正常狀況下陰影的左上角相對於元素的'padding-box'的左上角偏移，可是當設置了inset變爲內陰影后，陰影成爲一個環，內環的左上角相對於元素的'padding-box'的左上角偏移，而外環的左上角與元素的'padding-box'的左上角重合

• 盒模型與視覺格式化模型

  • 盒模型與視覺格式化模型
• 待續...