宽度的流动性与包裹性

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

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

例子：

      
    div {
 background: #ccc;
    }
    
    span {
 display: block;
 padding: 5px;
 border: 5px solid #FFC107;
 margin: 5px;
 background: #FFEB3B;
    }



    hello

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

例子：

      
    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;
    }



    hello

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

例子：

      
    
    
    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;
    }

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

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

例子：

      
    div {
 background: #ccc;
 width: 200px;
    }
    
    span {
 background: #FFEB3B;
 display: block;
 width: 100%;
 padding: 5px;
 border: 5px solid sienna;
 margin: 5px;
    }



    hello

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

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

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

例子：

    
    div {
 width: 150px;
 background: #ccc;
 padding: 5px;
    }
    
    span {
 display: inline-block;
 background: #FFEB3B;
    }



    
    慕课网



    
    慕课网是个其乐融融的大家庭！

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

例子：

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



    

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

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

例子：

    
    html,
    body {
 margin: 0;
 padding: 0;
 height: 100%;
    }
    
    div {
 width: 50%;
 height: 50%;
 background: #ccc;
    }

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

例子：

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

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

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