CSS包含块

1，写在前面的话CSS目前还不被认可是一门真正的编程语言，虽然现在已经有像less、saas、stylus这样的预处理器或者叫预处理框架，使CSS更具动态性，拥有诸如变量、继承、运算、函数等编程特性，但是我们不可忽视CSS在前端开发中的地位，特别是在互联网（移动互联网）时代，前端作为直面用户的“门户”，对视觉与交互要求越来越高，CSS就如是“门户”的装潢有者不可替代的地位，在发挥着越来越重要的作用。正是因为CSS的声明式特点与编程上的特殊性，CSS上手很容易，但是精深却很难，我们需要系统性地学习并应用它。我们从最基础，最不容易懂而且很容易被忽视的地方开始，从规范或者权威解读里出发，一步一步深入CSS的世界。2，什么是包含块首先，我们来看下W3C CSS规范中对包含块的定义: The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows: The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media. The 'direction' property of the initial containing block is the same as for the root element. For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box. If the element has 'position: fixed', the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way: In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined. Otherwise, the containing block is formed by the padding edge of the ancestor. If there is no such ancestor, the containing block is the initial containing block. 一大串英文，看起来容易头晕，没关系我们来翻译并拆解下: The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. 一个元素框（盒子，有可能有多个，比如行盒）的大小和位置的计算有时是和一个特定的矩形框相关的，这个矩形框就叫该元素的包含块 上面这句话就给包含块下了个定义，其中有几个点我们需要关注下（1）“特定的矩形框”：包含块的具象特征（2）“有时”：这意味者并不是所有元素都有包含块。理清了定义后，我们来看看包含块具体的规则与详细解释 The containing block of an element is defined as follows: 元素的包含块具体定义如下： The containing block in which theroot elementlives is a rectangle called theinitial containing block. For continuous media, it has the dimensions of theviewportand is anchored at the canvas origin; it is thepage areafor paged media. The 'direction' property of the initial containing block is the same as for the root element. 根元素所在的包含块是一个称为初始包含块的矩形。对于连续媒体，它具有视口的尺寸，并固定在画布原点；而对于分页媒体，则是一个页面的区域。初始包含块的“ direction”（排布方向：ltr or rtl）属性与根元素相同。 --- 至此我们引出了初始包含块。 For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearestblock containerancestor box. 对于其他元素，如果位置（定位）属性值为static/relative，则它的 包含块是由它最近的祖先元素的块状盒子（display为 block、table cell(类似 和 ) 或者 inline-block ）的内容区域决定的。 If the element has 'position: fixed', the containing block is established by theviewportin the case of continuous media or the page area in the case of paged media. 如果元素具有“位置：固定”，则在连续媒体的情况下由视口建立包含块，在分页媒体的情况下由页面区域建立包含块。 If the element has 'position: absolute', the containing block is established by the nearest ancestor with a'position'of 'absolute', 'relative' or 'fixed', in the following way: In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined. 如果元素具有“位置：绝对”，则包含块由最接近的祖先（ 位置属性为“绝对”或“相对”或“固定”）建立，具体细则如下： 在祖先是内联元素的情况下，包含块是为该元素生成的第一个和最后一个内联框的填充框周围的 内边距区域框。在CSS 2.1中，如果将inline元素分成多行，则包含块未定义。 Otherwise, the containing block is formed by thepadding edgeof the ancestor. 否则，包含块由祖先的填充内边距区域形成。 If there is no such ancestor, the containing block is the initial containing block. 如果没有这样的祖先，则包含块为初始包含块。 上面都是文字描述，有点不够形象，我们引用个导图来总结下： 3，包含块的作用和意义 包含块我们平时“看不到”、“摸不着”，那理解它有什么意义呢？意义大着呢，因为山就在那里！包含块（Containing Block）是视觉格式化模型（该文集里有相应的解读）的一个重要概念，它与框模型（盒模型）类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。如果深入了解包含块等重要基础知识，则在日常的开发比如页面布局，还有问题解决时，就更有底气，更能够找到问题点，对开发的价值也是有重大意义的。

本文章由javascript技术分享原创和收集