百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

「css」BFC-块级格式化上下文的消化与吸收

wxin55 2024-11-18 17:53 12 浏览 0 评论

一、BFC概念

先看官方定义:BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

不愧是官方定义,看起来就不容易进脑子,下次面试被问到还是会挠头=.=。所以接下来我们先把这个东西拆开来看看,到底是什么神秘力量让它如此不羁。

1.1 拆分

块级:即我们常用的块级元素,eg:div、li、p等

格式化:每种代码都有自己的展现规则,格式化的作用就是把代码变美变漂亮,编程人员阅读起来更舒服。以后台返回的json为例:

{"success":true,"data":{"userid":"1","name":"Jack","mobile":"123456"},"errorMessage":"成功!","code":1}

格式化以后的数据格式应为:

{
    "success": true,
    "data": {
        "userid": "1",
        "name": "Jack",
        "mobile": "123456"
    },
    "errorMessage": "成功!",
    "code": 1
}

所以对于格式化的定义,可以简单地概括为根据制定的具体规则,对内容展示做一些处理,从而达成某些规范,或使内容更加美观合理。

上下文:表示格式化影响的范围,或者作用域。上例中的上下文即为该特定json代码段。

综上所述,我们可以这么理解BFC的概念,在正常的文档流中:

  • 满足一定条件下,一个普通的块级元素,就会变成一个块级格式化上下文
  • 在这个上下文范围内,所有的元素排列都会遵循一定的规则,即格式化的规则,进行排列布局。(且针对不同类型的元素会对应不同的规则)。
  • 这个范围内的元素不管如何布局都不会影响到上下文外部的元素,也就是一个独立的布局单位

1.2 创建BFC

一个普通的块级元素满足以下条件中的任意一个即可触发BFC(参考MDN):

  • 根元素(html)
  • 浮动元素(元素的 float 不是 none)
  • 行内块元素(元素的 display 为 inline-block)
  • 绝对定位元素(元素的 position 为 absolute 或 fixed)
  • 表格单元格(元素的 display 为 table-cell,HTML表格单元格默认为该值)
  • 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
  • 弹性元素(display 为 flex 或 inline-flex 元素的直接子元素)
  • overflow 计算值(Computed)不为 visible 的块元素
  • 多列容器(元素的 column-count 或 column-width (en-US) 不为 auto,包括 column-count 为 1)
  • column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中


二、BFC应用场景

2.1 清除元素浮动

如下例子中,因为父元素未设置高度,并且子元素浮动脱离了文档流,所以父元素出现高度塌陷问题(子元素无法撑开父元素的高度),要解决这个问题,我们可以给父元素设置css属性触发BFC来解决,方式见1.2创建BFC,通常的做法是设置父元素的overflow为非默认的 visible 的值。

HTML

<div class="box">
    <div class="float fl">左浮动元素</div>
    <div class="float fr">右浮动元素</div>
</div>

CSS

.box {
        background-color: #eee;
        border: 5px solid red;
    }

.float {
  width: 200px;
  height: 150px;
  background-color: white;
  border:3px solid black;
  padding: 10px;
}  
.fl {
  float: left;
} 
.fr {
  float: right;
}  



给父元素box添加属性 overflow: hidden; 触发BFC后,浮动的子元素也遵守流布局了:



2.2 外边距合并(重叠)

HTML

<div class="box">
    <div class="item top"></div>
    <div class="item bot"></div>
</div>

CSS

.box {
  	background-color: #eee;
  	border: 5px solid red;
  	overflow: hidden;
}
.item {
  	width: 200px;
  	height: 150px;
  	background: lightblue;
}  
.top {
  	margin-bottom: 50px;
} 
.bot {
  	margin-top: 50px;
} 

要消除外边距合并,可以通过给相邻元素的其中之一,进行一层BFC隔离封装:

<style>
  .item-box {
      overflow: hidden;
  }
 </style>
<div class="box">
    <div class="item top"></div>
    <div class="item-box">
      <div class="item bot"></div>
    </div>
</div>

以上。

相关推荐

黑客工具sqlmap,带你了解什么师sql注入

1、sqlmap介绍sqlmap是一款支持MySQL,Oracle,PostgreSQL,MicrosoftSQLServer,MicrosoftAccess,IBMDB2,SQL...

