【前端面经】BFC

BFC

  • BFC
    • 什么是 BFC?
    • 元素开启 BDC 后的特殊布局效果
    • 元素开启 BFC 的方式

BFC

什么是 BFC?

  1. 官方解释:A block formatting context (BFC) is a part of a visual CSS rendering of a web page. It’s the region in which the layout of block boxes occurs and in which floats interact with other elements.
  2. 通俗理解:BFC(块级格式化上下文)是一种在布局上具有特定效果的渲染区域。创建/开启 BFC 意味着元素被激活了这种特殊的布局效果,从而使其内部的元素布局和浮动元素的交互方式与默认情况有所不同。

元素开启 BDC 后的特殊布局效果

  1. 官方解释
    • contain internal floats.
    • suppress margin collapsing.
    • exclude external floats.
  2. 通俗理解
    • 元素中的子元素浮动时,自身高度不会塌陷
    • 元素中的子元素不会产生 margin 塌陷问题
    • 元素不会被外部的浮动元素所覆盖

元素开启 BFC 的方式

常见的元素开启 BFC 的方式如下,

  • 根元素 <html> ==> The root element of the document ().
  • 浮动元素 ==> Floats (elements where float isn’t none).
  • 绝对定位或固定定位的元素 ==> Elements where position is absolute or fixed.
  • 行内块元素 ==> Inline-blocks (elements with display: inline-block).
  • 表格单元格 ==> Table cells (elements with display: table-cell, which is the default for HTML table cells).
  • 表格标题 ==> Table captions (elements with display: table-caption, which is the default for HTML table captions).
  • overflow: hidden/scroll/auto 的元素 ==> Block elements where overflow has a value other than visible and clip.
  • 伸缩项目 ==> Flex items (direct children of the element with display: flex or inline-flex) if they are neither flex nor grid nor table containers themselves.
  • 多列容器 ==> Multicol containers (elements where column-count or column-width isn’t auto, including elements with column-count: 1).
  • column-span: all 的元素 ==> column-span: all should always create a new formatting context, even when the column-span: all element isn’t contained by a multicol container
  • display: flow-root 的元素,副作用最低! ==> display: flow-root.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/13546.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是谷歌爬虫?

其实就是谷歌用来浏览网络信息的一个自动化程序&#xff0c;他们会在你的网站爬取&#xff0c;寻找和搜集信息&#xff0c;谷歌爬虫可以说决定着一个网站在谷歌的生死 谷歌爬虫的作用机制就在于发现新网站以及新网页&#xff0c;然后他会把网页的内容带回去&#xff0c;更新到…

PikaUnsafe upfileupload

1.client check 客户端检测&#xff0c;前端js检测&#xff0c;禁用js和修改后缀名即可。 php格式不能上传&#xff0c;我们修改后缀上传。 蚁剑成功连接。 2.MIME type 这个就是 content-type 规定上传类型&#xff0c;上面的方法也能成功&#xff0c;也可以修改 conten-ty…

面试框架【面试准备】

前言 2023-9-12 12:12:04 2023-09-14 16:13:04 公开发布于 2024-5-22 00:16:21 以下内容源自《【面试准备】》 仅供学习交流使用 版权 禁止其他平台发布时删除以下此话 本文首次发布于CSDN平台 作者是CSDN日星月云 博客主页是https://blog.csdn.net/qq_51625007 禁止其他平…

奇偶数递增递减-第13届蓝桥杯选拔赛Python真题精选

[导读]&#xff1a;超平老师的Scratch蓝桥杯真题解读系列在推出之后&#xff0c;受到了广大老师和家长的好评&#xff0c;非常感谢各位的认可和厚爱。作为回馈&#xff0c;超平老师计划推出《Python蓝桥杯真题解析100讲》&#xff0c;这是解读系列的第70讲。 奇偶数递增递减&a…

vite+ts+mock+vue-router+pinia实现vue的路由权限

0.权限管理 前端的权限管理主要分为如下&#xff1a; 接口权限路由权限菜单权限按钮权限 权限是对特定资源的访问许可&#xff0c;所谓权限控制&#xff0c;也就是确保用户只能访问到被分配的资源 1.项目搭建 创建vite项目 yarn create vite配置别名 npm install path -…

4. C++入门:内联函数、auto关键字、范围for及nullptr

内联函数 概念 以inline修饰的函数叫做内联函数&#xff0c;编译时C编译器会在调用内联函数的地方展开&#xff0c;没有函数调用建立栈帧的开销&#xff0c;内联函数提升程序运行的效率 对比C的宏 C语言不足&#xff1a;宏 #define ADD(x, y) ((x)(y))int main() {int ret…

python实现520表白图案

今天是520哦&#xff0c;作为程序员有必要通过自己的专业知识来向你的爱人表达下你的爱意。那么python中怎么实现绘制520表白图案呢&#xff1f;这里给出方法&#xff1a; 1、使用图形库&#xff08;如turtle&#xff09; 使用turtle模块&#xff0c;你可以绘制各种形状和图案…

Docker 安装kingbase V8r6

