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中選最大