CSS3学习笔记三---怪异盒模型 | 弹性盒*

一：怪异盒模型

1：box-sizing: content-box；正常盒子模型

2：box-sizing: border-box；怪异盒模型

两者区别：正常盒子宽高设置好了，之后加padding、border、margin等，盒子的宽高会变大；怪异盒模型则是，设置好盒子宽高，加padding、border、margin等，盒子宽高不变，会往内挤压空间。

案例：回想之前多个盒子浮动案例，最后一个盒子需要单独设置padding或者margin，可以设置每个盒子都为怪异盒，设置padding或者margin等，盒子的总宽高一直不会改变。

二：弹性盒（弹性盒是一种布局方式，适合用于移动端布局）

        display: flex;/*  弹性盒 */

1：弹性盒会让盒子内的子元素默认横向排列；

2：父盒子设置为弹性盒后，子元素为行内元素的话会自动变为块级元素；

3：父盒子设置为弹性盒后，子盒子设置：margin: auto；子盒子会自动在父盒子中间水平垂直居中；

        ****仅限只有一个子元素的情况

4：修改主轴方向

        a：默认主轴为水平方向，垂直于主轴的轴为侧轴，默认侧轴为垂直方向排列。

        b：修改主轴为竖直方向：flex-direction: column;

                /* 取值row，row-reverse，column，column-reverse */

                           横向   横向的反向     竖向        竖向的反向

                        从左到右→从右向左     从上到下→从下到上

5：修改主轴、侧轴对齐方式

      a：主轴  justify-content: center；

           取值：flex-start，flex-end，center，space-between，space-around；

                               靠右           靠左         中间       两端对齐              距离环绕

           距离环绕：所有元素都添加了相同的左右margin，子盒子自身的左右两边等距。（等比对齐？）

        b：侧轴  align-items：flex-start；

             取值：flex-start，flex-end，center；

                                  靠上          靠下         中间

6：子元素折行

        默认子元素不会换行，所有内容会在一行排列上，所以需要自己设置折行；

        flex-wrap: wrap；/*  折行 */

        在父盒子上设置折行即可，其中的子盒子一行装不下会自动折行；

7：行间距

        修改折行后默认的子盒子行间距；

        align-content：flex-start；

        取值：flex-start，flex-end，center，space-around，space-between；

8：项目---对齐方式（大盒子叫容器，大盒子中的小盒子为项目）

        align-self：flex-end；单个项目添加这个属性可以设置这个项目单独的对齐方式。

        baseline，flex-start，flex-end，center，stretch（拉伸，占满整个高度/宽度空间）；

      主轴是横轴，需要设置宽度；主轴是纵轴，则需要设置高度。

9：项目---调整顺序(应用较少)

        order：0；（默认值为0）

        order值小的在前，权重最小的在前。

10：项目---剩余宽高（重要！！可用来设置三栏布局等）

        flex：1；（指定项目的属性）

        左边盒子和右边盒子宽度固定，中间盒子占满剩余空间，给中间盒子设置flex属性。

        如果多个项目都设置了flex属性：按照设置的属性比例生效，比如设置为10，其他两个盒子设置为1，则10的盒子占10/12的空间，其他的占1/12的空间。