CSS的101块格式化上下文

5月19日，二零一零年在由蒂埃里Koblentz上午11:46 | 发展 | 10评论

作者简介：蒂埃里Koblentz是在雅虎前端工程师
他拥有TJK设计 ， EZ-css.org和CSS-101.org 。 你可以按照在Twitter蒂埃里@ thierrykoblentz 。

块格式上下文是一个盒子，至少满足下列之一：

  • “浮动”的价值是不是“无”，
  • “溢出”的值是不是“看得见”，
  • “显示”的值是“细胞表”，“表标题”或“内联块”
  • “位置”的价值是既不是“静态”的，也不是“相对”。

当它涉及到的可视化格式模型 （这是用户代理是如何处理的文档树，视觉媒体 ），块格式化上下文是大牌球员。 因此它是至关重要的CSS作者流，花车，清晰，和利润率与他们的关系有坚实的理解。

规范说什么...

如何阻止格式化背景流

块格式化上下文所属的定位方案 ，是正常的流动 。 因此，“块”块格式上下文被定位在页面流中块框， 内嵌 内嵌盒的格式 ， 相对定位块或内联盒如你所期望，定位运行箱 。 简而言之，他们是页面流的一部分。

什么触发块格式化上下文

9.4.1节说，下面将建立新的块格式化上下文：

  • 花车，
  • 绝对定位的元素，
  • 内联块，
  • 表细胞，
  • 表的标题，
  • “溢出”（比“看得见”的其他任何值）风格的元素

但根据CSS 3级规范 ，块格式化内容（“流根”在CSS3点讲）时创建符合下列条件：

这个定义意味着position:fixed建立一个新的块格式化的背景下，太。 这是不是在9.4.1节的思念，虽然固定的定位是绝对定位（9.6.1），并在规范中引用绝对定位的元素（或包装盒），意味着该元素的“ 位置 “属性的子类值“绝对”或“固定”。

请注意， display:table不建立本身的块格式化上下文。 但是，因为它可以生成匿名箱 ，其中之一（ display:table-cell ）建立一个新的块格式化内容。 换句话说，触发是匿名框，不display:table 。 这是作者应该牢记，因为即使两种风格建立新的块格式化上下文（或明或暗地）， clear不使用相同的display:table ，因为它确实display:table-cell 。

最后一个触发fieldset元素。 奇怪的是，有没有对这种行为，直到上www.w3.org信息HTML5的规范。 有浏览器的bug（ Webkit的 ， Mozilla的 ）提到这一点，但没有“官方”。 事实上，即使在大多数浏览器中建立新的块格式上下文字段集，每节3.2（UA一致性），作者并没有认为这是理所当然的事：

CSS 2.1的不定义属性适用于形成控制和帧，或者如何将CSS风格他们可以用来。 用户代理可申请到这些元素的CSS属性。 作者建议把这种支持作为实验。 未来的CSS水平可能进一步指定此。

块格式的背景下做

块格式化上下文包含的花车，因为他们的流动方式，每节9.4.1，防止崩溃的边缘，不重叠的彩车：

在一个块格式的情况下，盒子被解雇后，垂直，一个包含块的顶部开始。 两兄弟框的垂直距离是确定的“保证金”的属性。 在块格式化方面的相邻块盒之间的垂直崩溃的边缘。

在一个块格式的情况下，每个方块的左外缘接触的包含块的左边缘（从右到左的格式，触摸右边缘）。 这是真实的，甚至在花车的存在（虽然一个盒子的线箱可能缩小由于彩车），除非框建立一个新的块格式化的情况下（在这种情况下，框本身可能变得更窄由于彩车）。

不够用的规格，这意味着在现实世界中吗？

