av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

DIV+CSS網(wǎng)頁布局中margin優(yōu)化的一種思路

本文和大家重點(diǎn)討論一下DIV+CSS網(wǎng)頁布局中margin的優(yōu)化，margin是我們在進(jìn)行CSS布局中非常常用的屬性之一，但如果運(yùn)用不得當(dāng)，往往會產(chǎn)生過多的垃圾代碼，讓我們的編碼體積不斷增加。

DIV+CSS網(wǎng)頁布局中margin優(yōu)化的一種思路

margin是我們在進(jìn)行CSS布局中非常常用的屬性之一，但如果運(yùn)用不得當(dāng)，往往會產(chǎn)生過多的垃圾代碼，讓我們的編碼體積不斷增加。今天我們介紹一種編碼優(yōu)化的小實(shí)例，通過此例希望大家能意識到代碼優(yōu)化的途徑是多種多樣的，也算是一個拋磚引玉的引子吧。

看XHTML代碼：

 
 
 
      
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.
 
  •  
  •  
  •  
  •  
  •  

    • 看下面的CSS代碼：（未優(yōu)化）

     
 
 
        
  
  
    1. #main{  
      2.   
  
  
    2. margin:5px0px5px0px;  
      3.   
  
  
    3. }  
      4.   
  
  
    4. #body1{  
      5.   
  
  
    5. margin:12px0px10px0px;  
      6.   
  
  
    6. }  
      7.   
  
  
    7. #content{  
      8.   
  
  
    8. margin:8px0px2px0px;  
      9.   
  
  
    9. }  
      10.   
  
  
    10. #body2{  
      11.   
  
  
    11. margin:10px0px15px0px;  
      12.   
  
  
    12. }  
      13.   
  
  
    13.  
      14.

    用Dreamweaver進(jìn)行設(shè)置的CSS，應(yīng)該是屬于這一類，它是未優(yōu)化的，很多代碼都是多余的，因?yàn)檐浖吘故擒浖壳斑€沒有能替人作一些思考。我們對上面的CSS進(jìn)行優(yōu)化。

    看下面的經(jīng)過優(yōu)化的CSS代碼：

     
 
 
        
  
  
    1. #main{}  
      2.   
  
  
    2. #body1{  
      3.   
  
  
    3. margin-top:17px;  
      4.   
  
  
    4. }  
      5.   
  
  
    5. #content{  
      6.   
  
  
    6. margin:8px0px2px0px;  
      7.   
  
  
    7. }  
      8.   
  
  
    8. #body2{  
      9.   
  
  
    9. margin:20px0px;  
      10.   
  
  
    10. }  
      11.   
  
  
    11.  
      12.

    我們來分析一下優(yōu)化的思路：首先#main{margin:5px0px5px0px;}是沒有必要的，他無非定義的就是整個頁面的上、下外邊距（在一定場合下卻需要這樣書寫）。我們同樣可以通過定義#body1的上邊距和#body2的下邊距來設(shè)置，所以才有了#body1{margin-top:17px;}和#body2{margin:20px0px;}（這里定義的是#body2的上下邊距為20px，左右邊距為0px，也是縮寫的一種方式。）同理，于是我們可以省略了#body1的下邊距，在#content層在定義上邊距，另外大家還需要先弄清楚層的嵌套關(guān)系，否則容易讓你思路非常不清晰。

    【編輯推薦】

    1. CSS中padding-bottom 屬性用法
    2. 實(shí)例解析CSS padding 屬性用法
    3. 探究IE和Firefox下的2款HTTP調(diào)試工具用法
    4. CSS教程：詳解margin和padding屬性應(yīng)用場合
    5. CSS中padding-bottom和padding-right屬性的區(qū)別

    當(dāng)前題目：DIV+CSS網(wǎng)頁布局中margin優(yōu)化的一種思路
    當(dāng)前地址：http://uogjgqi.cn/article/ccsphdo.html
    掃二維碼與項(xiàng)目經(jīng)理溝通

    我們在微信上24小時期待你的聲音

    解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流

    其他資訊