6.盒模型

1. 盒子5个主要属性（width/height/margin/border/padding)

   //真实高度/宽度不等于占有高度/宽度
   padding：外边距
   border：边框
   margin：内边距
   width：CSS中指内容宽度，不是盒子
   height：CSS中指内容高度，不是盒子
   盒子占有宽度=padding*2+border*2+width //实际宽度不包含margin
   盒子占有高度=padding*2+border*2+height //实际高度不包含margin

2. padding

   border以内（margin/width/height)都具有相同颜色的background-color
   
    div{
       padding:2px 3px 4px 5px;//上右下左
       //如果只写两/三个值，则默认上下/左右一样。 
   }
    div{//小属性层叠大属性
       padding:6px;
       padding-right:5px; 
      //上右下左分别是6px 5px 6px 6px;
     //如果把上面顺序交换，则都是6px,这样写是无意义的，下面的属性层叠了上面的属性
   }    
    div{
     padding-left:2px;//被层叠
     padding-right:3px;//被层叠
     padding:4px 5px 3px;
    }
   有些元素具有默认的padding，譬如ul,因此提前清除他们的默认padding,*的效率不高，故罗列标签
   h1,h2,ul,ol,p{
      padding:0;
      margin:0;
   }

3. border（三要素：粗细/线型/颜色）

   border:1px dashed red;
   按要素
   border-width:1px;
   border-style:dashed;
   border-color:red blue green yellow;//上右下左
   按方向
   border-top:10px dotted blue;
   按方向拆后再按要素
   border-top-color:red;
   border-top-style:solid;
   缺边
   border-left:none;
   border-left-width:0;