前端CSS属性浏览器前缀 BFC的理解

76433橘子
111 阅读4分钟

前端一些理论知识（真的很理论）

前端 CSS 学习目录导航

1. CSS 字体属性和文本属性

2. CSS 特性、盒子模型

3. CSS 背景设置、高级元素 form表单使用

4. CSS 结构伪类 以及 其他前端开发知识补充

5. CSS 定位流布局——position

6. CSS 浮动流布局——float

7. CSS 弹性盒布局——flex

8. CSS 形变和动画

9. CSS HTML5拓展 和 CSS函数使用

10. CSS BFC的理解

11. CSS 媒体查询

12. CSS 单位拓展、预处理器、移动端适配方案

浏览器前缀

  • 有的时候，我们是可以发现有一些CSS属性的前面是具有一些特殊的符号的:

    • -o- -xv- -ms- -moz- -webkit- 然后这些就是一些浏览器标识的属性，添加这些，我们就可以实现解决兼容性问题
    • 稀土掘金博主书写
    • 官方文档的专业术语为: vendor-specific extensions 供应商特定扩展
    • 首先我们开发一个属性的时候，我们首先需要的是我们的： draft --> recommend 的过程

BFC （block formatting context）

  • FC(Formatting Context)[格式化上下文]

    • 元素在标准流中都是属于一个 FC 的

      • 下面的描述就是表示的是我们的网页中的某一个元素的话，可能是属于我们的 BFC 也可能是 IFC

image-20241012190117830.png

  • BFC (Block Formatting Context)

    • 建议自己把官网阅读一遍又一遍

      • 因为我写的不一定描述的很清楚，但是官网的话，描述十分清晰

    • 在我们的标准流中的实现的时候，对于块级元素之间，都是实现的是在我们的 BFC 中实现的布局

    • 所以说这个时候，我们就可以回顾我们的 margin-top 导致的高度塌陷的问题了

      • 在两个块级元素为父子关系的时候，我们会发现，给子盒子设置margin-top 设置，会导致整体的移动

      • 这个就是我们的 BFC 导致的，两个处于一个 BFC 中，所以说导致了这个的效果

      • 但是如果我们手动再创建一个单独的 BFC 出来，这样就不导致出现这个效果了

    image-20241012194208911.png

    • 什么情况下可以实现形成我们的 BFC

      • 根元素<html>
      • 浮动元素 元素的 float 属性不是 none
      • 绝对定位元素元素position为absolute或者fixed
      • 行内块元素元素的display 为 inline-block
      • 使用了不是属性值visible的 overflow的block-level element
      • 表格单元格每个单元格都是含有一个 BFC的

    • BFC 有的体现效果：

      • html根元素形成一个 BFC 后，那么其他的块级元素就开始在里面实现一个一个的在垂直方向实现排布

        • 然后每一个盒子和盒子之间的距离就是通过的我们的 margin 来实现的设置
        • 因为最终我们的 margin 的设置是通过的我们的 BFC 实现的解析

      • 如果含有了 行内级元素，那么就会形成 IFC,按照 IFC 的特性实现排布

      • 在BFC中，box会在垂直方向上实现一个挨着一个实现排布

      • 垂直方向上的盒子间距是通过我们的 margin 实现的控制

      • 在同一个 BFC 中，两个相邻的 box 之间会发生 margin 折叠现象（collapse）

      • 在 BFC 中，每一个元素的左边缘是挨着包含快的 左边缘的

    • 通过官方文档，我们的 BFC 可以实现解决的问题有那些：

      • 解决上下两个盒子之间的 margin collapse 的问题

        • <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      padding: 0;
      margin: 0;
​
      .container {
        /* container 又是一个新的 BFC 了，这个也是可以实现解决高度塌陷问题的，默认的都是属于 html 的 BFC 的 */
        /* 新的 BFC 有新的布局特性，反正不是 html 的默认的 BFC 的 布局特性了的 */
        overflow: hidden;
        margin-top: 10px;
​
        .box01, .box02 {
          height: 100px;
        }
​
        .box01 {
          background-color: skyblue;
          margin-bottom:10px;
          /* 为了实现预防这个现象，我们需要开创一个新的 BFC 出来 */
          /* overflow: hidden; */
        }
​
        .box02 {
          background-color: orange;
          margin-top: 20px; /* 当设置了我们的这个属性后就可以发现没有生效，这个就是 BFC 的实现的效果 */
        }
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box01"></div>
    <div class="box02"></div>  
  </div>
</body>
</html>

      • 解决浮动带来的高度塌陷问题

        • BFC 的高度在设置为 auto 的时候的元素的高度的计算

          • 首先先实现查看的是我们的是否含有: inline-level element ，是行高的顶部和底部的距离
          • 如果含有block-level element ,是由最底层的块级元素的上边缘和最底层的下边缘之间的距离（z轴）
          • 如果有绝对定位元素直接忽略
          • 如果有浮动元素，就会实现增加高度来实现包括这些浮动元素的下边缘
        • <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      padding: 0;
      margin: 0;
​
      .container {
        width: 600px;
        background-color: skyblue;
        overflow: hidden;
        margin: 100px auto;
​
        .sonFloat {
          width: 100px;
          height: 100px;
        }
​
        .sonFloat {
          background-color: red;
          float: left;
        }
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="sonFloat"></div>
  </div>
</body>
</html>

        • <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      padding: 0;
      margin: 0;
​
      .container {
        width: 600px;
        height: 600px;
        background-color: skyblue;
        margin: 100px auto;
​
        .sonFloat, .sonNormal {
          width: 100px;
          height: 100px;
        }
​
        .sonFloat {
          background-color: red;
          float: left;
        }
​
        .sonNormal {
          /* 通过开辟一个新的 BFC 出来就可以实现我们解决浮动带来的问题 */
          overflow: hidden;
          background-color: yellowgreen;
        }
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="sonFloat"></div>
    <div class="sonNormal"></div>
  </div>
</body>
</html>
avatar
文章
阅读
粉丝