HTML初涉（4）

1. 常犯錯誤：

        不加ductype,導致低版本IE解析效果不一致

         id得到命名爲數字

         編碼不一致，文件編寫與charset不一致

2. 邊框設計

    （1）margin設置：

                 margin：10px；//設置了四個方向外邊框的大小

                 設置單邊框：margin-top、margin-right、margin-left、margin-bottom。若margin：10px，20px；則按順時針方向旋轉分配，若其他方向上沒有數字，則取對  邊值。

                 margin的重疊現象：相鄰的普通元素上下邊距並不是簡單相加，而是取兩者中的最大值。

     （2）border設置：

                  border：10px solid green；//設置四個方向上邊框爲綠色實線

                  單邊框的設置同margin。

                  border的設置：寬border-width:10px   、形狀border-style：solid / dashed（虛線）/dotted（點線）  、顏色border-color：green

         擴展：用css控制邊框畫一個三角形

                    推薦：http://www.cnblogs.com/blosaa/p/3823695.html

                   <div class="one"></div>

                   .one{
                       width: 0px;
                       height: 0px;
                       border-bottom: 100px solid red;
                       border-left:100px solid transparent;
                       border-right:100px solid transparent;
                     }

                   Why？讓我們做個代碼實驗，看效果圖！！

              <div class="two"></div>

                            

              .two{
                  width: 100px;
                  height: 100px;
                  border-top: 30px solid red;
                  border-left:30px solid green;
                  border-right:30px solid yellow;
                  border-bottom: 30px solid blue;
               }

     

                                                                          試着畫畫聖誕樹吧。。。。。。。

  （3）padding設置：

                 內邊距padding：10px；//表示邊框和文字之間的距離值

                 書寫方式同margin

PS：父div與子div保持距離，優先用margin（盒與盒）、其次爲padding（文字與盒）

父子div也會發生margin重疊嗎？

     答：會！注意父div有無float時的區別。

           a.  有：子div在父div中margin

           b.  無：子margin與父margin中選最大