25條div+CSS編程提醒及小技巧整理

一、ul標籤在Mozilla中默認是有padding值的，而在IE中只有margin有值。

二、同一個的class選擇符能夠在一個文檔中重複出現，而id選擇符卻只能出現一次；對一個標籤同時使用class和id進行CSS定義，若是定義有重複，id選擇符作的定義有效，是由於ID的權值要比CLASS大。

三、一個兼容性調整(IE和Mozilla)的笨辦法： 初學可能會碰到這樣一個狀況：一樣一個標籤的屬性在IE設置成A顯示是正常的，而在Mozilla裏必需要設成B才能正常顯示，或者兩個倒過來。 臨時解決方法：選擇符{屬性名:B !important;屬性名:A}

四、若是一組要嵌套的標籤之間須要些間距的話，那就留給位於裏面的標籤的margin屬性吧，而不要去定義位於外面的標籤的padding

五、li標籤前面的圖標推薦使用background-image，而不是list-style-image。

六、IE分不清繼承關係和父子關係的差異，所有都是繼承關係。

 

七、在給你的標籤瘋狂加選擇符的時候，別忘了在CSS裏給選擇符加上註釋。 等你之後修改你的CSS的時候就知道爲何要這麼作了。

八、若是你給一個標籤設置了一個深色調的背景圖片和亮色調的文字效果。建議這個時候給你的標籤再設置一個深色調的背景顏色。

九、定義連接的四種狀態要注意前後順序: Link Visited Hover Active

 

十、與內容無關的圖片請使用background

十一、定義顏色能夠縮寫#8899FF=#89F

十二、table在某些方面比其它標籤表現的要好的多。請在須要列對齊的地方用它。

1三、<script>沒有language這個屬性，應該寫成這樣: <script type=」text/javascript」>

1四、標題是標題，標題的文字是標題的文字。有時候標題不必定須要顯示文字，因此:<h1>標題內容</h1> 改爲 <h1><span>標題內容</span></h1>

 

1五、完美的單象素外框線表格（在IE五、IE六、IE7及FF1.0.4以上中都可經過測試） table{border-collapse:collapse;} td{border:#000 solid 1px;}

1六、margin取負值能夠在標籤使用絕對定位的時候起到相對定位的做用，在頁面居中顯示時，使用絕對定位的層不適合使用left:XXpx這個屬性。把這個層放到一個要相對定位的標籤旁，而後使用margin的負值是個好方法。

1七、絕對定位時使用margin值定位能夠達到相對於自己所在位置的定，這與top，left等屬性相對與窗口邊緣的定位不一樣。絕對定位的優點在於可讓其它元素忽略它的存在。

1八、若是文字過長,則將過長的部分變成省略號顯示：IE5,FF無效，但能夠隱藏，IE6有效 <DIV STYLE=」width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis」> <NOBR>就是好比有一行文字，很長，表格內一行顯示不下.</NOBR>

 

1九、在IE中可能因爲註釋帶來的文字重複問題時能夠把註釋改成： <!?[if !IE]>Put your commentary in here…<![endif]?>

20、如何用CSS調用外部字體 語法： @font-face{font-family:name;src:url(url);sRules} 取值： name：字體名稱。任何可能的 font-family 屬性的值 url(url)：使用絕對或相對 url 地址指定OpenType字體文件 sRules：樣式表定義

2一、如何讓一個表單中的文本框中的文字垂直居中？ 若是用行高與高度的組在FF中是沒有效果的，辦法就是定義上下補白就能夠實現想一想的效果了。

2二、定義A標籤要注意的小問題： 當咱們定義a{color:red;}時，它表明了A的四種狀態的樣式，若是此時要定義一個鼠標放上的狀態只要定義a:hover就能夠了，其它三種狀態就是A中所定義的樣式。 只定義了一個a:link時，必定要記得把其它三種狀態定義出來！

2三、並非全部樣式都要簡寫： 當樣式表前定義瞭如p{padding:1px 2px 3px 4px}時，在後續工程中又增長了一個樣式上補白5px，下補白6px。咱們並不必定要寫成p.style1{padding:5px 6px 3px 4px}。能夠寫成p.style1{padding-top:5px;padding-right:6px;},你可能會感受這樣寫還不如原來那樣好，但你想沒想過，你的那種寫法重複定義了樣式，另外你能夠沒必要去找原來的下補白與左補白的值是多少！若是之後前一個樣式P變了話，你定義的p.style1的樣式也要變。

 

2四、網站越大，CSS樣式越多，開始作前，請作好充分的準備和策劃，包括命名規則。頁面區塊劃分，內部樣式分類等。

2五、幾個經常使用到的CSS樣式： 
-1）中文字兩端對齊：text-align:justify;text-justify:inter-ideograph;

-2）固定寬度漢字截斷：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不過只能處理文字在一行上的截斷，不能處理多行。)（IE5以上）FF不能，它只隱藏。

-3）固定寬度漢字（詞）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。

-4）<acronym title=」輸入要提示的文字」 style=」cursor:help;」>文字</acronym>用鼠標放在前面的文字上看效果。這個效果在國外的不少網站均可以看到，而國內的少又少。

-5）圖片設爲半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5測試經過，FF未經過，這是由於這個樣式是IE私有的東西；

-6）FLASH透明：選中swf,打開原代碼窗口，在</object>前輸入<param name=」wmode」 value=」transparent」> 以上是針對IE的代碼。 針對FIREFOX 給<embed> 標籤也增長相似參數wmode=」transparent」

-7）在作網頁時經常使用到把鼠標放在圖片上會出現圖片變亮的效果，能夠用圖片替換的技巧，也能夠用以下的濾鏡： .pictures img { filter: alpha(opacity=45); } .pictures a:hover img { filter: alpha(opacity=90); }