怪异盒模型（IE盒模型）

在IE低版本的浏览器中如果丢失了文档类型，触发IE盒模型

属性：box-sizing

    属性值：

    –    content-box    默认值    标准盒模型

    –    border-box    怪异盒模型

特点

    –    当盒子形成了怪异盒模型之后，padding值不会撑大容器大小，不需要减去padding值

    –    border是向盒子内部形成的

怪异盒模型宽高大小的计算方式

    –    计算自身的大小    content（包含padding和border）

    –    盒子在浏览器中所占位置的大小    content（padding+border）+margin

和普通盒模型的区别

    –    不需要计算border和padding的值

    –    工作的项目中如果使用到怪异盒模型    不考虑兼容问题（移动端都是-webkit-内核）

    –    由于兼容问题    怪异盒模型都是在移动端使用，不建议在PC端使用

弹性盒模型的基础概念（控制子集元素在父级容器中的排列位置）

    属性：display

    属性值：flex

        –    盒模型是控制子集元素在父级容器中的位置，flex一定要设置在父级容器上

        –    形成盒模型后，默认的主轴方向是X轴，侧轴是Y轴（可以通过设置改变）

        –    盒模型中的任何元素类型，都可以直接设置宽高大小，

        –    居中方式

之前的居中方式   –    表格居中    align/valign

                            –    文本居中    text-align/line-height

                            –    图片居中    基线对齐

                            –    背景图片居中    background-position

                            –    版心居中    margin：0 auto

                            –    定位居中：已知大小设置50%宽高，再减去一半的自身宽高

                                                  未知大小设置left，right，top，bottom为0；再margin auto

                            –    弹性盒模型居中    单个元素居中：margin ：auto

在弹性盒模型中，浮动不可以使用，定位，盒模型都可以正常使用

弹性盒模型的属性

    设置在父级上面的属性 =>控制所有的子级元素

    设置在子集上面的属性  =>控制单个子级元素

 1.改变默认的主轴方向

    属性：flex-direction

    属性值：

        –    row    X轴方向为主轴方向（默认值）

        –    column    Y轴方向为主轴方向

2.对齐方向

    ①主轴上的对齐方向

        属性：justify-content    

        属性值

            –    flex-start    默认值，表示元素在起始位置

            –    flex-end    表示元素在结束位置

            –    center    居中

            –    space-between    两端对齐，其余空间自动分配

            –    space-around    所有子级元素左右间距都是一样

            –    space-evenly    所有子级元素之间的间距都是一样的

    ②侧轴上的对齐方向

        属性：align-items

        属性值：

            –    flex-start    同上

            –    flex-end

            –    center

            –    baseline    基线对齐

                    当所有子级元素宽高都一样的情况下，baseline和flex-start的效果一样

                    当子级元素不设置高度的情况下不设置baseline，子级会默认拉伸

                    当所有子级元素都是文本的情况下，排列方式都是基线对齐

            –    stretch    拉伸

    ③当子级元素的总宽度大于父级的时候，默认是进行挤压，不会掉下去

            换行属性：flex-wrap

            属性值：

                –    nowrap    不换行（默认）

                –    wrap    换行

    ④当设置换行时，行与行之间默认间距较大

        属性：align-conter

        属性值：

            –    常用   flex-start    换行为起始位置

            –    flex-end

            –    center

            –    space-between

            –    space-around

            –    space-evenly

添加在子级元素的属性：控制单个元素的位置

1.控制子级元素在侧轴上的对齐方式

        属性：align-self

        属性值：

                –    flex-start    同上

                –    flex-end    

                –    center

                –    auto

                        父级元素有侧轴的对齐方向 继承父级元素的对齐方式

                        父级元素没有侧轴的对齐方向    默认为拉伸

                –    stretch    拉伸

2.order    优先级    number    往后显示

属性flex的使用（不是属性值flex）

    属性：flex

    属性值：

      number

        常用的是1，也可以设置2,3,4 

    设置为1的时候一般用于移动端中间main布局，上下为固定高度，中间设置flex为1可以自适应到用户手机屏幕的宽度。

      flex-grow：空间分配

    0  为当前元素正常显示分配

    1  当前元素分配比例   

      flex-shirnk：收缩的量

    0    表示不缩放

    1    表示正常缩放    

     flex-basis：显示的比例

    auto    正常显示

    0%~100%    所占比例（不会撑开父级元素，会把其他子级撑小）