<編寫高質量代碼--web前端開發修煉之道>之css總結

(一)標準模式和怪異模式的一些不一樣
 (1)IE對盒模型的解析
    在標準模式下,頁面的寬度爲:width+border+padding
    在怪異模式下,width就包括了padding 和border
 (2)在怪異模式下,以下的樣式不能正常表現
    width:200px;margin-left:auto;margin-right:auto;
在一些高級瀏覽器中,若是沒有聲明DTD類型,頁面將會以標準模式進行解析,而在IE(IE6,IE7,IE8)中則會觸發怪異模式

(二)關於*{margin:0;padding:0}
   在不一樣瀏覽器中,一些默認樣式也會有所不一樣,例如:ul默認帶有縮進的樣式,在IE中,其縮進是按照margin實現的,可是在firefox中,其縮進是按照padding實現的
   爲了去掉瀏覽器的默認樣式,一些人會設置*{margin:0;padding:0},可是這並非最好的寫法,通常推薦以下寫法:
   body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
   
(三)解決一些hack
        (1)設置浮動時出現的bug:一旦爲某個元素設置了浮動,而後有設置了margin屬性,以下:
           .fl{float;left;  margin-left:20px};
        這種在IE6中,margin值會加倍.解決辦法:爲設置的元素標籤添加一個樣式:display;inline;便可解決
        
        (2)爲了讓浮動元素的父容器可以根據浮動元素的高度而自適應高度,有以下三種實現方法(其中fl類具備左浮動的樣式,cb類具備clear:both的樣式):
           -- 讓父元素同時浮動起來,例如:<div class="fl"><div class="fl"></div></div>
           -- 讓浮動元素後面緊跟一個用於浮動的空標籤,例如:<div><div class="fl"></div><div class="cb"></div></div>
           -- 給父容器掛上一個特殊的class,直接從父容器清除浮動元素的浮動,例如:<div class="clearfix"><div class="fl"></div></div>
           其中.clearfix{height:1%;}
        (3)IE的一些hack解決
           --IE條件註釋法:
            <!-- [if IE 6]
            <link type="text/css" href="ie6.css" rel="stylesheet"/>
            -->
            <!-- [if IE 7]
            <link type="text/css" href="ie6.css" rel="stylesheet"/>
            -->
            <!-- [if IE 8]
            <link type="text/css" href="ie6.css" rel="stylesheet"/>
            -->
            -- 選擇符前綴法
                .test{width:80px}
                *html.test{width:60px}  /只在IE6下有效
                *+html .test{width:40px}  /只在IE7下有效
            -- 樣式屬性前綴法
            .test{width:80px;*width:70px;_width:70px;}
        (4)觸發IE的hasLayout屬性,
               hasLayout是IE的一個特有的屬性,用於css的解析引擎,要觸發IE的hasLayout屬性,須要使用以下的方法:
               -- height:1%;這是早期的一種寫法,如今並不適用.
               -- zoom:1;
               -- position:
        (5)display:inline-block屬性,這個樣式在一下現代瀏覽器中均可以支持,可是在IE6和IE7中卻不支持,可是即便不支持,這樣設置會觸發IE的hasLayout屬性,使之顯示塊狀效果
        除此以外,display:inline-block只是對行內元素起做用,對塊級元素不起做用,
        
     
        
            

