CSS初學感覺很簡單，但隨著學習的深入才感覺CSS的水由多深，平常總會遇到各種坑，先總結一些經常遇到的坑
大小寫不敏感
雖然我們平時在寫CSS的時候都是用小寫，但其實CSS並不是大小寫敏感的
.test{ background-COLOR:#a00; width:100px; height: 100px; }
雖然把background-color寫為了background-COLOR，但仍然會生效，之所以寫成小寫是因為xhtml標準的關係，但是即使不是xhtml還是寫成小寫比較好，美觀、易讀而且可以應對可能的轉換需求
選取器優先順序
當兩個規則都作用到了同一個html元素上時，如果定義的屬性有衝突，那麼應該用誰的值的，CSS有一套優先順序的定義。
不同層級
1.在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。
2.作為style屬性寫在元素內的樣式
3.id選取器
4.類別選取器
5.標籤選取器
6.萬用字元選取器
7.瀏覽器自訂或繼承
同一層級
同一層級中後寫的會覆蓋先寫的樣式
上面的層級還是很容易看懂的，但是有時候有些規則是多個層級的組合，像這樣
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> p.test{ background-COLOR:#a00; width:100px; height: 100px; } .test.test2{ background-COLOR:#0e0; width:100px; height: 100px; } </style> </head> <body> <p class="test test2"></p> </body> </html>
到底p是應用那條規則呢，有個簡單的計算方法（經園友提示，權值實際並不是按十進位，用數字表示只是說明思想，一萬個class也不如一個id權值高）
•內聯樣式表的權值為 1000
•識別碼選取器的權值為 100
•Class 類別選取器的權值為 10
•HTML 標籤選取器的權值為 1
我們可以把選取器中規則對應做加法，比較權值，如果權值相同那就後面的覆蓋前面的了，p.class的權值是1+10=11，而.test1 .test2的權值是10+10=20，所以p會應用.test1 .test2
變成綠色
行內(inline)元素的一些屬性
並不是所有的屬性對行內元素都能夠生效
1.行內元素不會應用width屬性，其長度是由內容撐開的
2.行內元素不會應用height屬性，其高度也是由內容撐開的，但是高度可以通過line-height調節
3.行內元素的padding屬性只用padding-left和padding-right生效，padding-top和padding-bottom會改變元素範圍，但不會對其它元素造成影響
4.行內元素的margin屬性只有margin-left和margin-right有效，margin-top和margin-bottom無效
5.行內元素的overflow屬性無效，這個不用多說了
6.行內元素的vertical-align屬性無效（height屬性無效）
<p style=""> <span style="padding:4px; margin:8px; height: 500px; width:1000px; ">123456789123456789</span> </p> <p style=""> <span style="padding:4px; margin:8px; height: 500px; width:1000px; ">123456789</span> </p>
通過例子可以看出，我們對span設定的width和height屬性並沒有生效，margin-top和margin-bottom無效，padding-top和padding-bottom會改變元素範圍（背景地區變大了），但並沒有影響下面元素位置
一些互斥的元素
1.對於absolute和fixed定位的(固定大小，設定了width和height屬性)元素，如果設定了top和left屬性，那麼設定bottom和right值就沒有作用了，應該是top和left優先順序高，否則同時寫了瀏覽器怎麼知道按照誰定位
2.對於absolute和fixed定位的元素，如果設定了top、left、bottom、right的值後margin屬性也就不起作用了
3.對於absolute和fixed定位的元素，如果設定了top、left、bottom、right的值後float屬性同樣會失效
4.塊元素如果設定了float屬性或者是absolute、fixed定位，那麼vertical-align屬性不再起作用
font-size單位
我們在寫字型的尺寸的時候常用的單位有
•px
•pt
•em
•rem
這些字型分別有什麼含義？
1.px是pixel縮寫，是基於像素的單位.在瀏覽網頁過程中，螢幕上的文字、圖片等會隨螢幕的解析度變化而變化，一個100px寬度大小的圖片，在800×600解析度下，要佔螢幕寬度的1/8，但在1024×768下，則只佔約1/10。所以如果在定義字型大小時，使用px作為單位，那一旦使用者改變顯示器解析度從800到1024，使用者實際看到的文字就要變“小”（自然長度單位），甚至會看不清，影響瀏覽。
2.pt是point(磅)縮寫，是一種固定長度的度量單位,大小為1/72英寸。如果在web上使用pt做單位的文字，字型的大小在不同螢幕（同樣解析度）下一樣，這樣可能會對排版有影響，但在Word中使用pt相當方便。因為使用Word主要目的都不是為了螢幕瀏覽，而是輸出列印。當列印到實體時，pt作為一個自然長度單位就方便實用了：比如Word中普通的文檔都用“宋體 9pt”，標題用“黑體 16pt”等等，無論電腦怎麼設定，列印出來永遠就是這麼大。
3.em：是相對單位，是一個相對長度單位，最初是指字母M的寬度，所以叫em，現指的是字元寬度的倍數，用法類似百分比，如：0.8em, 1.2em,2em等。通常1em=16px（瀏覽器預設字型大小16px），em是指父元素的字型大小。在一個頁面上給定了一個父元素的字型大小,這樣就可以通過調整一個元素來成比例的改變所有元素大小.它可以自由縮放,比如用來製作可伸縮的樣式表。類似還有ex的概念，ex 相對於字元“x”的高度，此高度通常為字型尺寸的一半。
4.rem：rem是CSS新增的，em是相對於其父元素來設定字型大小的，這樣就會存在一個問題，進行任何元素設定，都有可能需要知道他父元素的大小，在多次使用時，就會帶來無法預知的錯誤風險。而rem是相對於根項目<html>(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我們不奇怪，但是當我們看select的option的時候會發現被選中的option的margin業變成了10px，沒有被選中的option則沒有變化！
是的:checked也會選擇被選中的option
並不是所有圖片都會被載入
我們知道寫在頁面上的img標籤，無論顯示與否，圖片都會被載入（所以試圖通過對圖片display:none來達到節省網路流量的做法就省省吧。。。），我們也經常使用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> <p class="hidden"></p> <p class="none"></p> <p style="visibility:hidden;"> <p class="parentHidden"></p> </p> <p style="display:none;"> <p class="parentNone"></p> </p> <p style="display:none"> <img src="images/5.jpg"></p> </body> </html>
看一下網路監視情況（怎麼柳岩的照片變小後感覺怪怪的。。。）
我們可以發現圖片0和4沒有被下載，0是沒有用到的CSS，4是父容器的display被設為none的情況，這兩種情況下的CSS引用的圖片是不會被載入的，而父容器設定visibility屬性為hidden仍然會載入圖片，不要搞混了
以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
