CSS3_BFC（十二）
BFC
MDN对BFC的解释：块格式化上下文（Block Formating Context, BFC）是web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
1、开启BFC
flow-root对内容的影响是最低的，但是IE浏览器不支持。
- 根元素
- 浮动元素
- 绝对定位、固定定位的元素
- 行内块元素
- 表格单元格：table、thead、tbody、th、td、tr、caption
- overflow的值不为visible的块元素
- 伸缩元素
- 多列容器
- column-span为all的元素（即使该元素没有包裹在多列容器中）
- display的值，设置为flow-root
2、BFC作用
- 元素开启BFC后，其子元素不会再产生margin塌陷问题；
- 元素开启BFC后，自己不会被其他浮动元素所覆盖；
- 元素开启BFC后，就算其子元素浮动，元素自身高度也不会塌陷。
3、mrgin塌陷的解决
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>示例</title><style>body {display: flex;}.outer {width: 500px;background-color: aqua;/* 浮动元素 *//* float: left; *//* 开启定位元素 *//* position: relative; *//* 行内块元素 *//* display: inline-block; *//* 表格单元格 *//* display: table; *//* overflow不为visible *//* overflow: hidden; *//* 多列容器 *//* column-count: 1; *//* column-span: all; *//* display: flow-root; */}.inner {height: 200px;width: 200px;margin: 20px;}.inner1 {background-color: yellow;}.inner2 {background-color: blueviolet;}</style>
</head><body><div class="outer"><div class="inner inner1"></div><div class="inner inner2"></div></div>
</body></html>
相关文章：
CSS3_BFC（十二）
BFC MDN对BFC的解释：块格式化上下文（Block Formating Context, BFC）是web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 1、开启BFC flow-root对内容的影响是最低的&am…...
C0032.在Clion中使用MSVC编译器编译opencv的配置方法
使用MSVC编译器编译opencv的配置方法...
微信小程序中会议列表页面的前后端实现
题外话：想通过集成腾讯IM来解决即时聊天的问题，如果含语音视频，腾讯组件一年5万起步，贵了！后面我们改为自己实现这个功能，这里只是个总结而已。 图文会诊需求 首先是个图文列表界面 同个界面可以查看具体…...
WEB攻防-通用漏洞文件上传二次渲染.htaccess变异免杀
知识点： 1、文件上传-二次渲染 2、文件上传-简单免杀变异 3、文件上传-.htaccess妙用 4、文件上传-PHP语言特性 1、上传后门时，文件内容带.就不行 这时可以上传一个转换后的ip地址，ip地址对应网站包含后门代码 转换后的int会在访问的时候…...
vue实现列表滑动下拉加载数据
一、实现效果 二、实现思路 使用滚动事件监听器来检测用户是否滚动到底部，然后加载更多数据 监听滚动事件。检测用户是否滚动到底部。加载更多数据。 三、案例代码 <div class"drawer-content"><div ref"loadMoreTrigger" class&q…...
全面解析：HTML页面的加载全过程(四)--浏览器渲染之样式计算
主线程遍历得到的 DOM 树，依次为树中的每个节点计算出它最终的样式，称之为 Computed Style。 通过前面生成的DOM 树和 CSSOM 树，遍历 DOM 树，为每一个 DOM 节点，计算它的所有 CSS 属性，最后会得到一棵带有…...
#Verilog HDL# 谈谈代码中如何跨层次引用
目录 一 先谈作用问题 二 再谈跨层次问题 2.1 向下引用 2.2 向上引用 一 先谈作用问题 大多数编程语言都有一个称为作用域（scope）的特征，它定义了代码的某些部分对于变量和方法的可见性。作用域定义了一个命名空间，以避免同一命名空间内不同对象名称之间的冲突。 V…...
LeetCode 每日一题 2024/11/18-2024/11/24
记录了初步解题思路 以及本地实现代码；并不一定为最优 也希望大家能一起探讨 一起进步 目录 11/18 661. 图片平滑器11/19 3243. 新增道路查询后的最短距离 I11/20 3244. 新增道路查询后的最短距离 II11/21 3248. 矩阵中的蛇11/22 3233. 统计不是特殊数字的数字数量1…...
客户流失分析综述
引言 客户流失这个术语通常用来描述在特定时间或合同期内停止与公司进行业务往来的客户倾向性[1]。传统上，关于客户流失的研究始于客户关系管理（CRM）[2]。在运营服务时，防止客户流失至关重要。过去，客户获取相对于流失…...
基于51单片机的红包抽奖proteus仿真
地址： https://pan.baidu.com/s/1nYZlLb64kdZAWSydT_uHfA 提取码：1234 仿真图： 芯片/模块的特点： AT89C52/AT89C51简介： AT89C52/AT89C51是一款经典的8位单片机，是意法半导体（STMicroelectro…...
cangjie (仓颉) vscode环境搭建
sdk下载 下载中心-仓颉编程语言官网 可选择半年更新版，不用申请。目前版本：0.53.13 ，选择不同平台压缩包下载解压到任意位置即可 补充下载，vscode插件解压后，在vscode扩展中选择从vsix安装，安装后新增名为…...
阿里云私服地址
1.解压apache-maven-3.6.1-bin 2.配置本地仓库：修改conf/dettings.xml中的<localReoisitory>为一个指定目录。56行 <localRepository>D:\apache-maven-3.6.1-bin\apache-maven-3.6.1\mvn_repo</localRepository> 3.配置阿里云私服：…...
HTMLCSS：3D金字塔加载动画
效果演示 这段代码通过CSS3的3D变换和动画功能，创建了一个旋转的金字塔加载动画，每个侧面都有不同的颜色渐变，底部还有一个模糊的阴影效果，增加了视觉的立体感。 HTML <div class"pyramid-loader"><div cl…...
(3))
shell编程(2)(3)
目录 一、永久环境变量 按用户设置永久环境变量 文件路径： 示例步骤： 删除永久环境变量 二、脚本程序传递参数怎么实现 三、用编程进行数学运算 shell中利用expr进行运算 运算与变量结合 1. 变量赋值和基本运算 2. 使用expr进行运算 3. 变量…...
DFT专家分析scan insertion时使用EDT的策略
作为一名芯片设计DFT工程师专家，在做scan insertion（扫描插入）时使用EDT（Embedded Deterministic Test，嵌入式确定性测试）的参数配置策略，需要综合考虑多个方面的因素，以确保测试的高…...
Apple Vision Pro开发003-PolySpatial2.0新建项目
unity6.0下载链接:Unity 实时开发平台 | 3D、2D、VR 和 AR 引擎 一、新建项目 二、导入开发包 com.unity.polyspatial.visionos 输入版本号 2.0.4 com.unity.polyspatial（单独导入），或者直接安装 三、对应设置 其他的操作与之前的版本相同…...
分公司如何纳税
分公司不进行纳税由总公司汇总纳税“子公司具有法人资格，依法独立承担民事责任;分公司不具有法人资格，其民事责任由公司承担。”企业设立分支机构，使其不具有法人资格，且不实行独立核算，则可由总公司汇总缴纳企业所得税…...
在 Ubuntu 系统上安装 npm 环境以及 nvm（Node Version Manager）
在 Ubuntu 系统上安装 npm 环境以及 nvm（Node Version Manager） 步骤 1: 更新系统包步骤 2: 安装 nvm步骤 3: 安装 Node.js 和 npm步骤 4: 设置默认 Node.js 版本（可选）总结 在 Ubuntu 系统上安装 npm 环境以及 nvm（No…...
深度优先搜索（dfs）题目合集
深度优先搜索（dfs）题目合集 全排列问题 dfs原理和模版深度优先搜索原理（纯个人理解）参考程序dfs通用模版 素数环组合的输出 剪枝新dfs模版参考程序新的dfs模版 自然数的拆分 利用形参进行回溯 全排列问题 dfs原理和模版 P1706 全…...
性能监控利器：Ubuntu 22.04 上的 Zabbix 安装与配置指南
简介 今天我们来聊聊如何在 Ubuntu 22.04 上安装和配置 Zabbix。我们会用到 PostgreSQL 作为数据库后端，Nginx 作为 Web 服务器，并用 Let’s Encrypt SSL 证书来保驾护航。 什么是 Zabbix？ Zabbix 是一个开源的网络监控和管理解决方案&…...
网络编程（Modbus进阶）
思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
大话软工笔记—需求分析概述
需求分析，就是要对需求调研收集到的资料信息逐个地进行拆分、研究，从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要，后续设计的依据主要来自于需求分析的成果，包括: 项目的目的…...
Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？
Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？ 在 Golang 的面试中，map 类型的使用是一个常见的考点，其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业，其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进，需提前预防假检、错检、漏检，推动智慧生产运维系统数据的流动和现场赋能应用。同时，…...
UE5 学习系列（三）创建和移动物体
这篇博客是该系列的第三篇，是在之前两篇博客的基础上展开，主要介绍如何在操作界面中创建和拖动物体，这篇博客跟随的视频链接如下： B 站视频：s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件，然后打开终端，进入下载文件夹，键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案
随着新能源汽车的快速普及，充电桩作为核心配套设施，其安全性与可靠性备受关注。然而，在高温、高负荷运行环境下，充电桩的散热问题与消防安全隐患日益凸显，成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试，通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小，增大可提高计算复杂度duration: 测试持续时间（秒&…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码，CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短，所以CPU会不断地切换线程执行，从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...