您的位置：首页 > Web前端 > CSS

无聊看文档之CSS-Containing block

2015-03-23 22:38 267 查看

直接上W3C原文：http://www.w3.org/TR/CSS21/visudet.html#containing-block-details

10.1 Definition of "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. 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.对于其他元素来说，假如元素的定位方式是相对定位或者static定位，那么它的包含块是由最近的块级祖先元素的内容边缘构成。

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:假如元素是绝对定位，那么包含块由最近的带有absolute、relative、fixed定位的祖先构成

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.在祖先是行内元素的情况下,包含块是由第一个和最后一个内联元素的内边距盒的包含盒构成。在CSS2.1中，假如行内元素被拆分成很多行，那么包含块是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.假如没有这些祖先元素，包含块就是初始包含块

下面放上一张网上的图

fixed定位验证：

<!DOCTYPE html>
<html>
<head>
<title>包含块测试</title>
<meta content="text/html" charset="utf-8"/>
<style type="text/css">
*{
padding:0;
margin:0;
}
#fixed{
width: 50%;
height: 90px;
background-color: red;
position: fixed;
bottom: 0px;
}
</style>
</head>
<body>
<div id="fixed"></div>
</body>
</html>>

运行时，自行调整视窗大小，fixed定位的div元素的宽度会随着视窗宽度的变化而变化。

博主也是小菜鸟，希望大家看到有什么错误指出来，大家共同成长

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航