• hasLayout与BFC的触发条件


    hasLayout与BFC是分别在IE和其他浏览器上的两个作用很相近的概念,在很多时候,我们需要触发它们去实现有些效果。例如清除浮动时需要触发hasLayout与BFC;很多自适应的两栏和三栏布局(两边固定宽度,中间自适应)需要触发hasLayout与BFC;很多奇形怪状的IE bug的解决需要触发hasLayout…至于详细的用法这里就不做详细说明了,这里说说触发hasLayout与BFC的条件:

    hasLayout

    Layout是 IE 的专有概念,它决定了元素如何对其内容进行定位和尺寸计算,与其他元素的关系和相互作用。HTML的元素中,有些是默认就已经触发了Layout,而有些默认没有触发。当IE的Layout被触发后,我们就说该元素“拥有布局”,使用object.currentStyle.hasLayout可获取到ture值,否则将获取到false,并且Layout的触发是不可逆的。关于Layout的更详细介绍,推荐这篇文章《On having layout》。hasLayout的触发条件如下:

    • display: inline-block
    • height: (除 auto 外任何值)
    • (除 auto 外任何值)
    • float: (left 或 right)
    • position: absolute
    • zoom: (除 normal 外任意值)
    • writing-mode: tb-rl

    附1:IE7特有的触发Layout的属性

    • min-height: (任意值)
    • min- (任意值)
    • max-height: (除 none 外任意值)
    • max- (除 none 外任意值)
    • overflow: (除 visible 外任意值,仅用于块级元素)
    • overflow-x: (除 visible 外任意值,仅用于块级元素)
    • overflow-y: (除 visible 外任意值,仅用于块级元素)
    • position: fixed

    附2:默认触发Layout的HTML元素

    <html>, <body>
    <table>, <tr>, <th>, <td>
    <img>
    <hr>
    <input>, <button>, <select>, <textarea>, <fieldset>, <legend>
    <iframe>, <embed>, <object>, <applet>
    <marquee>
    

    BFC

    BFC,块格式化上下文( Block formatting context ),是指初始化块级元素定义的环境。在CSS中,元素定义的环境有两种,一种是块格式化上下文( Block formatting context ),另一种是行内格式化上下文( Inline formatting context )。其中我们使用比较多的是块级可视化上下文,CSS3草案中将之称为“flow root”,但我们仍习惯叫BFC,其的触发条件如下:

    • 浮动元素(float除了none)
    • 绝对定位元素(absolute/fixed)
    • 设置了’display’ 属性为 “inline-block”,”table-cell”, “table-caption” 的元素
    • 设置了overflow 非 “visible”的元素
  • 相关阅读:
    Html5-audio标签简介及手机端不自动播放问题
    aes加密
    CSS max-width: 0;
    彻底弄清楚session是什么?
    jquery 绑定回车(Enter )事件
    javascript正则表达式总结(test|match|search|replace|split|exec)
    html_entity_decode()、空格、&nbsp; 乱码问题
    HTML <area> 对象
    自定义UEditor右键菜单
    在UEditor编辑器的工具栏上加一行文字
  • 原文地址:https://www.cnblogs.com/yanjialin/p/4311978.html
Copyright © 2020-2023  润新知