下载 官网下载&#xff0c;注意&#xff1a;这里下载 Docker 版本v8r6 安装 # 导入镜像 docker load -i kingbase.tar# 重命名 docker tag [image-name]:[tag] [new-image-name]:[new-tag]# 删除 docker rmi [image-name]:[tag]# 创建容器 docker run -tid \ --privileged \…

python实现绘制烟花代码

在Python中&#xff0c;我们可以使用多个库来绘制烟花效果&#xff0c;例如turtle库用于简单的绘图&#xff0c;或者更复杂的库如pygame或matplotlib结合动画。但是&#xff0c;由于turtle库是Python自带的&#xff0c;我们可以使用它来绘制一个简单的烟花效果。 下面是一个使…

Stable Diffusion AMD加速方法-ZLUDA重出江湖

目前几大开源的Stable Diffusion平台&#xff0c;更新速度都慢了&#xff0c;一个是没有太多新技术出现&#xff0c;新出的基础模型也都不完整开源了&#xff08;API调用&#xff09;&#xff0c;能整的功能&#xff0c;也都整得差不多了。然后一群AMD死忠还在等着有一个能有一…

【前端】使用 Canvas 实现贪吃蛇小游戏

使用 Canvas 实现贪吃蛇小游戏 在这篇博客中&#xff0c;我们将介绍如何使用 HTML5 Canvas 和 JavaScript 实现一个简单的贪吃蛇&#xff08;Snake&#xff09;小游戏。这个项目是一个基础的游戏开发练习&#xff0c;它可以帮助你理解如何在 Canvas 上绘图、如何处理用户输入以…

Laravel(Lumen8) + Supervisor 实现多进程redis消息队列

相关文章:Supervisor守护进程工具安装与使用 1、通用消息队列 /App/Job/CommonJob.php: <?phpnamespace App\Jobs; use Illuminate\Support\Facades\Log; use Illuminate\Support\Str;class CommonJob extends Job {public $timeout; //超时时间protected $data; //队列…

Android:OkHttp网络请求框架的使用

目录 一&#xff0c;OkHttp简介 二&#xff0c;OkHttp请求处理流程 三&#xff0c;OkHttp环境配置 四&#xff0c;OkHttp的使用 1.get网络请求 2.post上传表单数据 3.post上传json格式数据 4.文件上传 5.文件下载 一&#xff0c;OkHttp简介 OkHttp是square公司推出的一…

npm 源管理工具 nrm

npm 源管理工具 nrm 安装(可能很慢, 多试几次) npm install -g nrm查看可选择源列表 nrm ls切换源 nrm use <registry>如: nrm use taobao

rust的版本问题,安装问题,下载问题

rust的版本、安装、下载问题 rust版本问题&#xff0c; 在使用rust的时候&#xff0c;应用rust的包&#xff0c;有时候包的使用和rust版本有关系。 error: failed to run custom build command for pear_codegen v0.1.2 Caused by: process didnt exit successfully: D:\rus…

鸿蒙全面开发指南:入门、生态安全与资源支持

鸿蒙全面开发指南&#xff1a;入门、生态安全与资源支持 本文全面梳理了鸿蒙操作系统的开发入门流程&#xff0c;涵盖了开发环境准备、工具使用、项目创建、模拟器配置到应用安全设计的各个方面。通过本文&#xff0c;读者不仅能够了解鸿蒙开发的基本步骤&#xff0c;也能深入理…

Aspose.PDF功能演示:在 JavaScript 中将 TXT 转换为 PDF

您是否正在寻找一种在 JavaScript 项目中将纯文本文件从TXT无缝转换为PDF格式的方法&#xff1f;您来对地方了&#xff01;无论您是要构建 Web 应用程序、创建生产力工具&#xff0c;还是只是希望简化工作流程&#xff0c;直接从 JavaScript 代码中将 TXT 转换为 PDF 的功能都可…

第3天 Web源码拓展_小迪网络安全笔记

1.关于web源码目录结构 #数据库配置文件 后台目录 模板目录 数据库目录 1.1数据库配置文件: 1.1就拿wordpress来说,先到官网下载源码:Download – WordPress.org,解压源码之后: 2.2找到目录下名为 wp-config-sample.php的文件,这就是数据库配置文件: 设想: 我们在渗透…

FOURIER NEURAL OPERATOR FOR PARAMETRIC PARTIAL DIFFERENTIAL EQUATIONS

参数偏微分方程的傅里叶神经算子 论文链接&#xff1a;https://arxiv.org/abs/2010.08895 项目链接&#xff1a;https://github.com/neuraloperator/neuraloperator 作者博客&#xff1a;https://zongyi-li.github.io/blog/2020/fourier-pde/ 参数偏微分方程的傅里叶神经算子…

本地部署Terraria泰拉瑞亚私服并通过内网穿透生成公网地址远程联机

文章目录 前言1. 下载Terraria私服2. 本地运行Terraria 私服3. 本地Terraria私服连接4. Windwos安装Cpolar 工具5. 配置Terraria远程联机地址6. Terraria私服远程联机7. 固定远程联机地址8. 固定的联机地址测试 前言 本文将为你详细介绍在本地如何运行泰拉瑞亚本地私服和结合C…