CSS深入剖析box（混杂盒模型、弹性盒模型）

一、IE6混杂盒模型

1.正常盒模型

div{
    width: 200px;
    height: 200px;
    padding: 5px;
    border: 2px solid #000;
}

此时boxwidth = width + border * 2 + padding * 2

2.IE6混杂盒模型

div{
    width: 200px;
    height: 200px;
    padding: 5px;
    border: 2px solid #000;
    box-sizing: border-box;//触发IE6混杂盒模型
}

此时boxwidth = width

在项目中如果不是非常确定一些盒子的width和height，导致布局出现错列等情况，可以利用混杂盒模型，就可以不用再去计算padding和border的值。

二、overflow和resize

1.overflow

visible：默认值，对溢出内容不做处理，内容可能会超出容器。
hidden：隐藏溢出容器的内容且不出现滚动条。
scroll：隐藏溢出容器的内容，溢出的内容可以通过滚动呈现。
auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。textarea元素的overflow默认值就是auto。
overflow很简单，但是有一点需要注意，当有一项（overflow-x或overflow-y）不为默认值（visible）时，另一项的值就为auto。
即：设置一个方向可以滚动时。另一个方向也会出现滚动条（如果内容大于盒子容量的话）

2.resize

如果希望此属性生效，需要设置对象的overflow属性，值可以是auto,hidden或scroll。
none：不允许用户调整元素大小。
both：用户可以调节元素的宽度和高度。
horizontal：用户可以调节元素的宽度
vertical：用户可以调节元素的高度。

该属性的作用类似textarea（多行文本元素），使用者可以随意拉伸。

改属性改变容器大小容易导致布局改变，所以少用。

四、flex弹性盒模型

首先了解下弹性盒模型的历史

1. box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）
2. inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）
3. flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）
4. inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）
   现在的版本
5. flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）
6. inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）

1.flex和inline-flex的区别

他们的区别就和display：block与display：inline-block之间的区别类似

<div class="box">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>这是一个例子

样式：

<style>
    .box{
        width: 150px;
        height: 150px;
        border: 1px solid #000;
        display: flex;
    }
    .content{
        width: 50px;
        height: 50px;
        border: 1px solid #000;
        box-sizing: border-box;
    }
</style>

<style>
    .box{
        width: 150px;
        height: 150px;
        border: 1px solid #000;
        display: inline-flex;
    }
    .content{
        width: 50px;
        height: 50px;
        border: 1px solid #000;
        box-sizing: border-box;
    }
</style>

很明显，inline-flex类似行级块元素一样，后面内容会跟着目前元素（如果有足够空间）。

2.flex

1. flex-direction

row：默认值，主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
row-reverse：对齐方式与row相反。
column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
column-reverse：对齐方式与column相反

2. flex-wrap

nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：反转 wrap 排列。
初始样式

<style>
    .box{
        width: 150px;
        height: 150px;
        border: 1px solid #000;
        display: flex;
    }
    .content{
        width: 50px;//子元素所占宽度超过容器时，默认的是不换行，会压缩子元素。
        height: 50px;
        border: 1px solid #000;
        box-sizing: border-box;
    }
</style>

3.justify-content

设置弹性盒子元素在主轴（横轴）方向上的对齐方式
flex-start：默认样式，弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。

flex-end：弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。

center：弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。

space-between：弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于’flex-start’。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。

space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于’center’。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。
文档解释过于复杂，通过实例学习

<style>
    .box{
        width: 200px;
        height: 150px;
        border: 1px solid #000;
        display: flex;
        justify-content: flex-start;
    }
    .content{
        width: 50px;
        height: 50px;
        border: 1px solid #000;
        box-sizing: border-box;
    }
</style>

space-between当内部元素不换行且等于或超过容器宽，不在等距排列而是正好或者压缩子元素。如下：


space-around原理和space-between类似。

4.align-items

设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）结束位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

<style>
    .box{
        width: 200px;
        height: 150px;
        border: 1px solid #000;
        display: flex;
        align-items: baseline;
    }
    .content{
        width: 50px;
        height: 50px;
        border: 1px solid #000;
        box-sizing: border-box;
    }
    .content:first-of-type{/*第一个.content*/
        margin-top: 15px;
    }
</style>

align-items: baseline会相对内容基线对其。

<style>
    .box{
        width: 200px;
        height: 150px;
        border: 1px solid #000;
        display: flex;
        align-items: flex-start;
    }
    .content{
        width: 50px;/*子元素不设置高，align-items不设置stretch值时盒子只被内容撑开*/
        border: 1px solid #000;
        box-sizing: border-box;
    }