像任何块框块格式化上下文或多或少，除了这些重要的例外：

  • 块格式化上下文防止保证金倒塌

    相邻的块框的垂直崩溃的边缘，但只有当他们是在同一个块格式化的内容。 换句话说，如果相邻的框不属于同一个块格式化的内容，其保证金将不会崩溃。

    例如：

    这是第一个DIV里面一个蓝色的背景与风格， margin:20px 。

    这是第一个DIV里面一个蓝色的背景与风格， margin:20px 。

    这是一个蓝色背景的DIV内的段，它与样式margin:20px ，父DIV的样式与overflow:hidden;zoom:1 。

    上述两者之间的首次蓝框，底部和顶部段落崩溃（差距等于20像素，40像素）的保证金，但由于过去DIV创建一个新的块格式化内容，第三段的利润率不崩溃，因此他们不“粘”段的容器，而该块框的一部分。

    注 ：在IE6中，没有明确的利润率的DIV将无法附上的边缘。

    当涉及到崩溃的边缘，创建一个新的块格式化内容为适用相同的border或padding的元素的行为。

  • 块格式化上下文包含彩车

    我相信你已经听说过的一句话，“ 花车始终包含浮 ”，或者听到FNE（ 几乎所有浮动 ）方法。 但是，在此基础上是浮动块格式化的背景，所以制定一个更好的办法是说，“ 块格式上下文始终包含花车 ”。

    例如：

    这一段是一个蓝色背景的DIV内浮动，它的样式与margin:20px

    这一段是一个蓝色背景的DIV内浮动，这是风格与margin:20px 。 父DIV的样式与overflow:hidden;zoom:1 。

    第一段是一个，所以它从流量和它的容器崩溃 ，因此，这个容器的背景不显示浮动。

    第二段是一个浮动，但它被包含在一个DIV，创建一个新的块格式化内容，因此，容器包住孩子的“缘盒”。 你也应该注意的是，与第一款不同的是，有没有需要清除以前的方块。 这通常被称为“自我清算”，这使得很多意义上考虑，块格式化上下文是一个流动的正常组成部分。

    注 ： clear只清除相同的块格式化上下文内浮动。

  • 块格式化上下文不重叠的花车

    这是我最喜欢的 。 根据规范，块格式化上下文的边界框不能重叠在同一个块元素本身的格式上下文框的浮动幅度。 这意味着浏览器创建块格式化上下文隐含的利润，以防止它们重叠的浮动幅度盒。 正是由于这个原因，负利润率应该没有影响时，适用于块格式的背景下花车（WebKit和IE6有一个问题-这虽然测试案例 ）。

    例如： 

     侧边栏{背景：天蓝;浮动：左;宽度：180px;} 
      。侧边栏背景：黄色;浮法：右宽度：180px;} 
      ＃主{背景：粉红，溢出：隐藏;变焦：1;边境：5PX的固体水鸭;}

    因为这种行为是“边界框”（而不是“缘盒”），粉红色的框和它的兄弟姐妹之间的创造空间（例如，一个20像素的差距），作家要么需要：

    • 彩车上设置20像素的保证金
    • 边距值设置上的粉红色框大于彩车宽度（即margin:0 220px ）

    是的，你会使用220px ， 而不是 20px 。 因为它是试图以适应之间的花车，没有保证金框的边界框 。 如果我说尝试 ，它是因为该容器将下降，当然，如果没有足够的空间，两个浮点数之间的。

    换句话说，如果粉红色的盒子被赋予了宽度为400像素，该框应下降时，父容器是窄于770万像素（180px + 180px + 400px【+ 10px）。 作为一个侧面说明，在少数情况下，这种行为出现在Firefox中被打破（至少在v.3.5.9）（即，当上述构造的第一个孩子的body -看到测试用例 ）。

    注 ：在粉红色的框和两个浮点数之间的IE6显示的空间，是由于三个像素慢跑错误 。

hasLayout的与块格式化内容

正如你可能已经注意到，所有前面的例子中使用overflow:hidden;zoom:1样式overflow:hidden;zoom:1 。 而后者则在Internet Explorer（IE 5.5/6/7）触发hasLayout的前声明建立在现代浏览器中的新块格式化内容。 这是因为这些渲染是非常接近（ CSS规范的异同 ）。 像块格式的背景，给出了一个布局的元素出现，以防止崩溃的边缘，包含花车，不重叠彩车的。

属性/元素布局的声明

下面的列表表明，建立一个新的块格式化上下文的属性也触发hasLayout，至少支持的浏览器，异常overflow在IE <7。

在Internet Explorer 5和6
position:absolute
position:fixed
float （其他比“ none “的任何值）
display:inline-block
width （任何值比“其他auto “）
height （比“其他auto “的任何值）
zoom （任何值比“ normal “）
writing-mode:tb-rl
-ms-writing-mode:tb-rl
在Internet Explorer 7
min-width （任意值）
min-height （任意值）
max-width （比其他none任何价值）
max-height （比其他none任何价值）
元素风格与overflow （任何值比其他visible ）
overflow-x和overflow-y （任何值比其他visible ）
需要考虑的事情
  • zoom和writing-mode是专有的属性并没有验证。
  • IE浏览器5.0不支持zoom
  • 内联元素的height width和height上触发hasLayout，只有当这些属性适用于这些元素（即IE6的quirks模式）。
  • overflow-x和overflow-y是对CSS3盒模型模块的一部分
  • hasLayout的也触发时布局流从父布局流是不同的（即rtl到ltr ）

