淺談前端開發(fā)中容易被忽略CSS特性

2024-07-11 08:58:43

字體：大中小

供稿：網(wǎng)友

CSS初學(xué)感覺很簡單，但隨著學(xué)習(xí)的深入才感覺CSS的水由多深，平常總會遇到各種坑，先總結(jié)一些經(jīng)常遇到的坑

大小寫不敏感

雖然我們平時在寫CSS的時候都是用小寫，但其實CSS并不是大小寫敏感的

.test{    background-COLOR:#a00;    width:100px;    height: 100px;}

雖然把background-color寫為了background-COLOR，但仍然會生效，之所以寫成小寫是因為xhtml標(biāo)準(zhǔn)的關(guān)系，但是即使不是xhtml還是寫成小寫比較好，美觀、易讀而且可以應(yīng)對可能的轉(zhuǎn)換需求
選擇器優(yōu)先級

當(dāng)兩個規(guī)則都作用到了同一個html元素上時，如果定義的屬性有沖突，那么應(yīng)該用誰的值的，CSS有一套優(yōu)先級的定義。

不同級別

在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式。

作為style屬性寫在元素內(nèi)的樣式

id選擇器
類選擇器
標(biāo)簽選擇器
通配符選擇器
瀏覽器自定義或繼承

同一級別

同一級別中后寫的會覆蓋先寫的樣式

上面的級別還是很容易看懂的，但是有時候有些規(guī)則是多個級別的組合，像這樣

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        div.test{            background-COLOR:#a00;            width:100px;            height: 100px;        }        .test.test2{            background-COLOR:#0e0;            width:100px;            height: 100px;        }    </style></head><body>    <div class="test test2"></div></body></html>

到底div是應(yīng)用那條規(guī)則呢，有個簡單的計算方法（經(jīng)園友提示，權(quán)值實際并不是按十進(jìn)制，用數(shù)字表示只是說明思想，一萬個class也不如一個id權(quán)值高）

內(nèi)聯(lián)樣式表的權(quán)值為 1000
ID 選擇器的權(quán)值為 100
Class 類選擇器的權(quán)值為 10
HTML 標(biāo)簽選擇器的權(quán)值為 1

我們可以把選擇器中規(guī)則對應(yīng)做加法，比較權(quán)值，如果權(quán)值相同那就后面的覆蓋前面的了，div.class的權(quán)值是1+10=11，而.test1 .test2的權(quán)值是10+10=20，所以div會應(yīng)用.test1 .test2變成綠色

行內(nèi)(inline)元素的一些屬性

并不是所有的屬性對行內(nèi)元素都能夠生效

行內(nèi)元素不會應(yīng)用width屬性，其長度是由內(nèi)容撐開的
行內(nèi)元素不會應(yīng)用height屬性，其高度也是由內(nèi)容撐開的，但是高度可以通過line-height調(diào)節(jié)
行內(nèi)元素的padding屬性只用padding-left和padding-right生效，padding-top和padding-bottom會改變元素范圍，但不會對其它元素造成影響
行內(nèi)元素的margin屬性只有margin-left和margin-right有效，margin-top和margin-bottom無效
行內(nèi)元素的overflow屬性無效，這個不用多說了
行內(nèi)元素的vertical-align屬性無效（height屬性無效）

<div style="background-color: #a44;">        <span style="padding:4px; margin:8px; height: 500px; width:1000px; background-color:#0e0;">123456789123456789</span>    </div>    <div style="background-color: #a44;">        <span style="padding:4px; margin:8px; height: 500px; width:1000px; background-color:#0a0;">123456789</span>    </div>

通過例子可以看出，我們對span設(shè)置的width和height屬性并沒有生效，margin-top和margin-bottom無效，padding-top和padding-bottom會改變元素范圍（背景區(qū)域變大了），但并沒有影響下面元素位置

一些互斥的元素

對于absolute和fixed定位的(固定大小，設(shè)置了width和height屬性)元素，如果設(shè)置了top和left屬性，那么設(shè)置bottom和right值就沒有作用了，應(yīng)該是top和left優(yōu)先級高，否則同時寫了瀏覽器怎么知道按照誰定位
對于absolute和fixed定位的元素，如果設(shè)置了top、left、bottom、right的值后margin屬性也就不起作用了
對于absolute和fixed定位的元素，如果設(shè)置了top、left、bottom、right的值后float屬性同樣會失效
塊元素如果設(shè)置了float屬性或者是absolute、fixed定位，那么vertical-align屬性不再起作用

font-size單位

我們在寫字體的尺寸的時候常用的單位有

這些字體分別有什么含義？

px是pixel縮寫，是基于像素的單位.在瀏覽網(wǎng)頁過程中，屏幕上的文字、圖片等會隨屏幕的分辨率變化而變化，一個100px寬度大小的圖片，在800×600分辨率下，要占屏幕寬度的1/8，但在1024×768下，則只占約1/10。所以如果在定義字體大小時，使用px作為單位，那一旦用戶改變顯示器分辨率從800到1024，用戶實際看到的文字就要變“小”（自然長度單位），甚至?xí)床磺澹绊憺g覽。
pt是point(磅)縮寫，是一種固定長度的度量單位,大小為1/72英寸。如果在web上使用pt做單位的文字，字體的大小在不同屏幕（同樣分辨率）下一樣，這樣可能會對排版有影響，但在Word中使用pt相當(dāng)方便。因為使用Word主要目的都不是為了屏幕瀏覽，而是輸出打印。當(dāng)打印到實體時，pt作為一個自然長度單位就方便實用了：比如Word中普通的文檔都用“宋體 9pt”，標(biāo)題用“黑體 16pt”等等，無論電腦怎么設(shè)置，打印出來永遠(yuǎn)就是這么大。
em：是相對單位，是一個相對長度單位，最初是指字母M的寬度，所以叫em，現(xiàn)指的是字符寬度的倍數(shù)，用法類似百分比，如：0.8em, 1.2em,2em等。通常1em=16px（瀏覽器默認(rèn)字體大小16px），em是指父元素的字體大小。在一個頁面上給定了一個父元素的字體大小,這樣就可以通過調(diào)整一個元素來成比例的改變所有元素大小.它可以自由縮放,比如用來制作可伸縮的樣式表。類似還有ex的概念，ex 相對于字符“x”的高度，此高度通常為字體尺寸的一半。
rem：rem是CSS新增的，em是相對于其父元素來設(shè)置字體大小的，這樣就會存在一個問題，進(jìn)行任何元素設(shè)置，都有可能需要知道他父元素的大小，在多次使用時，就會帶來無法預(yù)知的錯誤風(fēng)險。而rem是相對于根元素(r:root)，使用rem我們只需要在根元素確定一個參考值，然后就可以控制整個html頁面所有字體了。

:checked 選擇器范圍

我們知道:checked會選擇被選中的checkbox和radio，看個例子

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        :checked{            margin: 10px;        }    </style></head><body>    <input id="t1" type="checkbox" checked/>    <input id="t3" type="radio" checked/>    <select>        <option id="t2">test</option>        <option id="t4">test2</option>    </select></body></html>

對于前兩個margin變成10px我們不奇怪，但是當(dāng)我們看select的option的時候會發(fā)現(xiàn)被選中的option的margin業(yè)變成了10px，沒有被選中的option則沒有變化！

是的:checked也會選擇被選中的option

并不是所有圖片都會被加載

我們知道寫在頁面上的img標(biāo)簽，無論顯示與否，圖片都會被加載（所以試圖通過對圖片display:none來達(dá)到節(jié)省網(wǎng)絡(luò)流量的做法就省省吧。。。），我們也經(jīng)常使用backgroung-image等css屬性為頁面添加圖片，這些圖片是不是一定會被加載呢，看個例子

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        .useless{            background-image: url(images/0.jpg);        }        .hidden{            background-image: url(images/1.jpg);        }        .none{            background-image: url(images/2.jpg);        }        .parentHidden{            background-image: url(images/3.jpg);        }        .parentNone{            background-image: url(images/4.jpg);        }    </style></head><body>    <div class="hidden"></div>    <div class="none"></div>    <div style="visibility:hidden;">        <div class="parentHidden"></div>    </div>    <div style="display:none;">        <div class="parentNone"></div>    </div>    <div style="display:none">        ![](images/5.jpg)</div></body></html>

看一下網(wǎng)絡(luò)監(jiān)視情況（怎么柳巖的照片變小后感覺怪怪的。。。）