内边距与外边距

padding（盒子内边距，会改变盒子显示的大小，是复合属性，按上右下左顺序）
顺序是按照 上右下左的顺序来设置的
            padding: 20px 15px 10px 5px;
            分开设置
            padding-top:20px;
            padding-right:15px;
            padding-bottom: 10px;
            padding-left:5px;
下面的会把上面的属性值覆盖
            padding:20px;
            padding-top:40px;
            上10px  左右20px 下15px 
            padding:10px 20px 15px;
            上下 10px 左右 20px；
            padding:10px 20px;

外边距margin
            上右下左的外边距都是30px
            margin:30px;
            上边距30 左右20 下40 
            margin:30px 20px 40px; 
            上下10 左右30 
            margin:10px 30px; 
            margin-top: 10px;
            margin-right: 20px;
            margin-bottom: 30px; 
            margin可以给负值，会超出边界
            margin-left: -40px; 
            下面的会把上面相同属性的值覆盖
            margin:30px;
            margin-left:-30px;

盒子的宽=width+padding2+border2 盒子的高=height+padding2+border2 怪异盒子模型：width：= height：= box-sizing=border-box 默认盒子模型：box-sizing=content-box 水平居中 margin：0px auto； 后代选择器ul li 子选择器ul>li

练习 写一个div 他的宽度 300 高度 400 外边距20 内边距30 边框是5
请算出 盒子的实际显示宽度和高度
         300+30+30+5+5（margin不作为实际的显示宽度）370
         400+30+30+5+5（margin不作为实际的显示宽度）470
          怪异盒子模型(实际宽度为300高度为400)
          div{
            width: 300px;
            height: 400px;
            margin:20px;
            padding:30px;
            border:5px solid red;
            box-sizing: border-box;
        }