所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
内边距（padding）： 内容与边框之间的距离
外边距（margin）: 盒子与盒子之间的距离
盒子模型的大小 内容大小（宽高决定）+border +padding+margin
内容大小（宽高决定）
border 边框
padding 内边距 填充
margin 外边距
margin-left 向右移动的距离
margin-right 向左移动的距离
margin-top 向下移动的距离
margin-bottomyi 向上移动的距离
margin 10px 20px 30px 40px
上 右 下 左
margin 10px 20px
上下 左右
margin 10px 20px 30px
上 左右 下
padding 和margin一样
块级标签和行内块标签水平居中 margin： 0 auto
行内标签水平居中 text-align:center
行内元素竖直方向居中
display: table-cell;
vertical-align: middle;
padding是内容和其边框线之间的空间， margin是一个元素与另一个元素之间的空白。width和height默认指内容的宽度和高度。box-sizing: border-box |padding-box|content-box(默认); //(Firefox: -moz-box-sizing Safari或
chrome或android:-webkit-box-sizing ) -ms- IEbackground-color 用颜色填充边框内部的空间，包括padding部分和虚线边框。
