為什麼 CSS 這麼難學?

2021-10-14 11:23:11 字數 1493 閱讀 6388

使用谷歌瀏覽器進行除錯,在屬性不理解時可以直接在瀏覽器裡進行數值調節

css在書寫時由於選擇器權重問題經常出現樣式覆蓋的問題

如果你的選擇器書寫正確,並且被劃掉了。

那應該就是權重不足導致的

下面是看起來很複雜的權重規則。

權重規則:html標籤(型別選擇符)的權重是1,class的權重是10,id的權重是100。

權重的表達方式如: 0,0,0,0;

型別選擇符的權重為: 0,0,0,1

class選擇符的權重為: 0,0,1,0

id選擇符的權重為: 0,1,0,0

屬性選擇符的權重為: 0,0,1,0

偽類選擇符的權重為: 0,0,1,0

偽元素選擇符權重為: 0,0,0,1

內聯樣式的權重為: 1,0,0,0

注:如果權重相同時,則後面的樣式生效;

權重值的計算規則略複雜,不再詳細說明了

你就簡單把這些權重值當成10進製進行求和,能解決大多數問題

結果出現的問題的時候,就公升級為100進製,舉例說明

#a1 .a2 .a3 .a4 .a5

#a1 #a2 .a5

以上兩個選擇器誰權重更大呢?

100 + 10 + 10 + 10 + 10

100 + 100 + 10

答案,很明顯是第二個。

另外還有一些新手常見的,

搞不清楚可能會困擾你很久,但搞清楚了這都算個p的那種css問題

1、比如浮動所引發的問題

父元素未設定高度時,子元素浮動會導致父元素高度塌陷。

怎麼解決?

給父元素固定高度,或者 父元素新增 overflow:hidden;

2、關於定位的問題

元素使用了絕對定位position:absolute

導致元素(由於找不到參考係)會根據整個頁面來定位

3、邊框和padding問題

給元素增加邊框和填充,都會影響盒子的大小

務必不能忽略這一點。

初學時,建議使用以下**,進行css重置

*

4、margin的問題

margin:auto 只能實現元素左右居中,實現不了上下居中

5、要分清楚塊元素和行內元素的區別

塊元素預設都是100%寬度的,會獨佔一行

可以設定寬高大小

而行內元素,像 、這種

設定不了寬高,從左到右排列

6、img標籤是特殊的存在

表現出來的特性和文字差不太多

可將理解為特殊的文字內容

7、選擇器的含義

.page .con 和 .page.con 和 .page>.con三者的含義不同

.page>.con 大於號表示必須是子元素

.page.con 中間沒有空格表示同時擁有兩個類

.page .con中間有空格,表示所有後代包含子元素

以上這些

足夠你在最短的時間,解決95%以上css的新手坑了

C 難學嗎?為什麼難學?如何去學?

c 難學嗎?為什麼難學?如何去學?經常上網,發現最多人問的問題就是c 難不難學。而得到的回答卻基本上是說很難學,甚至有說要兩年才算入門。我開始是學vb的,現在轉學qt。談談我對c 的看法。1 入門興趣和方向 2 教材及細節 網上找一下vb的教材,都是一些基本的語法,從來不介紹更為底層的實現和細節。更...

為什麼c 的指標那麼難學?

指標本身是乙個很淺顯的概念,它就是代表了記憶體中的乙個位址 通過這個位址 就能獲取這個位址上儲存的資料 嗯,很簡單的道理。但為何寫起 來就感覺被漿糊團團圍住?因為語言發明者給剛入門的程式設計師搞了乙個非常不友好的設定 兩個意思相近但其實很不一樣的操作符 卻用了同乙個符號!在宣告乙個變數名字是什麼型別...

我為什麼這麼累?

我為什麼這麼累?工作後,我常感到疲憊不堪,為此我的解釋是睡眠不足。可最近,看了一組資料之後才知道,我不是缺乏睡眠,而是工作過度 中國一共有12億人口,其中有三億退休,那就只剩下9億人工作了 8億人在農村,那就只剩下一億人在工作 二千萬是學生,那只剩下八千萬人在工作 這八千萬當中有四千萬是 工作人員,...