无聊看文档之CSS-Containing block

最新推荐文章于 2022-02-12 21:34:40 发布

weixin_33862993

最新推荐文章于 2022-02-12 21:34:40 发布

阅读量81

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/pomoho/p/4361012.html

本文详细解释了CSS中元素的定位方式与包含块的概念，包括静态、相对、绝对及固定定位的不同应用场景，并通过实例说明如何确定不同定位类型下元素的包含块。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上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:

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。包含根元素的一个矩形叫做初始包含块。对于连续的媒体，它具有视窗的尺寸并且是固定在初始画布上的。初始包含块的“方向”属性是和根元素一样的。
2. 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定位，那么它的包含块是由最近的块级祖先元素的内容边缘构成。
3. 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.固定定位，包含块是当前的可是窗口。
4. 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定位的祖先构成
  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.在祖先是行内元素的情况下,包含块是由第一个和最后一个内联元素的内边距盒的包含盒构成。在CSS2.1中，假如行内元素被拆分成很多行，那么包含块是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.假如没有这些祖先元素，包含块就是初始包含块

下面放上一张网上的图

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>>