• BFC和IE的hasLayout


         

    关于Block Formatting Context--BFC和IE的hasLayout

    BFC(Block Formatting Context)直译为“块级格式化范围”。

    在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ,类型可以是 block ,或者是 inline ,但不能同时属于这两者。并且, Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化, Inline boxes(块内框) 则在 inline formatting context(行内格式化上下文) 里格式化。任何被渲染的元素都属于一个 box ,并且不是 block ,就是 inline 。即使是未被任何元素包裹的文本,根据不同的情况,也会属于匿名的 block boxes 或者 inline boxes。所以上面的描述,即是把所有的元素划分到对应的 formatting context 里。

    表现规则 :

    1、在创建了 Block Formatting Context 的元素中,其子元素按文档流一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。

    2、在 Block Formatting Context 中,每一个元素左外边与包含块的左边相接触(对于从右到左的格式化,右外边接触右边), 即使存在浮动也是如此(尽管一个元素的内容区域会由于浮动而压缩),除非这个元素也创建了一个新的 Block Formatting Context 。

    3 、当容器有足够的剩余空间容纳 BFC 的宽度时,所有浏览器都会将 BFC 放置在浮动元素所在行的剩余空间内。

    4、根据CSS2.1 规范第10.6.7部分的高度计算规则,在计算生成了 block formatting context 的元素的高度时,其浮动子元素应该参与计算。

     haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。

    在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false。当一个元素的 hasLayout属性值为true时,我们说这个元素有一个布局(layout)

      如何激发 haslayout?

    大部分的 IE 显示错误,都可以通过激发元素的 haslayout 属性来修正。可以通过设置 css 尺寸属性(width/height)等来激发元素的 haslayout,使其“拥有布局”。如下所示,通过设置以下 css 属性即可。

    * display: inline-block
    * height: (任何值除了auto)
    * float: (left 或 right)
    * position: absolute
    * (任何值除了auto)
    * writing-mode: tb-rl
    * zoom: (除 normal 外任意值)
    Internet Explorer 7 还有一些额外的属性(不完全列表):
    * min-height: (任意值)
    * max-height: (除 none 外任意值)
    * min- (任意值)
    * max- (除 none 外任意值)
    * overflow: (除 visible 外任意值)
    * overflow-x: (除 visible 外任意值)
    * overflow-y: (除 visible 外任意值)
    * position: fixed

           时间过得真快,一转眼就要毕业了,最后一个月的时间,好紧迫的感觉,像是上战场一样,有点小紧张。

      今早来到学校看到课程表上写着复习,然后站到教室外头等到18班下课,顺便看看他们在干些啥,一眼扫去,都在认真的做这自己的事情。然后我坐到教室里,听了老师讲了三个小时的课,最后一个小时做布置的作业。前三个小时从ps讲到JQuery,一些似懂非懂,什么语义化,Doctype,平时都闷到做自己的网页,知道这个、那个怎么用,有些就是用自己的语言解释不出来,对于某些理论知识都不清不楚的。还有今天老师讲了一个BFC(块级.格式化.上下文)(在ie56没用) 和 haslayout   平时都没听过,更不说见过,老师一写出来,它认识我,我不认识它,这就是平时见少了,用少了。

      在接下来的接近一个月的时间里,不能在糊里糊涂了,机会掌握在自己手中,用心学习才是硬道理。

  • 相关阅读:
    数据库的创建,数据的增删改查
    Ubuntu系统下查看显卡相关信息
    分布式文件系统测试方法与测试工具
    分布式存储产品的测试实践及心得
    sql注入
    web测试项目总结
    Ubuntu系统下使用Jenkins进行项目的自动构建还是项目回滚方法
    Ubuntu系统下Jenkins的git构建基本方法
    Ubuntu系统下在github中新增库的方法
    ADO.NET复习总结(2)--连接池
  • 原文地址:https://www.cnblogs.com/5huihui/p/4309971.html
Copyright © 2020-2023  润新知