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