zoukankan      html  css  js  c++  java
  • (转)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”的元素
  • 相关阅读:
    2021.1.28 个人rating赛补题报告
    2021.1.23 个人rating赛补题报告
    2021.1.23 个人rating赛补题报告
    2020.12.14 个人训练赛补题报告
    2020.11.28 2020团体程序设计天梯赛补题报告
    2020.12.3 Codeforces Beta Round #73(Div2)补题报告
    Xhorse VVDI Prog V5.0.6 is Ready for BCM2 Adapter
    Program 2021 Ford Bronco All Keys Lost using VVDI Key Tool Plus
    Xhorse VVDI Prog V5.0.4 Software Update in July 2021
    How to use Xhorse VVDI2 to Exchange BMW FEM/BDC Module?
  • 原文地址:https://www.cnblogs.com/christal-11/p/5882622.html
Copyright © 2011-2022 走看看