手记

宽度的流动性与包裹性

宽度的流动性

宽度的流动性是指,当元素的 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>

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


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

0人推荐
随时随地看视频
慕课网APP