包含块:影响元素尺寸和位置

  • HTML&CSS入门学习笔记

  • 包含块的影响
  • 包含块的确定

    1. position: static / relative;
    2. position: absolute;
    3. position: fixed;
    4. position: absolute/ fixed;(满足特定条件)

包含块的影响

*一个元素的尺寸和位置经常受其包含块的影响
  1. 盒模型属性

    (1)一个元素的 width、margin 和 padding 属性由包含块的 width 属性的值来计算其百分值。

    (2)一个元素的 height 属性由包含块的 height 属性的值来计算其百分值(如果包含块的 height 根据内容变化,而且包含块的 position 属性的值被赋予 relative 或 static,那么,height 的计算值为0)。

如果包含块的高度没有显式指定(即高度由内容决定),并且该元素不是绝对定位,则包含块的高度计算值为 auto。

  • 偏移属性

    (1)left 和 right 属性由包含块的 width 属性的值来计算其百分值。

    (2)top和 bottom 属性由包含块的 height属性的值来计算其百分值。

  • 包含块的确定

    *一个元素的包含块并不通常是其父元素的 content 区域

    确定一个元素的包含块的过程完全依赖于这个元素的 position 属性

    1. position: static / relative;

    包含块:该元素最近的祖先块元素或格式化上下文的内容区的边缘组成。
      祖先块元素:block / inline-block / list-item.
      格式化上下文:a table container / flex container / grid container / the block container itself.

    <body>
            <section>
                <p>This is a paragraph!p>
            section>
        body>
    
    
    
    包含块:影响元素尺寸和位置_第1张图片 包含块:影响元素尺寸和位置_第2张图片

         display: block;                display: inline;

    
    

    2. position: absolute;

    包含块:该元素最近的 position 的值不为 static 的祖先元素的内边距区的边缘组成。

    
    
    包含块:影响元素尺寸和位置_第3张图片 包含块:影响元素尺寸和位置_第4张图片

        box-sing: content-box;(默认)            box-sizing: border-box;

    若设置包含块即 section 的 box-sizing 的属性的值 为 border-box(width包括padding和border) 时,则不再按照内边距区的边缘计算,而是按照内容区的边缘计算。

    绝对定位元素的宽高百分比计算相对于 padding box
    非绝对定位元素的宽高百分比计算相对于 content box

    3. position: fixed;

    包含块:

    (1)连续媒体(continuous media):viewport。

    (2)分页媒体(page media):page area。

      根元素()所在的包含块是一个被称为初始包含块的矩形,它具有 viewport (用于连续媒体)或 page area(用于page media)的尺寸。

    
    
    包含块:影响元素尺寸和位置_第5张图片

    4. position: absolute/ fixed;

    包含块:可能是满足特定条件的最近父级元素的内边距区的边缘组成

    (1)transform 或 perspective 属性值不为 none;

    (2)will-change 属性值为 transform 或 perspective;

    (3)filter 属性值不为 none 或者will-change 属性值为 filter(仅适用于 Firefox);

    (4)contain 属性值为 paint;

    
    
    包含块:影响元素尺寸和位置_第6张图片 包含块:影响元素尺寸和位置_第7张图片

        box-sing: content-box;(默认)            box-sizing: border-box;

    参考:

    • https://developer.mozilla.org/zh-CN/docs/Web/CSS/All_About_The_Containing_Block

    你可能感兴趣的:(HTML&CSS入门学习笔记)