css（非布局樣式）
問題1.css樣式（選擇器）的優先順序
1.計算權重
2.！important 級別最高（實際開發盡量不用）
3.內聯樣式比外聯樣式高，在外聯樣式中，id 選擇器級別最高，其次是類選擇器，最後是元素選擇器和偽類
4.後寫的優先順序高
問題2.雪碧圖的作用
1.減少 http 請求數，提高載入效能
2.有一些情況下可以減小大小
問題3.base64 的使用
1.用於減少 http 請求
2.適用於小
3.base64 的體積約為原圖 4/3
問題4.偽類和偽元素的區別
1.偽類表狀態（鏈結狀態--link）
2.偽元素是真的有元素
問題5.如何美化checkbox
1.label[for] 和 id (樣式由 label 確定）
2.隱藏原生 input （將原來 checkbox 隱藏）
3.樣式：checked + label
知識點選擇器
常見選擇器：1.id 選擇器 （#id值）2.元素選擇器 （span） 3.類選擇器（.class） 4.屬性選擇器 [屬性名稱]
基於關係的選擇器
偽類
偽元素::before :會為當前元素建立乙個子元素作為偽元素
::after : 用來匹配已選中元素的乙個虛擬的最後子元素
示例
一.自定義字型
二.行高
構成：由 line box 組成，而 line box 由 inline box 組成，inline box 高度決定 行高 高度
題目：為何下面有空隙（原理和解決方案）
原理：根據 inline 做排版，涉及到字型對齊，預設按照 base line 對齊 ，base line 跟底線是有偏差的，偏差的大小由字型大小而決定（文字12px---偏差3px）【 3px 縫隙問題】
解決：1.遵守 垂直對齊方式，進行調整：（預設 baseline）vertical-align:bottom;使其進行底線對齊 即可
三.背景
1.背景顏色漸變
0deg:從下到上；45deg:左下角到右下角；90deg:從左到右；180deg：從上到下
百分比代表位置
2.背景屬性
background-repeat:(重複）（no-repeat、repeat）
background-position（位置）:center、top、right、left、具體畫素
background-size(尺寸）：具體畫素
雪碧圖：有很多圖示，想將這些圖示合併到一張圖裡面，減少 http 請求，優化網頁速度
示例：
兩張出現在一張上，且可以分別設定其位置，這是雪碧圖的原理和實現方式
背景縮小場景：1.確實需要縮小背景大小2. 適配移動端（將大縮小）使之更清晰
3.base64（適用於小圖示）
使用 base64 的，不是 url 而是文字,這串文字代表本身，節省 http 連線數，
但體積會增大：本身體積變為原來 4/3；css檔案本身變大，且解碼開銷增大
四、滾動
1.滾動行為和滾動條
visible:滾動條隱藏
hidden:滾動條隱藏
scroll:滾動條顯示
auto:滾動條自動顯示
五、文字折行
1.overflow-wrap(word-wrap) 通用換行控制
是否保留單詞
2.word-break 針對多位元組文字
中文句子也是單詞
3.white-space 空白處是否斷行
六、裝飾屬性
1.字重（粗體）：font-weight
2.斜體：font-style:itatic
3.下劃線：text-decortion
4.指標：curson
七、css hack
hack 即不合法但生效的寫法
主要用於區分不同瀏覽器
缺點：難理解、難維護、易失效
替代方案：1.特性檢測 2.針對性加 class
CSS非布局樣式 字型
一 字型的分類 有兩個型別的名稱可用於分類字型 字型族名稱 family name 族類 generic family 二 多字型fallback 實現多平台下的字型的適配 css屬性font family的作用是設定一組按優先順序排序的字型列表，如果該列表中的第乙個字型未在訪問者計算機上安裝，那麼...
CSS非布局樣式背景 邊框
hsla 60,100 50 四個引數 顏色 0 360 飽和度 亮度 透明度 hsl 可以不設透明度 漸變色背景 background webkit linear gradient left,red,green background linear gradient to right,red,gre...
CSS非布局樣式和重點內容
selecter 選擇器用於匹配html元素，有不同的匹配規則，多個選擇器可以疊加 解析方式和效能 瀏覽器的解析方式是從右往左的 body div class 瀏覽器先查詢.class,再查詢對應元素是否在div元素中再去查詢是否在body元素中 名稱權重 不能進製 important max行間樣...