• CSS BFC hasLayout模型


    BFC(Block Formatting Context),简单讲,它是提供了一个独立布局的环境,每个BFC都遵守同一套布局规则。例如,在同一个BFC内,盒子会一个挨着一个的排,相邻盒子的间距是由margin决定且垂直方向的margin会重叠。而float和clear float也只对同一个BFC内的元素有效。
     
     
    非块级盒子的浮动元素、绝对定位元素及块级容器(比如inline-blocks,table-cells和table-captions),以及overflow属性是visible之外任意值的块级盒子,都会创建了一个BFC。即当元素CSS属性设置了下列之一时,即可创建一个BFC:
     
    float:left|right
    position:absolute|fixed
    display: table-cell|table-caption|inline-block
    overflow: hidden|scroll|auto
     
    IE中HasLayout是IE浏览器引擎内部特有的属性,它可以影响到元素的定位和元素之间的相互作用。当一个元素的HasLayout属性为true时,这个元素才可以决定自己和其子孙元素的布局。
     
    所以,当发现有些元素的布局在IE下有异常时,可以有充分的理由来怀疑可能是hasLayout属性为false。而且这个属性值不能直接设置。一个元素要么默认拥有,要么通过设置特定的CSS属性来获取。直接的使元素hasLayout属性值为true的方法是声明下面的CSS属性之一:
     
    除auto之外的值
    height: 除auto之外的值
    float: left|right
    position: absolute
    display: inline-block
    writing-mode: tb-rl(IE)
    zoom: 除normal之外的值
    IE7中增加了一些同样效果的属性:
    min-height: 任意值
    max-height: 除 “none” 之外的任意值
    min- 任意值
    max- 除 “none” 之外的任意值
    overflow: hidden|scroll|auto
    overflow-x: hidden|scroll|auto
    overflow-y: hidden|scroll|auto
    position: fixed
     
    最常用的是zoom:1,因为这个设置对元素外观不会造成任何影响。但是这个属性是IE特有的CSS属性,不会通过CSS检查器W3C提供的CSS校验器(当然,让不让通过校验实际取决于各种校验器的规则)。
  • 相关阅读:
    监控系统
    RocketMQ入门介绍
    Linux的虚拟内存详解(MMU、页表结构) 转
    快速排序
    如何选择分布式事务解决方案? 转
    java 基本数据类型相关思考
    互联网项目中mysql应该选什么事务隔离级别 转
    线上服务的FGC问题排查,看这篇就够了! 转
    什么是Base64? 转
    业界难题-“跨库分页”的四种方案 转
  • 原文地址:https://www.cnblogs.com/yule9527/p/3936198.html
Copyright © 2020-2023  润新知