zoukankan      html  css  js  c++  java
  • BFC和haslayout(IE6-7)(待总结。。。)

    支持BFC的浏览器(IE8+,firefox,chrome,safari)

    Block Formatting Context(块格式化上下文)是W3C CSS2.1规范中的一个慨念,在CSS3中被修改为flow root。格式化则表明了在这个环境中,元素处于此环境中应当被初始化,即元素在此环境中应当如何布局等。元素如果创建了BFC,那么BFC决定了如何对其内容进行定位,以及它与其他元素的关系和相互作用。

    BFC布局规则:

    —内部的Box会在垂直方向,一个接一个地放置。

    —Box垂直方向的距离有margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

    —每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此

    —BFC的区域不会与float box重叠

    —BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也是如此。

    —计算BFC的高度时,浮动元素也参与计算

    什么情况会创建BFC?

    —根元素

    —float属性不为none

    —position为absolute或fixed

    —display为inline-block,table-cell,table-caption,flex,inline-flex

    —overflow不为visible

     
    启动BFC
    取消BFC
    <html>
     
     
    float
    除 none 以外的值
     
    position
    absolute,fixed
    relative
    display
    inline-block,table-cell,table-caption,flex,inline-flex
    ...
    overflow
    除 visibile 以外的值  
     

    haslyout(IE6-7)

    haslayout是Windows Internet Explorer渲染引擎的一个内部组成部分。
    在Internet Explorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。
    当一个元素的hasLayout属性值为ture时,我们说这个元素有一个布局(layout)
     
    启动haslayout的值
    取消haslayout的值
    display
    inline-block
    其他值
    width/height
    除了auto以外的值
    auto
    position
    absolute
    static
    float
    left或right
    none
    zoom(zoom是微软IE专有属性,可以触发haslayout但不会影响页面的显示效果。zoom:1常用来除错,不过ie5对这个属性不支持。)
    有值
    normal或者空值
    min-height、min-width
    任何值
     
    max-height、max-width
    任何值除了none
     
    overflow、overflow-x、overflow-y
    任何值除了visible
     
    position fixed
     
     
     
     
     
    下列元素默认haslayout=true
    <table><td><body><img><hr><input><select><textarea><button><iframe><embed><object><applet><marquee>
  • 相关阅读:
    全--教程API, gem 'rest-client'(用于发简单请求); 请求测试;
    GoRails教程自建Rails 的 API; gem 'jbuilder'简单用法;使用JWT进行验证(git上的实做);curl命令使用;status状态码;JWT文档翻译摘录;
    go Rails 知识点,Concepts Series:url和parameter; 建立Rails App Templates;报错页面debug; counter_cache
    FontAwesome::Sass(5.x版)使用帮助。
    问题记录:
    slim(4621✨)
    物联网平台开发及应用:基于CC2530和ZigBee
    CATIA V5-6 R2017基础、进阶、高手一本通
    计算机组装与维护标准教程(2015—2018版)
    Web程序设计——ASP.NET(第2版)
  • 原文地址:https://www.cnblogs.com/zhaojieln/p/4221767.html
Copyright © 2011-2022 走看看