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

最新推荐文章于 2021-10-28 21:18:12 发布

性灵

最新推荐文章于 2021-10-28 21:18:12 发布

阅读量199

点赞数

分类专栏： HTML&CSS入门学习笔记文章标签： html css html5 css3 前端

本文链接：https://blog.csdn.net/qq_43811093/article/details/105064486

版权

HTML&CSS入门学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML&CSS入门学习笔记

包含块的影响
包含块的确定
1. position: static / relative;
2. position: absolute;
3. position: fixed;
4. position: absolute/ fixed;（满足特定条件）

包含块的影响

*一个元素的尺寸和位置经常受其包含块的影响

盒模型属性

（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>

<style>
	 *{margin: 0; padding: 0;}
	 body{background: beige;}
	  /* 注：section默认display: block; 这里设置是为了对比 */
	  section{display: block; width: 400px; height: 160px; background: lightgray;}
	  p{width: 50%; height: 25%; margin: 5%; padding: 5%; background: cyan;}
	  /* position: static/relative;   包含块就是由它的最近的祖先块元素或格式化上下文的内容区的边缘组成的 */
	  /* p标签默认为 static 定位，所以其包含块为section */
	  /* height/top/bottom  -->  height  */ 
	  /* 包含块的height根据内容变化且定位为static/relative + 包含块的position:relative/static; --> 百分比为0 */
	  /* width/left/right/padding/margin  -->  width */
	  /* width：400*0.5=200px 
	     height：160px*0.25=40px  
	     margin：400px*0.05=20px  
	     padding: 400px*0.05=20px */
</style>

display: block; display: inline;

<style>
            *{margin: 0; padding: 0;}
            body{background: beige;}
            section{display: inline; background: lightgray;}
            p{width: 50%; height: 20%; background: cyan; margin: 5%; padding: 5%; font-size: 20px;} 
            /* section不再是一个块容器，所以没有形成一个格式上下文，则p标签的包含块为body */
            /* width: body宽度的一半  height:a percentage would be 0 */
            /* 高度随着内容变化 */
            /* 调整：body: 228px; width: 114px; margin: 11.4px padding: 114px */
</style>

2. position: absolute;

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

<style>
            body{background: beige;}
            section{position: absolute; left: 30px; top: 30px; width: 400px; height: 160px; padding: 30px 20px; background: lightgray;}
            p{position: absolute; width: 50%; height: 25%; margin: 5%; padding: 5%; background: cyan;}
            /* position: absolute;  包含块就是由它的最近的position的值不是static的祖先元素的内边距区的边缘组成 */
            /* width:(400px+20px*2)*0.5=220px   
               height:(160px+30px*2)*0.25=55px
               margin: (400px+20px*2)*0.05=22px 
               padding: (400px+20px*2)*0.05=22px */
</style>

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。

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

<style>
            body{background: beige;}
            section{width: 400px; height: 480px; margin: 30px; padding: 15px; background: lightgray;}
            p{position: fixed; width: 50%; height: 50%; margin: 5%; padding: 5%; background: cyan;}
            /* position: fixed; 连续媒体：包含块就是viewport； 分页媒体：包含块就是分页区域 */
            /* 包含块就是初始包含块（在屏幕上，也就是viewport） */
            /* 因此，p标签的尺寸大小会随着浏览器窗框大小的变化，而变化 */
            /* 根元素所在的包含块是一个被称为初始包含块的矩形 */
            /* width：width of vertical scrollbar——50vw
               height: height of horizontal scrollbar——50vh
               margin/padding: width of vertical scrollbar——5vw */
</style>

4. position: absolute/ fixed;

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

（1）transform 或 perspective 属性值不为 none；

（2）will-change 属性值为 transform 或 perspective；

（3）filter 属性值不为 none 或者will-change 属性值为 filter（仅适用于 Firefox）；

（4）contain 属性值为 paint；

<style>
            body{background: beige;}
            section{transform: rotate(0deg); width: 400px; height: 160px; background: lightgray; margin: 20px 30px; padding: 50px 10px;}
            p{position: absolute; left: 80px; top: 30px; width: 50%; height: 25%; margin: 5%; padding: 5%; background: cyan;}
            /* position: absolute/fixed;  包含块也可能是满足特定条件的最近父级元素的内边距区的边缘组成 */
            /* 特定条件1：transform或perspective不为none */
            /* width: (400px+10px*2)*0.5=210px
               height: (160px+50px*2)*0.25=65px
               margin/padding: (400px+10px*2)*0.05=21px */
</style>

box-sing: content-box;（默认） box-sizing: border-box;

参考：

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

性灵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
包含块：影响元素尺寸和位置

前端入门学习笔记（持续更新中）包含块的影响确定包含块包含块的影响*一个元素的尺寸和位置经常受其包含块的影响盒模型属性（1）一个元素的 width、margin 和 padding 属性由包含块的 width 属性的值来计算其百分值。（2）一个元素的 height 属性由包含块的 height 属性的值来计算其百分值（如果包含块的 height ...
复制链接

扫一扫