初始容纳块、初始包含块、第一屏

Jason_HeSL

于 2021-09-10 20:44:21 发布

阅读量294

点赞数 2

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_49105225/article/details/120229413

版权

在定位的时候，大家都听说过子绝父相，但如果是子绝父不相的情况嘞，大家有没有考虑过他是基于什么来进行定位的；

首先先说一下初始容纳块是什么东西，在css权威指南中，对于浮动元素，容纳块是最近的祖辈块元素。对于绝对定位（absolute）的元素，容纳块为最近的非static定位的父级块元素。而初始容纳块就是页面的第一屏；

下面我来通过代码的形式，一一来解释这个问题。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			
			html{
				width: 500px;
				height: 500px;
				margin-left: 100px;
				border: 10px solid black;
				background-color: red;
				/*html比较特殊，特殊原因它的部分属性作用的不是自己 而是document*/
				/*doucument是网页最外层的元素，html文档当中没有任何标签标示它*/
			}
			
			body{
				width: 300px;
				height: 3000px;
				border: 10px solid yellow;
				background-color: blue;
				/*body比较特殊，单独的给Body设置某些属性，作用的不是自己 而是document*/
				/*doucument是网页最外层的元素，html文档当中没有任何标签标示它*/
			}
					
			#box{
				position: absolute;
				left: 0;
				top: 0;
				width: 200px;
				height: 200px;
				background-color: red;
			}
			
			/*初始包含块：和浏览器第一屏大小一致的一个块状结构，称作初始包含块，元素子绝父不相的时候
			 其实相对的是初始包含块去做的定位，不是body也不是html也不是视口
			 * */
			
			/*
			 以后，打开浏览器最外层的结构，首先是document，接着是初始包含块 ， HTML ， body
			 
			 */
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

从这里可以看出，我在div中设置了定位，且top和left都为0；然后我将HTML使用margin将其往左顶了一些，可以看到我的div并没有跟着HTML和body一起走，所以说他并不是基于HTML和body进行定位的。那么继续看代码，他到底是对于哪来定位；

#box {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200px;
    height: 200px;
    background-color: red;
}

我将biv的top换为bottom，他就直接跑到当前视口的最下面，看下面的图，注意滚动条；

将页面滚动，那么就可以发现这个div，他就定在了这，并没有根据视口和页面进行定位，若根据视口定位的话，他会一直定在页面的左下角；若是基于页面进行定位那么，他这个div应该会直接在页面的最下方，但都没有，所以可以由此推出，他并不是基于视口和页面进行定位。

然后现在回去看一开始说的这个定义：对于绝对定位（absolute）的元素，容纳块为最近的非static定位的父级块元素。而初始容纳块就是页面的第一屏；

一步一步来分析这句话，对于绝对定位的元素，也就是这个div，当他设置了绝对定位后，他就会去找position的值不是static的父级元素；这里有两个关键词position和父级元素，咱们用代码来解释：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            width: 500px;
            height: 500px;
            margin-left: 100px;
            border: 10px solid black;
            background-color: pink;
        }

        body {
            width: 300px;
            height: 3000px;
            border: 10px solid yellow;
            background-color: rebeccapurple;
            position: relative;
        }

        #box {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="box"></div>
</body>

</html>

我将body设置了position；那么现在我的div就找到了定位目标，我就会基于这个目标来进行定位；

那么若是我的body没有定位，HTML有定位，那么他会基于谁来定位呢？

 html {
    width: 500px;
    height: 500px;
    margin-left: 100px;
    border: 10px solid black;
    background-color: pink;
    position: relative;
}

很明显，现在的div是基于HTML来定位了，所以现在也就验证了容纳块为最近的非static定位的父级块元素的这句话。

所以现在再回头来看，当我的元素在开启定位后，他会去寻找最近的父级，且其定位不为static值的父级块状元素，若一直找，都没找到，那么他就会基于初始容纳块（页面的第一屏）来进行定位。

Jason_HeSL

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
初始容纳块、初始包含块、第一屏

在定位的时候，大家都听说过子绝父相，但如果是子绝父不相的情况嘞，大家有没有考虑过他是基于什么来进行定位的；首先先说一下初始容纳块是什么东西，在css权威指南中，对于浮动元素，容纳块是最近的祖辈块元素。对于绝对定位（absolute）的元素，容纳块为最近的非static定位的父级块元素。而初始容纳块就是页面的第一屏；下面我来通过代码的形式，一一来解释这个问题。<!DOCTYPE html><html> <head> &l...
复制链接

扫一扫