好程式員web前端教育訓練分享怎樣學好css？

　　好程式員web前端教育訓練分享怎樣學好css？我推薦題主的學習方法就是：善用調試工具。

　　使用谷歌浏覽器進行調試，在屬性不了解時可以直接在浏覽器裡進行數值調節

　　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

但是你的參考系卻沒有增加position：relative

導緻元素（由于找不到參考系）會根據整個頁面來定位

3、邊框和padding問題

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

務必不能忽略這一點。

初學時，建議使用以下代碼，進行CSS重置

• {

  margin:0; padding:0           

  }

4、margin的問題

margin：auto 隻能實作元素左右居中，實作不了上下居中

5、要厘清楚塊元素和行内元素的差別

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

可以設定寬高大小

而行内元素，像

、這種

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

6、Img标簽是特殊的存在

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

可将圖檔了解為特殊的文字内容

7、選擇器的含義

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

.page>.con 大于号表示必須是子元素

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

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