</style>

当子元素单行（不换行），利用justify-content: center和align-items: center进行居中

<style>
    .box{
        width: 200px;
        height: 150px;
        border: 1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .content{
        width: 50px;
        height: 50px;
        border: 1px solid #000;
        box-sizing: border-box;
    }
</style>

当子元素超过容器宽度进行换行，再利用它们居中

<style>
    .box{
        width: 200px;
        height: 150px;
        border: 1px solid #000;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    .content{
        width: 60px;
        height: 50px;
        border: 1px solid #000;
        box-sizing: border-box;
    }
</style>

而用align-content: center时（该属性对多行内容生效），该属性其他属性值较为少用，有兴趣自行了解

5.order

设置弹性盒模型对象的子元素出現的順序，且初始值为0。

<style>
    .box{
        width: 240px;
        height: 150px;
        border: 1px solid #000;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
    }
    .content{
        width: 50px;
        height: 50px;
        border: 1px solid #000;
        box-sizing: border-box;
    }
    .content:nth-child(1){
        order: 1;
    }
    .content:nth-child(2){
        order: -1;
    }
</style>

order值越小，越靠前。

6.align-self

定义弹性盒子子元素单独在侧轴（纵轴）方向上的对齐方式
auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制
与align-items属性值效果类似，但是当align-items与align-self都设置时，align-items优先（集体主义）

7.flex-grow

设置或检索弹性盒的扩展比率（主轴还有剩余空间时）

<style>
    .box{
        width: 210px;
        height: 150px;
        border: 1px solid #000;
        display: flex;
    }
    .content{
        width: 50px;
        height: 50px;
        border: 1px solid #000;
        box-sizing: border-box;
        flex-grow: 1;
    }
</style>

从50px到70px（box-sizing: border-box），分别给子元素设置时，0为不扩张，大于0时则按份数分配。

8.flex-basis

设置或检索弹性盒伸缩基准值，默认值为auto（与width对齐）

<style>
    .box{
        width: 210px;
        height: 150px;
        border: 1px solid #000;
        display: flex;
    }
    .content{
        flex-basis: 70px;
        width: 50px;
        height: 50px;
        border: 1px solid #000;
        box-sizing: border-box;
        flex-grow: 1;
    }
</style>

正常情况下，flex-basis和width同时存在时，以flex-basis为准（即权重高）
但是：
当内容不换行时，只写flex-basis代表元素最小宽度；两者一起时，width时元素的宽度的上限。

<style>
    .box{
        width: 210px;
        height: 150px;
        border: 1px solid #000;
        display: flex;
    }
    .content{
        width: 70px;
        height: 60px;
        border: 1px solid #000;
    }
    .content:nth-of-type(1){
        flex-basis: 40px;
    }
</style>

此时不换行且不超过最低宽度flex-basis: 40px，不变化

超过最低宽度但不超过最大宽度width: 70px，扩展

超过最大宽度，不换行前提下文字溢出

9.flex-shrink

设置或检索弹性盒的收缩比率，但是它的压缩比率计算方式较为复杂
通过下面例子进行讲解：

<style>
    .box{
        width: 200px;
        height: 150px;
        border: 1px solid #000;
        display: flex;
    }
    .content{
        width: 60px;
        height: 60px;
        background-color: skyblue;/*防止border值对实验影响，改用背景颜色显示子元素区域*/
        padding: 0 10px;
        box-sizing: border-box;
        flex-grow: 1;
        flex-shrink: 1;/*分配比率*/
    }
    .content:nth-of-type(2){
        background-color: thistle;
    }
    .content:nth-of-type(3){
        width: 100px;/*三个子元素宽度已经超过盒子宽度，且未换行*/
        flex-shrink: 3;
        background-color: tomato;
    }
</style>

正常情况下：60px+60px+100px=220px；一般会算成：
（220-200）/（1+1+3）=4px（前者为超出宽度，后者为收缩比率），得出：
大儿子实际宽度：60-1 * 4=56px
二儿子：56px
三儿子：100-3*4=88px

但实际并不是！！！！

那么真正计算方式是：

（子元素真实内容区大小*自己shrink/（三个子元素真实内容区大小*\它们自己shrink））*多出宽度
例三儿子真实内容区宽度：（（100px-20padding px）*3/（（60px-20padding px）* 1 *2+（100px-20padding px）*3）））*（20 px）=15px
则三儿子的最终宽度80px - 65px+padding+border

10.flex应用

弹性盒子在很多方面能够替换以往的float和position，一者不会触发BFC等影响布局的因素，二者是其现在兼容性较好，可扩展性强。
例：弹性导航