zoukankan      html  css  js  c++  java
  • CSS学习笔记——包含块 containing block

    以下内容翻译自CSS 2.1官方文档。网址:https://www.w3.org/TR/CSS2/visudet.html#strut

    有时,一个元素的盒子的位置和尺寸根据一个确定的矩形计算,这个确定的矩形叫这个元素的包含块。一个元素的包含块根据以下规则确定:

    1、根元素所在的包含块叫初始包含块 initial containing block。对于连续媒体设备(continuous media),初始包含块的大小等于视口viewpor的大小,基点在画布的原点(视口左上角);对于分页媒体(paged media),初始包含块是页面区域(page area)。初始包含块的direction属性与根元素的相同。

    2、对于其他元素,如果元素的position属性是relativestatic,他的包含块是由最近的祖先块容器盒(block container ancestor box)的内容区域(content edgewidth属性和height属性确定的区域)创建的。

    3、如果一个元素的position属性为fixed,他的包含块由视口创建(连续媒体)或者由页面区域创建(paged media)。

    4、如果元素的positionabsolute,他的包含块由最近的position不为static的祖先元素创建,具体创建方式如下:

               A.如果创建包含块的祖先元素是行内元素(inline element),包含块的范围是这个祖先元素中的第一个和最后一个行内盒的padding box围起来的区域。

               B.如果这个祖先元素不是行内元素,包含块的范围是这个祖先元素的内边距+width区域(padding edge)。

    如果没有找到这样的祖先元素,这个绝对定位的元素的包含块为初始包含块。

    下面的文档中没有定位的元素:

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
     2 <HTML>
     3    <HEAD>
     4       <TITLE>Illustration of containing blocks</TITLE>
     5    </HEAD>
     6    <BODY id="body">
     7       <DIV id="div1">
     8       <P id="p1">This is text in the first paragraph...</P>
     9       <P id="p2">This is text <EM id="em1"> in the 
    10       <STRONG id="strong1">second</STRONG> paragraph.</EM></P>
    11       </DIV>
    12    </BODY>
    13 </HTML>

    包含块的创建如下表:

    元素

    创建其包含块的元素

    html

    视口(初始包含块)

    body

    html

    div1

    body

    P1

    div1

    P2

    div1

    em1

    P2

    strong1

    P2

    如果添加以下CSS规则:

    1    #div1  { position: absolute; left: 50px; top: 50px }
    2    #em1  { position: absolute; left: 100px; top: 100px }

    包含块的创建如下表:

    元素

    创建其包含块的元素

    html

    initial C.B. (初始包含块)

    body

    html

    div1

    initial C.B. (初始包含块)

    p1

    div1

    p2

    div1

    em1

    div1

    strong1

    em1

     相关文章:http://www.w3help.org/zh-cn/kb/008/

  • 相关阅读:
    VirtualBox不显示64bit版本的iso
    学习和参考资料
    神经网络和机器学习资料整理
    动态空间释放时的错误操作引起的运行时错误
    WIN7 X64的运行命令窗口
    vs2010中的ADO控件及绑定控件
    AdventureWorks2012.mdf的使用
    VS2008/2010 都不能使用Access2010数据库
    WIN7 64位操作系统 无法找到Access驱动
    如何在VS2010的VC++ 基于对话框的MFC程序中添加菜单
  • 原文地址:https://www.cnblogs.com/fogwind/p/6017375.html
Copyright © 2011-2022 走看看