zoukankan      html  css  js  c++  java
  • HTML 中BFC的理解

    BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动,和外边距合并等等,因此,有了这个特性,我们布局的时候就不会出现意外情况了。

    display 属性为 block, list-item, table 的元素,会产生BFC.

    给这些元素添加如下属性就可以触发BFC。

    -float属性不为none

    -position为absolute或fixed

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

    -overflow不为visible。

    BFC布局规则特性:

    1.在BFC中,盒子从顶端开始垂直地一个接一个地排列.

    2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

    3.在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)。

    1. BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘。
    2. 计算BFC的高度时,自然也会检测浮动或者定位的盒子高度。

    它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

  • 相关阅读:
    JQ_浏览器窗口改变触发
    5. 通过PHP反序列化进行远程代码执行
    2. 文件包含(150)
    1. md5 collision(50)
    4.xpath注入详解
    2.HTTP头注入
    1.5 xss漏洞修复
    1.4 DVWA亲测XSS漏洞
    1.如何绕过WAF(Web应用防火墙)
    1.3 xss原理分析与剖析(4)
  • 原文地址:https://www.cnblogs.com/wait59/p/12628486.html
Copyright © 2011-2022 走看看