在CSS:关于元素高度与宽度的讨论 系列文章（一）中讨论了display为display：block的非置换元素的宽度与高度在不同情况下的表现,但是有些地方并不严谨,因此在这里做一个补充，在补充前先简单介绍一下css盒模型以及其在可视化格式模型中布局中被管理的几个要点和containing box。
The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.
css盒模型描述了在文档树里生成并且根据可视化格式模型进行渲染布局的矩形框们。
In the visual formatting model, each element in the document tree generates zero or more
boxes according to the box model. The layout of these boxes is governed by:
box dimensions and type.
positioning scheme (normal flow, float, and absolute positioning).
relationships between elements in the document tree.
external information (e.g., viewport size, intrinsic dimensions of images, etc.).
在可视化格式模型中,每个元素在文档树里根据盒模型生成0或多个盒子。这些盒的布局被以下要素所管理
盒子的尺寸和类型
定位方案(普通流,浮动,绝对定位)
文档树中元素之间的关系
外部信息(例如，视口大小，图像的内在尺寸等)
因此下面我们要谈的便是关于盒子的尺寸问题。
containing block(包含块)
概述
In CSS 2.1, many box positions and sizes are calculated with respect to the edges of >a rectangular box called a containing block.In general, generated boxes act as >containing blocks for descendant boxes; we say that a box "establishes" the >containing block for its descendants. The phrase "a box's containing block" means >"the containing >block in which the box lives," not the one it generates.
Each box is given a position with respect to its containing block, but it is not >confined by this containing block; it may overflow.
在CSS2.1中,一个包含块的位置和尺寸相对于矩形框的边缘记进行计算。通常,生成的框为它的后代盒子充当包含块;我们认为,一个盒子(框)为他的后代建立了包含块。当我们在说“一个框(盒)的包含块”的意思是“该框所处的包含块”，而不是说它自身产生的包含块。
每个盒子相对于它的包含块进行定位,但并不限于它的包含块内;它有可能会溢出。
定义
元素的包含块定义如下
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.
根元素所在的包含块为一个称为初始包含块的矩形框(根元素存在于initial containing block内),在我们常用的浏览器环境下，指的是原点与 canvas 重合，大小和 viewport 相同的矩形。
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.
对于其他元素,如果元素的position属性值为relative或者static(元素在文档流中),其包含块为祖先元素中最近的 block container box(块容器盒) 的 content box (除 margin, border, padding 外的区域)；
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.
如果元素的position值为fixed,包含块由视口 viewport 建立
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:
1 .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.
2 .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.
如果元素的position值为absolute,则它的包含块由最近的position的值为
absolute,relative,fixed的祖先元素(offset parent)所建立,如下列方式
1. 如果祖先是行内元素,则containing block为能够包含祖先元素生成的第一个和最后一个 inline boxs 的 padding boxs (除 margin, border 外的区域) 的最小矩形；
2. 否则,则由这个祖先元素的 padding boxs 形成
如果没有这样的祖先元素,则包含块为初始包含块
栗子
根据上面对containing box的介绍,我们可以把包含块当成一个大箱子,箱子里要摆很多小盒子，小盒子怎么摆取决于大箱子。不同的小盒子在它的大箱子里的初始位置是不一样的,下面举个简单的栗子来说明一下
查看更多关于CSS:关于元素高度与宽度的讨论系列文章(三)_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did109446