Web网络安全漏洞分析,SQL注入原理详解

本文主要为大家介绍了Web网络安全漏洞分析SQL注入的原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪一、SQL注入的基础1.1介绍SQL注入SQL注入就是指We...

sql注入、文件上传、文件包含(sql注入数据提交的类型)

在owasp年度top10安全问题中,注入高居榜首。SQL注入攻击指的是通过构建特殊的输入作为参数传入Web应用程序,而这些输入大都是SQL语法里的一些组合,通过执行SQL语句进而执行攻击者所要...

比较常见类型漏洞讲解(三):SQL注入(一)

比较常见类型漏洞讲解(一)比较常见类型漏洞讲解(二):文件上传这里继续介绍比较容易找到的不同类型的漏洞。演示准备目标主机:Metasploitable2攻击目标:目标主机的dvwa系统攻击机:Kali...

警惕SQL注入:检测与防御的实战指南

在当今数字化的时代,软件系统的安全性至关重要。SQL注入作为一种常见且危害巨大的安全漏洞,给企业和用户带来了潜在的风险。对于测试人员来说,掌握发现和解决SQL注入漏洞的方法是保障软件质量和安全的...

SQL注入的原理和危害(sql注入的原理及危害)

什么是SQL注入SQL注入是发生在web端的安全漏洞,实现非法操作,欺骗服务器执行非法查询,他的危害有会恶意获取,甚至篡改数据库信息,绕过登录验证,原理是针对程序员编写时的疏忽,通过执行SQL语句,实...

科普基础 | 最全的SQL注入总结(sql注入是干嘛的)

0x01SQL注入原理当客户端提交的数据未作处理或转义直接带入数据库,就造成了sql注入。攻击者通过构造不同的sql语句来实现对数据库的任意操作。0x02SQL注入的分类按变量类型分:数字型和字符...

产品经理必备IT技术知识之“什么是SQL注入攻击?

不少优秀的产品经理都会写一些简单的SQL语句进行数据查询的操作,但是会写SQL语句不代表能写好SQL语句。SQL语句写得不好,就会引发SQL注入攻击。SQL注入攻击是Web开发中最常见的一种安全问题,...

通过sql注入获取用户名和密码(联通光猫超级用户名超级密码获取)

1.啥是sql注入sql注入是一种通过操作输入来修改后台sql语句以达到利用代码进行攻击目的的技术2.生成sql注入漏洞的原因总结一句话:对前台传过来的参数没有进行有效的过滤,太相信前端传过来的参数...

什么是SQL注入攻击(SQL Injection)

1,定义:在构建数据库SQL语句时,攻击者在参数请求中注入恶意的SQL代码,并在在数据库中执行,操控数据库执行意图之外的操作。2,目的:窃取数据、修改数据、删除数据、绕过身份验证、权限提升,执...

浅谈SQL注入(sql注入的理解)

在关于SQL注入,百度的解释是这样的:SQL注入即是指web应用程序对用户输入数据的合法性没有判断或过滤不严,攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句,在管理员不知...

sql注入(sql注入攻击是什么意思)

SQL注入分类1.数字型注入当输入的参数为整型时,则有可能存在数字型注入漏洞。假设存在一条URL为:HTTP://www.aaa.com/test.php?id=1可以对后台的SQL语句猜...

SQL注入详解(sql注入总结)

现在大多数系统都使用B/S架构,出于安全考虑需要过滤从页面传递过来的字符。通常,用户可以通过以下接口调用数据库的内容:URL地址栏、登陆界面、留言板、搜索框等。这往往会出现安全隐患,为了更好的保护数据...

什么是sql注入,这些坑得避开(什么是sql注入,编程时如何避免)

1、sql注入是什么sql注入就是用户通过输入的参数,拼接到原先的sql中,成为sql的一部分,从而影响sql的功能和执行结果2、sql注入破坏力-小兵破坏力比如原先sql如下s...

金母鸡量化教学场:pandas—数据挖掘的Python库

如果你想充分发挥Python的强大作用,如果你想成为一名好的Python量化师,你应该先学好Pandas。今天就来了解什么是Pandas。与numpy易于处理同种类型数据不同,pandas更加的适合...

取消回复欢迎 发表评论: