包含块是什么意思(如何定义包含块为什么使用包含块)

导语：包含块和定位

React Redux ES6 等文章已更新完，可以在个人主页中找到相关文章，小编辛苦码字，喜欢的点个赞！

本篇文章比较理论化，也是布局中很重要的基础。

包含块概念

盒子的定位和尺寸的计算，都取决于一个盒子的边界，这个盒子，被称作是包含块(CB)。

包含块是相对的，一般盒子的包含块都是其父节点，宽高计算，浮动，定位等等都基于包含，所以说这是个很重要的概念。

初始包含块（ICB）

指的是根节点html的包含块，它是一个不可见的盒子，它的宽高相当于浏览器刚加载完html的视口（未滚动前的视口）。

定位absolute的元素找不到带有非static定位的祖先元素时，默认按初始包含块计算。

定位的计算

1. static(默认) & relative

定位按照块级祖先元素的content-box计算。

另一种说法是按照自身计算，因为子元素肯定是在父元素的content-box内的

relative

2. absolute 定位

按照非static定位的padding-box计算，默认则按ICB计算

3. fix定位

按照浏览器视口计算

更多文章可以在个人主页中查看，另欢迎投稿

【前方雾大，关注一下不迷路 = 。=】

【html】【css】【html】【css】【前端开发】【javascript】【html】【javascript】【前端开发】【css】【javascript】【css】【前端开发】

本文内容由快快网络小媛创作整理编辑！