在Quirks模式和IE7模式（所有版本）

  • 溢出，比可见光的东西时，细胞表元素不建立新的块格式化的背景。
  • 溢出时的设置为可见， 建立一个新的块格式化内容表细胞元素。

总是有一个布局的HTML元素：

在Internet Explorer中，这些元素-默认 -布局。

  • <body> （以及作为<html>严格模式下）
  • <table> ， <tr> ， <th> ， <td>
  • <img>
  • <hr>
  • <input> ， <button> ， <select> ， <textarea> ， <fieldset> ， <legend>
  • <iframe> ， <embed> ， <object> ， <applet>
  • <marquee>

收官

现代浏览器和Internet Explorer（<8）之间的问题，以减少风险，作者可能会选择放弃布局，建立新的块格式化上下文盒。 这样的流量是相同的，元素逃生浮以同样的方式， clear清除相同的花车，其中预计利润率崩溃。 此外，作者必须注意造型盒时使用hasLayout的触发器 （即width等造型），可能需要使该元素以及一个新的块格式化内容。

进一步阅读

启示

演示和测试用例

hasLayout的文章

特别感谢菲利普Wittenbergh和布鲁诺·法西诺为寻找规范的引用，当一个人需要他们给我们上最好的资源和英戈超有布局 。

找到的谈话： bloglines technorati

共享和扩展： 书签del.icio.us Digg它！ | reddit！

10评论

  1. 发人深省的文章，是的， - 但不回答任何问题。 我想有一侧并排比较图像将是很好的......

    PS：谁关心IE5在2010年？

    康斯坦丁 - 5月23日，2010 ＃

  2. @康斯坦丁

    我想有一侧并排比较图像将是很好的......

    本文包含活生生的实例（我想这将是比图片更好）。

    两人第一次演示表明块之间的比较。 与第三演示，可以使用Firebug（或其他开发工具）把overflow宣言和关闭来看看它的中间列。

    感谢您的反馈

    评论由蒂埃里Koblentz - 5月23日，2010 ＃

  3. 在您的包裹起来你有“（8）”。 我认为应该是“（8）”。

    评论由亚当 - 2010年5月26日， ＃

  4. 感谢亚当醒目，错字。

    评论由 Thierry Koblentz - 5月26日，2010 ＃

  5. @亚当错别字已得到修复，谢谢！

    评论珍妮韩唐纳利 - 5月26日，2010 ＃

  6. @蒂埃里

    Live是不错，但你需要相当大的浏览器动物园欣赏它完全;)，如Opera有40％和FF在乌克兰有30％的浏览器份额的原因 - 这是有点多余，以保持所有这些旧的IE和FF版本你的电脑，除非你是做中国或美国的布局。

    康斯坦丁 - 5月26日，2010 ＃

  7. @康斯坦丁

    我明白你在说什么，但我相信它在这里是无关紧要的作为之间的浏览器，但在同一页上的不同块在同一个浏览器之间的比较使不 。

    评论由 Thierry Koblentz - 5月26日，2010 ＃

  8. 我在与蒂埃里协议 - >点是，Web开发人员需要这方面的知识，与应用程序的开发人员可以针对特定的浏览器相比。

    换句话说，它比较容易建立一个网站，有正确的布局时，针对特定的浏览器（甚至MSIE中）......颇有几分难以建立一个网站，所有浏览器上，勾画出不错的。

    马修·罗伯逊- 6月2日，2010 ＃

  9. 伟大的总结文章，我读过您的另一个认为维生素，这是一个伟大的跟进！

    评论约努茨波帕 - 6月8日，2010 ＃

  10. 您好约努茨
    感谢您的反馈！

    评论由蒂埃里Koblentz - 6月8日，2010 ＃

很抱歉，评论已被封闭，在这个时候。

主办雅虎

©2006-2012雅虎公司所有权利保留。 隐私政策 - 服务条款

支持WordPress的关于雅虎 虚拟主机 。