【盒子模型:边框，内边距】

元素布局到页面，就像想买个桌子，放到家里，要知道桌子的大小，形状，然后才能放到家里所以我们把所有的元素都想成盒子，矩形
  盒模型、盒子模型、框模型（box model）
  内容区（content）  边框（border）内边距（padding） 外边距（margin）
  影响盒子大小的元素：内容区，边框，内边距 ，外边距不影响盒子的大小
  内容区(content)  元素中所有的子元素和文本内容都在内容区中排列
 width   设置内容区的宽度
 height  设置内容区的高度

 2:边框（border）元素设置边框
设置边框必须指定三个样式 分别是颜色，大小，样式
border-color: ;  设置边框的颜色
有默认颜色是黑色;可以写多个颜色  以空格隔开
                   4个   上  右  下   左
                   3个   上   左右   下
                   2个   上下  左右
                   1个   上下左右
border-xxx-color  特指top  right  bottom left某一边颜色
border-width: ;  设置边框的大小
默认值大概1-3px;也可以跟多个值  以空格隔开
                  4个   上  右  下   左
                  3个   上   左右   下
                  2个   上下  左右
                  1个   上下左右
border-xxx-width 特指top  right  bottom left某一边宽度
border-style: ;  设置边框的样式
默认值  none
solid实线      dashed 虚线      dotted 点状虚线          double 双线
  border简写
border:颜色，大小，样式;         
border-top:颜色，大小，样式       ;
border-right:颜色，大小，样式         ;
border-bottom:颜色，大小，样式         ;
border-left:颜色，大小         ，        
内边距（padding）指的是内容区和边框之间的距离
padding-top  上内边距          
padding-right  右内边距       
padding-bottom 下内边距       
padding-left   左内边距       
padding:xxx;  简写
可以跟多个值，4个 3个 2个 1个，规则跟border-width一样