css盒子模型（边框）

一、.盒子模型（Box Model）组成

所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距和实际内容

二、边框（border）

（1）有默认值，默认颜色是黑色

（2）可以写多个颜色，以空格隔开

格式：
         border:颜色，大小，样式;
         border-top:颜色，大小，样式;
         border-right:颜色，大小，样式;
         border-bottom:颜色，大小，样式;
         border-left:颜色，大小，样式;

注意：        solid  实线
                  dashed  虚线
                  dotted  点状虚线
                  double  双线

三、边框会影响盒子的实际大小 

边框会额外增加盒子的实际大小，因此我们有两种方案解决：

1. 测试盒子大小的时候，不量边框
2. 如果测量的时候包含了边框，则需要 width/height 减去边框宽度

四、内边框（padding）

格式: padding-top：xxpx;  上内边距     
        padding-right：xxpx;  右内边距
        padding-bottom：xxpx; 下内边距
        padding-left：xxpx;   左内边距

五、外边框（margin）

格式：

          margin：xxpx;  外边距   指的是当前盒子和其他盒子之间的距离
          margin-top ：xxpx;   上外边距    盒子正值向下移动，负值向上移动
          margin-right：xxpx;  右外边距    默认情况，设置margin-right是没有效果
          margin-bottom：xxpx;  下外边距   盒子自己不动，挤下面的盒子移动，正值向下，负值向上
          margin-left：xxpx;    左外边距   盒子正值向右移动，负值向左移动