盒子模型

一.边框
　　 1.边框颜色  
  　　　　　　border-color 边框颜色(可以设置上边框，如:border-top-color,也可以整体设置，但是要注意顺序)
  
　　 2.边框粗细  
  　　　　　　border-width 边框粗细(可以设置上边框，如:border-top-width,也可以整体设置，但是要注意顺序)
  
　　 3.边框样式  
  　　　　　　border-style 边框样式(可以设置上边框，如:border-top-style,也可以整体设置，但是要注意顺序)
  
二.外边距
 　　1.margin:

　　　　　   盒子距离浏览器的距离  (可以设置上外边距，如:margin-top,也可以整体设置，但是要注意顺序)
 
 　　2.居中:

　　　　　 margin: 0px auto

 

三.内边距 
 　　1.padding：  

　　　　　　　内容到盒子的距离  (可以设置上内边距，如:padding-top,也可以整体设置，但是要注意顺序)
 

四.盒子模型的尺寸
　　 1.尺寸默认：

　　　　　　　padding+margin+wigth+border
 
　　 2.box-sizing：

　　　　　　 方便计算盒子模型尺寸（默认为content-box，border-box代表随着内容的宽度高度变化而变化）

 

五.圆角
　　 border-radius ：

　　　　　　　　圆角（左上，右上，右下，左下）
 　　　　/*如果想要一个圆，那么必须满足宽和高一致，圆角取宽度或者高度的二分之一*/
　　　　 /*如果想要半圆，那么必须满足宽是高的2倍，圆角取宽度的二分之一*/
 　　　　/*如果想要四分之一圆，那么必须满足宽和高相等，圆角取宽度相等值*/
 
六.盒子阴影
　　　　　1.box-shadow:

　　　　　　　　　　 默认为外阴影，内阴影为inset
　　　　　 2.box-shadow:

　　　　　　　　　　5px -5px 20px black;