(四)一些細節問題
     (1)margin的不合理性:在混用了margin-top 和margin-bottom的狀況下,二者的高度會產生重合,而相鄰的兩個元素定義margin-left和marfgin-right則不會發生重合.因此最好不要混用margin-top和margin-bottom
     (2)權重原則
        以下面的代碼:
        span{color:purple;font-size:10px;}
        .test{color:red};
        <span class="test">this is a test</span>這種狀況應該聽誰的呢
        這個時候頁面解析css樣式的時候,都是會採起權重原則,誰的權重要大一些,則按照誰的樣式來進行解析
        權重的規則以下:
        html的權重是1,class的權重爲10,id的權重爲100
        eg:div em的權重爲1+1=2,strong.demo的權重爲1+10=11;若是二者的權重相同的狀況,則哪一個類後定義聽誰的
        eg:
        <span class="test1 test2">this is a demo</span>
        style定義以下:
        .test1{color:red};
        .test2{color:green};
        這個時候應該聽test2定義的樣式
    (3)解決超連接訪問後hover不出現的問題
         a:hover{color:yellow;}
         a:visited{color:purple;}
         <a href="#">this is demo</a>
         結果超連接在點擊以後,即便鼠標再懸浮在a上面,也不會出現變成yellow的狀況,這就是存在的一個bug,解決辦法:
         a:visited{color:purple;}
         a:hover{color:yellow;}
         調換二者順序便可,關於a標籤的四鍾狀態的排序問題,有以下的順序:link visited hover active
         
   (4)對於relative,absolute和float,relative還有absolute會讓元素浮起來,也就是改變z-index的值,可是relative只會讓元素保留在z-index:0的區域,而頁面上默認的
        元素的z-index也是爲0,這也就是relative不脫離文檔流的緣由,而absolute則會讓元素的z-index大於0,從而使元素脫離文檔流.對應的,float也能改變文檔流,可是它仍然讓
        元素在z-index:0層保留
        
        position:absolute和float會隱式地改變display類型,只要設置了position:absolute和float:left或者float:right中的任何一個,元素都會按照display:inline-block
        的方式顯示,即便顯示地設置display:block或者display:inline,也沒有用
   (5)z-index屬性的相關問題
     z-index實際上是z軸的一種體,z軸在元素設置position:absolute或者relative後被激活,其大小由z-index設置,可是在下面的例子中會反常:
         <div id="one"></div>
       <div id="two"></div>
       <div id="three"></div>
      <script type="text/javascript">
            #one{width:300px;height: 300px;background: black;}
            #two{width:100px;height: 100px;background: red;position: absolute;z-index: -1;left: 100px;top:250px;}
            #three{width:100px;height: 100px;background: green;position: relative;z-index: 2;left: 120px;top:-100px;}
            var one = document.getElementById('one');
            var two = document.getElementById('two');
            var three = document.getElementById('three');
            one.onclick = function(){
                   alert('one');
            }
            two.onclick = function(){
                   alert('two');
            }
            three.onclick = function(){
                   alert('three');
            }
      </script>
      在點擊紅色區域的時候不會彈出提示信息,緣由是其z-index爲0的body之下,被透明的body擋住了.
      有些狀況下雖然並無顯示設置z-index屬性,可是也會顯示z-index的屬性,好比設定負邊距,margin:-50px;仍然會讓元素髮生重疊的狀況
    (6)水平居中問題
        --- 文本等行內元素水平居中:text-align:center;
        --- 塊級元素水平居中:margin:0 auto
        --- 不肯定寬度的塊級元素水平居中
          方法一:
                   <div class="wrap">
               <table>
                   <tbody><tr><td>
               <ul class="test">
                   <li><a href="">1</a></li>
               </ul>
                   </td></tr></tbody>
               </table>
               <table>
                   <tbody><tr><td>
               <ul class="test">
                   <li><a href="">1</a></li>
                   <li><a href="">2</a></li>
                   <li><a href="">3</a></li>
               </ul>
                   </td></tr></tbody>
               </table>
               <table>
                   <tbody><tr><td>
               <ul class="test">
                   <li><a href="">1</a></li>
                   <li><a href="">2</a></li>
                   <li><a href="">3</a></li>
                   <li><a href="">4</a></li>
               </ul>
                   </td></tr></tbody>
               </table>
         </div>
      因爲table不是塊級元素,若是不設定寬度的話,它的寬度由內部元素的寬度"撐起",將ul放在table,經過設定父級元素居中從而使ul居中,
      
      方法二:
          <style type="text/css">
                    ul{list-style: none;margin:0;padding: 0;}
                    .wrap{background: #000;width:500px;height: 100px;}
                    .test{text-align: center;padding:5px;}
                    .test li {display: inline;}
                    .test a{padding:2px 6px;background: #316AC5;color:#fff;border: 1px solid #316AC5;text-decoration: none}
                    .test a:hover{background: #fff;color:#316AC5;}
     </style>
</head>
<body>
         <div class="wrap">
          <ul class="test">
              <li><a href="">1</a></li>
          <ul class="test">
              <li><a href="">1</a></li>
              <li><a href="">2</a></li>
              <li><a href="">3</a></li>
          </ul>
          <ul class="test">
              <li><a href="">1</a></li>
              <li><a href="">2</a></li>
              <li><a href="">3</a></li>
              <li><a href="">4</a></li>
          </ul>
         </div>
    經過將li這個塊級元素改成行內元素讓後設置text-align:center來進行居中
    
  (7)垂直居中問題:
       --- 父元素高度不肯定的文本,圖片,還有塊級元素的豎直居中
             <style type="text/css">
               .wrap{background: #000;width:500px;color:#fff;margin-bottom: 10px;padding-top: 20px;padding-bottom: 20px;}
               .test{width:200px;height: 50px;background: red;}
            </style>
           </head>
           <body>
                <div class="wrap">hello world</div>
                <div class="wrap"><img src="book.jpg"/></div>
                <div class="wrap"><div class="test"></div></div>
           </body>
           
           經過設定父容器的上下邊距相同來實現的,
    ---父元素高度肯定下的單行文本的垂直居中
      height:20px;line-height:20px;
    
    --- 父元素高度肯定的多行文本,圖片,塊級元素的垂直居中
           使用vertical-align:center;可是這個屬性只有在父元素爲td或者th的時候纔會生效,因此可使用table
               <style type="text/css">
               .wrap{background: #000;width:500px;color:#fff;height: 100px;}
               .test{width:200px;height: 50px;background: red;}
            </style>
       </head>
       <body>
               <table><tbody><tr><td class="wrap">
                   hello world </br>
                   hello world</br>
                   hello world
               </td></tr></tbody></table>
               <table>
                   <tbody><tr><td class="wrap">
                       <img src="book.jpg"/>
                   </td></tr></tbody>
               </table>
       </body>