CSS魔法堂:hasLayout原来是这样的!_html/css_WEB-ITnose
程序员文章站
2022-04-15 09:46:08
...
前言
过去一直听说旧版本IE下很多诡异bug均由一个神秘角色引起的,那就是hasLayout。趁着最近突然发神经打算好好学习CSS,顺便解答多年来的疑惑。
hasLayout到底是何方神圣?
hasLayout可以简单看作是IE5.5/6/7中的BFC(Block Formatting Context)。也就是用于决定一个元素要么自己对自身内容进行组织和尺寸计算,要么由其containing block来组织和尺寸计算。
当hasLayout为true时(就是所谓的"拥有布局"),相当于元素产生新BFC,元素自己对自身内容进行组织和尺寸计算;
当hasLayout为false时(就是所谓的"不拥有布局"),相当于元素不产生新BFC,元素由其所属的containing block进行组织和尺寸计算。
和产生新BFC的特性一样,hasLayout无法通过CSS属性直接设置,而是通过某些CSS属性间接开启这一特性。不同的是某些CSS属性是以不可逆方式间接开启hasLayout为true。并且默认产生新BFC的只有 html元素,而默认hasLayout为true的元素就不只有 html元素了。
另外我们可以通过 object.currentStyle.hasLayout属性来判断元素是否开启了hasLayout特性。
到这里我们应该了解到若要理解hasLayout则必须理解BFC,因此这里可参考 CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins
默认 hasLayout==true的元素
,
, |
, , |
---|
推荐阅读
-
为什么是这样的?_html/css_WEB-ITnose
-
hasLayout与Block formatting contexts的学习(下)_html/css_WEB-ITnose
-
求问这样的select标签是怎样做出来的_html/css_WEB-ITnose
-
做这样的CSS文字阴影样式,该怎么做?_html/css_WEB-ITnose
-
hasLayout与Block formatting contexts的学习(上)_html/css_WEB-ITnose
-
CSS魔法堂:说说Float那个被埋没的志向_html/css_WEB-ITnose
-
这样的下拉效果如何实现?_html/css_WEB-ITnose
-
IE浏览器中hasLayout的介绍_html/css_WEB-ITnose
-
两点还没睡觉的程序员,类似这样田字格格的展示,css 中间边框怎么实现合并_html/css_WEB-ITnose
-
这样的一个问题样式怎么写?_html/css_WEB-ITnose