关于CSS的盒子模型

所谓盒子模型就是把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部分和虚线边框。