hasLayout与Block formatting contexts的学习（上）_html/css_WEB-ITnose

hasLayout与Block formatting contexts的学习

@(css BFC)[IE hasLayout|妙瞳]

hasLayout是什么？

haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）。注意：hasLayout属性是微软特有的过时属性，在IE8、IE9中，hasLayout属性已经被废弃。下文中的InternetExplorer都是指IE7、IE6及以下版本。

当一个元素有一个布局时，它负责对自己和可能的子孙元素进行尺寸计算和定位。简单来说，这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。因此，一些元素默认会有一个布局。当我们说一个元素“拥有layout”或“得到layout”，或者说一个元素“has layout” 的时候，我们的意思是指它的微软专有属性 hasLayout 被设为了 true。一个“layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout的元素。通过 IE Developer Toolbar 可以查看 IE 下 HTML元素是否拥有haslayout，在 IE Developer Toolbar 下，拥有 haslayout的元素，通常显示为“haslayout = -1”。‘Layout’ 在 IE 中可以通过 hasLayout 属性来判断一个元素是否拥有 layout ，如 object.currentStyle.hasLayout 。

负责组织自身内容的元素将默认有一个布局，主要包括以下元素（不完全列表）：

	, 	

, ,

,

, , , , <fieldset>, <legend> <iframe>, <embed>, <object>, <applet> <marquee>对于并非所有的元素都默认有布局，微软给出的主要原因是“性能和简洁”。如果所有的元素都默认有布局，会对性能和内存使用上产生有害的影响。http://www.satzansatz.de/cssd/onhavinglayoutrev07-20060517.html <p><strong>haslayout 问题的调试与解决</strong></p> <p>当网页在 IE 中有异常表现时，可以尝试激发 haslayout 来看看是不是问题所在。常用的方法是给某元素 css 设定 zoom:1。使用 zoom:1 是因为大多数情况下，它能在不影响现有环境的条件下激发元素的 haslayout。而一旦问题消失，那基本上就可以判断是haslayout 的原因。然后就可以通过设定相应的 css 属性来对这个问题进行修正了。建议首先要考虑的是设定元素的width/height 属性，其次再考虑其他属性。<br>对 IE6 及更早版本来说，常用的方法被称为霍莉破解(Holly hack)，即设定这个元素的高度为 1%(height:1%;)。需要注意的是，当这个元素的 overflow 属性被设置为 visible 时，这个方法就失效了。或者使用 IE的条件注释。<br>对 IE7 来说，最好的方法是设置元素的最小高度为 0 (min-height:0;)。<br>haslayout 问题引起的常见 bug<br>IE6 及更低版本的双空白边浮动 bug<br>bug 修复: display:inline;<br>IE5-6/win 的 3 像素偏移 bug<br>bug 修复: height:1%;<br>IE6 的躲躲猫(peek-a-boo) bug<br>bug 修复: height:1%;<br>IE6/7负margin隐藏Bug：<br>bug 修复:去掉父元素的hasLayout；或者赋hasLayout给子元素,并添加position:relative;</p> <p><strong>如何激发 haslayout？</strong></p> <p>大部分的 IE 显示错误，都可以通过激发元素的 haslayout 属性来修正。可以通过设置 css 尺寸属性(width/height)等来激发元素的 haslayout，使其“拥有布局”。如下所示，通过设置以下 css 属性即可。</p> <li>display: inline-block<br> </li> <li>height: (除 auto 外任何值)<br> </li> <li>width: (除 auto 外任何值)<br> </li> <li>float: (left 或 right)<br> </li> <li>position: absolute<br> </li> <li>writing-mode: tb-rl<br> </li> <li>zoom: (除 normal 外任意值)</li> <p>Internet Explorer 7 还有一些额外的属性(不完全列表):</p> <li>min-height: (任意值)<br> </li> <li>max-height: (除 none 外任意值)<br> </li> <li>min-width: (任意值)<br> </li> <li>max-width: (除 none 外任意值)<br> </li> <li>overflow: (除 visible 外任意值)<br> </li> <li>overflow-x: (除 visible 外任意值)<br> </li> <li>overflow-y: (除 visible 外任意值)<br> </li> <li>position: fixed<br>其中 overflow-x 和 overflow-y 是 css3 盒模型中的属性，目前还未被浏览器广泛支持。<br>对于内联元素(默认即为内联的元素，如 span，或 display:inline; 的元素)，<br>width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout 。而对于IE6，如果浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，所以设置 width 或 height不能在此种情况下令该元素具有 layout。<br>zoom 总是可以触发 hasLayout，但是在 IE5.0 中不支持。<br>具有“layout” 的元素如果同时 display: inline ，那么它的行为就和标准中所说的 inline-block很类似了：在段落中和普通文字一样在水平方向和连续排列，受 vertical-align影响，并且大小可以根据内容自适应调整。这也可以解释为什么单单在 IE/Win 中内联元素可以包含块级元素而少出问题，因为在别的浏览器中display: inline 就是内联，不像 IE/Win 一旦内联元素拥有 layout 还会变成 inline-block。</li> <h3>Block formatting contexts是什么？</h3> <p>本文参考W3C CSS 2.1 规范 Visual formatting model<br>http://www.w3.org/TR/CSS2/<br>http://www.w3.org/TR/CSS2/visuren.html#inline-level<br>http://www.w3.org/TR/CSS2/visuren.html#normal-flow</p> <p><strong>Box</strong>: CSS布局的基本单位</p> <p>　　Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：</p> <p>block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；<br>inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；<br>run-in box: css3 中才有，暂时不讲。http://www.w3.org/TR/css3-box/#run-in-boxes</p> <p><strong>Formatting context</strong></p> <p>　　Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting contexts 有 Block fomatting contexts (简称BFC)和 Inline formatting contexts(简称IFC)。</p> <p>　　CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。<br>　　<br><strong>BFC 定义</strong></p> <p>　　BFC(Block formatting contexts)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。<br>　　<br><strong>BFC布局规则</strong>：</p> <li>内部的Box会在垂直方向，一个接一个地放置。<br> </li> <li>Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠<br> </li> <li>每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。<br> </li> <li>BFC的区域不会与float box重叠。<br> </li> <li>BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。<br> </li> <li>计算BFC的高度时，浮动元素也参与计算。<br> </li> <li>在CSS3中，对这个概念做了改动：http://www.w3.org/TR/css3-box/#block-level0<br> CSS3中，将BFC 叫做 flow root。</li> <p><strong>如何触发BFC?</strong></p> <li>float:(任何值除了none)<br> </li> <li>overflow:（任何值除了visible）<br> </li> <li>display:(table-cell/table-caption/inline-block)<br> </li> <li>position:(任何值除了static/relative)<br>注意：我们有时会用overflow:hidden的方法去清除浮动，就是因为触发了元素的BFC(IE6 7要声明zoom为1,触发hasLayout)。可以参考css float浮动详解</li> <p>今天总结到这里，明天继续下篇。假如有错误或不足的地方，欢迎指出，非常感谢！----妙瞳。</p> <a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2suaHRtbD90PTI=" target="_blank" rel="nofollow"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cHM6Ly9pbWcucGhwLmNuL3VwbG9hZC9jb3Vyc2UvMDAwLzAwMC8wNzEvNjIwYzYwNGY3NTI1MTk5NS5wbmc=" style="margin-top: 30px;" alt="hasLayout与Block formatting contexts的学习（上）_html/css_WEB-ITnose" title="hasLayout与Block formatting contexts的学习（上）_html/css_WEB-ITnose"></a><p style="float:right;font-size:13px;color:#999;"><span class="red">声明：</span>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。</p> <p class="article-relative-header">相关文章</p> <p class="article-relative-header">相关视频</p> <hr class="layui-clear"> <ul class="article-relative-ul"> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2Rpdi10dXRvcmlhbC00ODc5NjIuaHRtbA==" target="_blank" rel="nofollow">html下拉菜单文字怎么变小</a> </li> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2Rpdi10dXRvcmlhbC00ODc5NjAuaHRtbA==" target="_blank" rel="nofollow">HTML里怎么设置thead表头的颜色</a> </li> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2Rpdi10dXRvcmlhbC00ODYyNzguaHRtbA==" target="_blank" rel="nofollow">html5中元素能拉伸宽度吗</a> </li> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2Rpdi10dXRvcmlhbC00ODc5ODcuaHRtbA==" target="_blank" rel="nofollow">html中怎么清除li黑点</a> </li> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2Rpdi10dXRvcmlhbC0yNzI4MjcuaHRtbA==" target="_blank" rel="nofollow">hasLayout与Block formattin...</a> </li> </ul> <ul class="article-relative-ul"> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2NvZGUvNDY5OTMuaHRtbA==" target="_blank" title="强大的智能滤镜" rel="nofollow">强大的智能滤镜</a> </li> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2NvZGUvNDY5OTIuaHRtbA==" target="_blank" title="滤镜快捷键操作" rel="nofollow">滤镜快捷键操作</a> </li> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2NvZGUvNDY5OTEuaHRtbA==" target="_blank" title="滤镜基础知识" rel="nofollow">滤镜基础知识</a> </li> <li> <span class="layui-badge-dots"></span><a class="relevant" href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuL2NvZGUvNDY5OTAuaHRtbA==" target="_blank" title="高阶抠图作业布置" rel="nofollow">高阶抠图作业布置</a> </li> </ul> <div class="comment layui-clear CopyrightData"> <div class="J_Header" id="J_Header"> <p class="header-title">网友评论</p> <p class="header-protocol">文明上网理性发言，请遵守 新闻评论服务协议</p>我要评论</div> <div class="text-box layui-clear article_comment_textarea"> <div class="box-left"> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuamF2YXNjcmlwdDpsb2dpbl90cmlnZ2VyKCk=" target="_blank" rel="nofollow"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=L3N0YXRpYy9pbWFnZXMvdXNlcl9hdmF0YXIuanBn" alt="hasLayout与Block formatting contexts的学习（上）_html/css_WEB-ITnose" title="hasLayout与Block formatting contexts的学习（上）_html/css_WEB-ITnose"></a></li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuamF2YXNjcmlwdDpsb2dpbl90cmlnZ2VyKCk=" target="_blank" rel="nofollow"></a></li> </div> <div class="box-right"> <textarea name="desc" placeholder="请输入内容" class="layui-textarea article_textarea">立即提交 专题推荐 独孤九贱-php全栈开发教程 全栈 170W+ 主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门 玉女心经-web前端开发教程 入门 80W+ 主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门 天龙八部-实战开发教程 实战 120W+ 主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习 作者信息 认证0级讲师 发布技术文章 最新文章 热门排行 html中怎么清除li黑点 html下拉菜单文字怎么变小 HTML里怎么设置thead表头的颜色 html的name和value是什么意思 html如何给背景图片设置透明度 html中怎么让列表横向排列 html5怎么创建跳转页尾超链接 十分钟搞懂form标签中的GET和POST提交方式 404 not found是什么意思 DOM是什么意思 url是什么意思？ 如何改变图片大小 html是什么 html如何创建电子邮件链接 HTML编辑器有哪些？最好用的4款HTML编辑器推荐 如何制作一个简单的HTML登录页面（附代码） 推荐视频教程 javascript初级视频教程 jquery 基础视频教程 视频教程分类 php视频教程 html视频教程 css视频教程 JS视频教程 jQuery视频教程 mysql视频教程 Linux视频教程 Python视频教程 网站首页 PHP视频 PHP实战 PHP代码 PHP手册 词条 手记 编程词典 php培训 ：公益在线php培训，帮助PHP学习者快速成长！ Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1关于我们免责申明赞助与捐赠广告合作