宽度的流动性

宽度的流动性是指，当元素的 Width 为默认值时（即 auto），元素的内部盒子 Margin、Border、Padding 和 Content 区域自动分配其包含块水平空间的机制。
CSS3 中，Width 取值 fill-available 就是对这种流动性的描述。

流动性的体现

1.标准文档流中，块级元素的内部盒子( table 盒子除外 )具有这种流动性。

例子：

<style>
    /* 包含块 */  
    div {
        background: #ccc;
    }
    
    span {
        display: block;
        padding: 5px;
        border: 5px solid #FFC107;
        margin: 5px;
        background: #FFEB3B;
    }
</style>

<div>
    <span>hello</span>
</div>

2.绝对定位( absolute 与 fixed )的元素，如果对立方向同时发生定位，比如 left / right、top / buttom 同时设置定位属性，元素的内部盒子会具有流动性。

例子：

<style>
    /* 包含块 */  
    div {
        background: #ccc;
        position: relative;
        height: 100px;
    }
    
    span {
        background: #FFEB3B;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 5px;
        border: 5px solid sienna;
        margin: 5px;
    }
</style>

<div>
    <span>hello</span>
</div>

普通块级元素的流动性只有水平方向，但是绝对定位元素可以让垂直方向和水平方向同时保持流动性，对于布局非常实用。

例子：

<style>

    /* 初始包含块 */  
    /* 利用绝对定位元素的流动性和 margin:auto */
    /* 我们实现了元素的上下、左右保持居中的效果 */
    div {
        width: 50%;
        height: 50%;
        background: #FFEB3B;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 5px;
        border: 1px solid sienna;
        margin: auto;
    }
</style>

<div></div>

注意：width:100% 是对流动性的破坏

乍看上去，Width 取值 100%，元素会充满其包含块的水平空间，但实际上，Width 是作用在 Content 区域的，如果元素的 Margin、Border 和 Padding 区域发生变化，会导致元素的尺寸超出包含块，丧失流动性。

例子：

<style>
    /* 包含块 */  
    div {
        background: #ccc;
        width: 200px;
    }
    
    span {
        background: #FFEB3B;
        display: block;
        width: 100%;
        padding: 5px;
        border: 5px solid sienna;
        margin: 5px;
    }
</style>

<div>
    <span>hello</span>
</div>

例子中，我们可以看到，虽然包含块 div 元素的宽度已经设置为 200px，但 span 元素的整体水平尺寸是 220 px，已经超出包含块。我们可以使用 box-sizing：border-box，让 Border、Padding 和 Content 区域保持在包含块内部，但 Margin 区域依然会跑到外面去。

宽度的包裹性

宽度的包裹性是指，当元素的 Width 为默认值时（即 auto），元素的宽度由其子元素决定，但最大宽度不会超过其包含块。
CSS3 中，Width 取值 fit-content 就是对这种包裹性的描述。

包裹性的体现

浮动、绝对定位( 发生流动性除外 )的元素，内联块级元素以及 table 元素，具有这种包裹性。

例子：

<style>
    /* 包含块 */
    div {
        width: 150px;
        background: #ccc;
        padding: 5px;
    }
    
    span {
        display: inline-block;
        background: #FFEB3B;
    }
</style>

<div>
    <!-- span 的宽度由其子元素决定 -->
    <span>慕课网</span>
</div>

<div>
    <!-- span 内容过多时，会自动换行，不会超出其包含块   -->
    <span>慕课网是个其乐融融的大家庭！</span>
</div>

高度的计算

与宽度相比，高度的分配规则比较简单：只要元素的高度没有显式地指定，并且该元素不具有绝对定位流动性( 上文已经介绍过 )，则计算值为 auto。当元素内部没有子元素的时候，auto 表现为 0；如果有子元素，auto 表现为子元素高度的相加值。
高度和宽度最大的区别就是，宽度的默认值 auto，会通过计算转换成具体的数字；但高度的 auto，只是解释成 auto。正因为如此，导致 height 和 width 对百分比单位的支持上，存在分歧。

例子：

<style>
    body {
        margin: 0;
        padding: 0;
    }
    
    span {
        display: inline-block;
        width: 50%;
        height: 50%;
    }
</style>

<div>
    <span></span>
</div>

例子中，我们可以看到，height: 50% 无效。

让高度支持百分比单位

1.为元素的包含块显示地指定高度。

例子：

<style>
    /* 此时，html 和 body 的高度值是初始包含块的高度 */
    html,
    body {
        margin: 0;
        padding: 0;
        height: 100%;
    }
    
    div {
        width: 50%;
        height: 50%;
        background: #ccc;
    }
</style>

<div></div>

2.利用元素绝对定位的流动性。

例子：

<style>
    body {
        margin: 0;
        padding: 0;
    }
    
    div {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 50%;
        height: 50%;
        background: #ccc;
    }
</style>

<div></div>

两个例子的浏览器截图相同：

如有错误，欢迎指正，本人不胜感激。