CSS學習筆記(更新中…)

來源:互聯網
上載者:User
id和class到底要用哪一個?

  首先要明白id和class的各自的優缺點。這樣才能根據他們的各自的特點進行使用。
id的優點(class的缺點):id寫在css用"#"選取器,class寫在css中用"."選取器。"#"選取器的優先順序高於"."選取器大約10倍,所以當你需要提升優先順序的時候,id標籤,或者id容器內的標籤將是很容易和有效。而class標籤,或者class容器內的標籤將可能導致優先順序的提升失敗。

id的缺點(class的優點):id應該是唯一的,所以它的可複用性是很差的,而class是可以複用的。所以如果一塊東西是多個頁面,甚至一個頁面都會使用多次的,那麼一定要使用class來作為樣式選取器。id是唯一的,當一個控制項的id的產生是不可控的,那麼這個id選取器將失去意義,但是任何一個控制項即使是動態產生的,他的cssClass仍然是可定製的,所以當你的這個標籤需要用伺服器端控制項替代的時候,而伺服器端控制項的id是不確定的,那麼請使用class選取器,這樣只要將伺服器端控制項的cssClass設為你class選取器的名稱即可。(當然,這個還需要大量的經驗的積累,項目做的多了就會逐步的改進) 

 

padding和margin到底要用哪一個? 

padding和margin可以讓一塊地區的外觀顯示完全一樣。所以可能讓很多人認為padding和margin是可以互換的。其實它們的差別很大,而且選擇哪個需要認真和謹慎地考慮。我認為對容器使用padding還是對容器內的標籤使用margin的原則:當隱藏這個容器或者容器內的標籤時(現實項目中其實經常需要將某個組件隱藏、顯示),對整體布局影響最小為益。

對於padding再說一句:ie6,ie7(FF)對帶有padding樣式的標籤的寬度的解析是不一樣的。ie6的標籤寬度不包含padding-left和padding-right的值,而ie7和ff則是包含的。例如一個div的width設定100px,padding設為10px,而在ie6中它要佔據的寬度是120px(包含10個padding-left和10個padding-right),而在ie7和ff中則佔據100px的寬度。因為ie7和ff會認為100已經包含了20px的padding。 

 

min-height和height

如果你只需要相容ie6那麼你完全不需要注意min-height這個樣式,因為ie6根本就不支援這個樣式。但是當你的頁面需要照顧到ie7和ff的時候,這個樣式一定要注意。因為很多在ie6下設定了height=固定值的樣式,當容器被裡面的東西撐的大於這個高度的時候,ie7和ff是不會自適應高度的。從而導致布局的混亂。要想在ie6,ie7和ff中都可以自適應高度,正確的做法是設定min-height和用cssHack設定height。例如:
min-height:600px;
_height:600px;
這樣,在容器裡面的東西很少的時候,它顯示固定高度600px,但當裡面的東西很多的時候,它也會自適應的增長高度。

對於height的設定一定要特別注意,如果是布局用的容器的height則需要特別的注意,否則在ff中會導致無法浮起,從而使布局混亂。 

 

 

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.