css初始容纳块
css初始容纳块的含义是什么？？？？
看css权威指南时的时候看到容纳块的定义
对于浮动元素，容纳块是最近的祖辈块元素。
以下都是对于非根元素
对于绝对定位（absolute）的元素，容纳块为最近的非static定位的父级块元素。具体规则如下：
- 若祖辈元素是块级元素，那么容纳块是那个元素内边距的边界，即由边界定义的区域。
- 如果祖辈元素是行内元素，容纳块是祖辈元素的内容边界。
- 如果没有祖辈元素，元素容纳块就是初始的容纳块。
看书中的例子试着打了一下
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float11</title>
<style>
html{
background: cornflowerblue;
}
body{
}
p:nth-of-type(2){
position:relative;
/* background: brown; */
}
p:nth-of-type(1){
background: cyan;
}
b{
position: absolute;
border: 1px solid green;
right: 10px;
bottom: 0;
}
</style>
</head>
<body>
<p> So we browsed the shops,buying here and there, but browsing at least every other store.
The street vendors were less abundant,but much more persistent,which was sort of funny.Kat was fun to
which,too,as she haggled with various sellers. I don't think we paid more that two-thirds the original asking
price on anything!
<b>float</b>
All of our buying was done in shops on the outskirts of the maiket area. The main section os the market
was actually sort of a letdown, being more expensive,more touristy,and less friendly, in a way. About
this time I started to wear down,so we caught a taxi back to the New Otani.
So we browsed the shops,buying here and there, but browsing at least every other store.
The street vendors were less abundant,but much more persistent,which was sort of funny.Kat was fun to
which,too,as she haggled with various sellers. I don't think we paid more that two-thirds the original asking
price on anything!
All of our buying was done in shops on the outskirts of the maiket area. The main section os the market
was actually sort of a letdown, being more expensive,more touristy,and less friendly, in a way. About
this time I started to wear down,so we caught a taxi back to the New Otani.
So we browsed the shops,buying here and there, but browsing at least every other store.
The street vendors were less abundant,but much more persistent,which was sort of funny.Kat was fun to
which,too,as she haggled with various sellers. I don't think we paid more that two-thirds the original asking
price on anything!
All of our buying was done in shops on the outskirts of the maiket area. The main section os the market
was actually sort of a letdown, being more expensive,more touristy,and less friendly, in a way. About
this time I started to wear down,so we caught a taxi back to the New Otani.
So we browsed the shops,buying here and there, but browsing at least every other store.
The street vendors were less abundant,but much more persistent,which was sort of funny.Kat was fun to
which,too,as she haggled with various sellers. I don't think we paid more that two-thirds the original asking
price on anything!
All of our buying was done in shops on the outskirts of the maiket area. The main section os the market
was actually sort of a letdown, being more expensive,more touristy,and less friendly, in a way. About
this time I started to wear down,so we caught a taxi back to the New Otani.
</p>
<p>
So we browsed the shops,buying here and there, but browsing at least every other store.
The street vendors were less abundant,but much more persistent,which was sort of funny.Kat was fun to
which,too,as she haggled with various sellers. I don't think we paid more that two-thirds the original asking
price on anything!
<b>float</b>
All of our buying was done in shops on the outskirts of the maiket area. The main section os the market
was actually sort of a letdown, being more expensive,more touristy,and less friendly, in a way. About
this time I started to wear down,so we caught a taxi back to the New Otani.
So we browsed the shops,buying here and there, but browsing at least every other store.
The street vendors were less abundant,but much more persistent,which was sort of funny.Kat was fun to
which,too,as she haggled with various sellers. I don't think we paid more that two-thirds the original asking
price on anything!
All of our buying was done in shops on the outskirts of the maiket area. The main section os the market
was actually sort of a letdown, being more expensive,more touristy,and less friendly, in a way. About
this time I started to wear down,so we caught a taxi back to the New Otani.
So we browsed the shops,buying here and there, but browsing at least every other store.
The street vendors were less abundant,but much more persistent,which was sort of funny.Kat was fun to
which,too,as she haggled with various sellers. I don't think we paid more that two-thirds the original asking
price on anything!
All of our buying was done in shops on the outskirts of the maiket area. The main section os the market
was actually sort of a letdown, being more expensive,more touristy,and less friendly, in a way. About
this time I started to wear down,so we caught a taxi back to the New Otani.
So we browsed the shops,buying here and there, but browsing at least every other store.
The street vendors were less abundant,but much more persistent,which was sort of funny.Kat was fun to
which,too,as she haggled with various sellers. I don't think we paid more that two-thirds the original asking
price on anything!
All of our buying was done in shops on the outskirts of the maiket area. The main section os the market
was actually sort of a letdown, being more expensive,more touristy,and less friendly, in a way. About
this time I started to wear down,so we caught a taxi back to the New Otani.
</p>
</body>
</html>代码解释：有两个p标签，每个p标签分别包含一个绝对定位的b标签，第一个p标签默认定位即定位方式为static,第二个p标签relative定位。绝对定位的b标签设置right:10px;bottom:0;
效果展示：
问题：第一个b标签bottom为零出现在了第二个p标签的中间偏下方的位置，第一个绝对定位的b标签是相对于谁定位的? 即祖辈元素都是static的绝对定位的元素的容纳块是谁，我看了一下也不是p元素也不是body和html就有点疑惑？？？？求指点！！！
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
初始包含块：根元素（
<html>）所在的包含块。在 Continuous Media，其尺寸就是viewport的尺寸。如果要为一个元素定位和设置尺寸，往往需要考虑该元素的包含块，如何确定包含块？
在你的例子中，第一个
<p>内的<b>的情况：position属性是absolute，但找不到有任何父级元素位置属性是absolute，relative或者fixed，所以它的包含块应该是初始包含块。所以可以看到，当改变浏览器视口大小时，第一个
<p>内的<b>位置总是相对于浏览器视口保持不动。第一个元素b标签祖先元素中没有非static定位的父级块元素，那么它基于整个窗口进行定位，根据它定位配置的话它应该出现这个窗口的右下角，你可以改变窗口大小试试看下效果