20、特殊盒模型

盒模型的设置：
    box-sizing:
        标准盒模型：content-box
            盒子的宽：border + padding + width
            盒子的高：border + padding + height
        怪异模型：border-box
            盒子的宽：就是设置的width，会包含border + padding
            盒子的高：就是设置的height，会包含border + padding

弹性盒模型:
    意义：
        可以营造和浮动相同的效果，并且对于盒模型内部的样式排列更加方便，但是现在w3c并未公布标准，需要添加浏览器内核前缀，并不是所有浏览器都支持。

    使用方法(父级)：如果想要搭建弹性盒模型，首先要在父级建立弹性盒模型的空间。
        修改为弹性盒模型显示
            display: -webkit-box; 
        排列方式有两种，垂直或水平方向，使用的比较少
            -webkit-box-orient:vertical;/horizontal;
        子级的排列位置，在父级加上以下代码：
            -webkit-box-pack:center;
                参数：
                    start   从左到右 （默认值）
                    center  居中
                    end     从右到左 （但是和float的从右到左刚好相反）
                    justify 根据父级的宽度等分
        
    使用方法(子级)：
        -webkit-box-flex:具体正数数值（代表占父级宽度的份数）