盒模型基本内容
内边距：padding
外边距：margin
边框：border
盒子边框（border）
border : border-width || border-style || border-color
边框样式用于定义页面中边框的风格，常用属性：
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线（最为常用的）
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
简写方式
border：1px solid #ccc;
宽度、样式、颜色
圆角边框（radius）
border-radius：左上角 右上角 右下角 左下角;
/* 从左上角开始顺时针分配值 */
border-radius：50%;
/* 使用50%边框可以变成一个圆 */
border-radius：10px 40px;
/* 使用两个值的时候默认第一个值设置左上角和右下角，第二个值设置右上角和左下角，即为对角线 */
border-radius：10px 40px 80px;
/* 使用三个值的时候默认第一个值是设置左上角，第二个值设置右上角和左下角，第三个值设置右下角，即第二个值设置的是对角线 */
内边距（padding）
内容距离边框的距离
padding-left:20px;
padding-right:30px;
padding-bottom:40px;
padding-top:50px;
/* 分别设置上下左右四个方向的内边距 */
简写方式
padding:20px;
/* 表示上下左右内边距都是20px的距离 */
padding:20px 30px;
/* 上下是20px 左右是30px的内边距 */
padding:10px 20px 50px;
/* 上内边距时10px 左右内边距是20px 下内边距是50px */
padding:10px 20px 30px 40px;
/* 顺时针的，上右下左 */
外边距（margin）
盒子外面的边距
margin-top:10px;
margin-right:20px;
margin-left:30px;
margin-bottom:40px;
/* 分别设置上右下左的外边距 */
/* 外边距简写方式与内边距相同 */
外边距实现盒子居中对齐
可以让一个盒子实现水平居中，需要满足以下的两个条件
1、必须是块级元素
2、盒子必须指定了宽度（width）
然后给左右外边距设置为auto，就可以是块级元素水平居中。
.head{
width:960px;
margin:0 auto; /*实现盒子居中对齐，上下随便，左右一定是auto*/
}
文字水平居中和盒子水平居中
/* 文字水平居中 */
text-align:center;
/* 盒子水平居中 */
margin:10px auto;
盒模型类别
内容盒模型：content-box
宽度只包含里面的content
实际内容宽度等于：width + border + padding
边框盒模型：border-box
宽度包含content、border、padding
实际内容宽度等于：width
