CSS（非佈局樣式）

CSS（非佈局樣式）

問題1.CSS樣式（選擇器）的優先級

1.計算權重

2.！important

3.內聯樣式比外嵌樣式高

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

知識點

一.自定義字體

二.行高

構成：由 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文件自己變大，且解碼開銷增大

 4、滾動

1.滾動行爲和滾動條

visible:滾動條隱藏

hidden:滾動條隱藏

scroll:滾動條顯示

auto:滾動條自動顯示

5、文字折行

1.overflow-wrap(word-wrap)  通用換行控制

是否保留單詞

2.word-break   針對多字節文字

中文句子也是單詞

3.white-space   空白處是否斷行

6、裝飾屬性

1.字重（粗體）：font-weight

2.斜體：font-style:itatic

3.下劃線：text-decortion

4.指針：curson

 7、CSS Hack

Hack 即不合法但生效的寫法

主要用於區分不一樣瀏覽器

缺點：難理解、難維護、易失效

替代方案：1.特性檢測 2.針對性加 class