程序员经验分享-hwhale

BFC渲染机制

2023-11-16

　　BFC(block formatting context):块级格式化上下文（实际就是一个隔离罩）

　　W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

　　渲染规则：

　　　　规则很重要，要记住。

　　　　规则1：在BFC中元素垂直方向上的margin会重叠。

　　　　规则2：BFC内相当于一个独立的世界，里面的元素无论怎么变化都不会影响外面。

　　　　规则3：BFC内元素不会与浮动元素发生重叠（这是BFC解决浮动的根本原因）。

　　　　规则4：计算高度时，浮动元素也会参与（也就是overflow:hidden能清浮动的原因）。

 

　　创建BFC:

　　　　

  • body 根元素(html)
  • 浮动元素：float 除 none 以外的值
  • 绝对定位元素：position (absolute、fixed)
  • display 为 inline-block、table-cells、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

　　　　

转载于:https://www.cnblogs.com/angle-xiu/p/11268953.html

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

BFC渲染机制 的相关文章

  • 数字图像处理中一元函数f(x)的二阶导数=f(x+1)+f(x-1)-2f(x)的由来

    在 为什么说数字图像的一阶微分为f x 1 f x 介绍了数字图像处理中一元函数的一阶导数的由来 该一阶导数为 在该书中 同时定义了一元函数f x 其二阶导数的基本定义为 关于这个推导其中有点点小技巧 式3 6 1也可以表述为 f x f

  • C++基础——初始化列表

    目录 一 初始化列表 1 列表格式 情况1 成员变量中有const成员 但列表处成员不被初始化时 情况1 成员变量中有const成员 给缺省值时 情况1 成员变量中有const成员 列表处成员不仅初始化 还有缺省值 情况2 成员是自定义类型

  • WinCE 下 RAS 拨号连接的建立和拨号过程

    在 CE 下如果系统没有建立拨号网络 要实现上网功能时 就需要通过代码来实现建立拨号网络 拨号实现上网的过程 以下代码中的参数和拨号所用数值 都是电信 EVDO 的配置 如果换 GSM 或 WCDMA 时 请相应修改 cpp view pl

  • PHP学习笔记 Win平台下PHP开发环境的搭建

    Win平台下PHP开发环境的搭建 本文参考了PHP官方文档 http php net manual zh install windows iis7 php 写成 如果需要了解详细信息 请直接参考PHP官方文档 下载并配置PHP 下载PHP

  • 第十四届蓝桥杯模拟赛（第三期）试题与题解 C++

    目录 一 填空题 一 最小的十六进制 答案 2730 二 Excel的列 答案 BYT 三 相等日期 答案 70910 四 多少种取法 答案 189 五 最大连通分块 答案 148 二 编程题 一 哪一天 二 信号覆盖 三 清理水草 四 最

  • 关于我写了三万字博客后悔了好久这件事之第二个三万字GUI（swing）

    目录 简介 使用Swing的优势 Swing的特征 Swing基本组件的用法 Swing组件层次 AWT组件的Swing实现 简单了解swing JFrame 弹窗 标签 面板 按钮 3 6 列表 3 7 文本框 JTree TreeMod

  • java的静态与非静态 及其代码演示示例

    静态与非静态的概念 运行Java应用程序时 在实际的代码运行之前的一个步骤是加载类 具体点说 在Java SE 8的JVM中 需要先把类加载到Metaspace 如果类中有静态成员 加载类时会在heap中为其分配空间 此空间是属于类的 类中

  • colab 跑 deformable-detr 记录：

    GPUS PER NODE 1 tools run dist launch sh 1 configs r50 deformable detr sh 报错 cannot import name NewEmptyTensorOp from to

  • ChatGPT能够识别并纠正错误吗？

    ChatGPT在一定程度上可以识别和纠正错误 但其能力有限 以下是对ChatGPT识别和纠正错误能力的详细分析 1 基于模型训练的纠错 ChatGPT模型是通过大规模的训练数据进行训练的 这些训练数据通常是从互联网上收集的文本数据 在这个过

  • C++ 时间函数gmtime、gmtime_r、localtime、localtime_r

    测试环境 vmware 7 Redhat5 5 系统时间使用UTC 时区为上海 1 函数功能介绍 使用man gmtime或man localtime都可以的得到这几个函数的介绍 原型如下 struct tm gmtime const ti

  • JS特性

    JS是解释型语言 不需要提前预编译 JS是弱类型语言 在定义变量的时候不需要定义变量的类型 变量是松散类型 即可以用来保存任何类型的数据 JS没有块作用域 if for都是块 但有函数作用域 JS重复定义变量并不会报错 定义的新变量的值会覆

  • AQS原理 自己浅显理解

    http ifeve com java special troops aqs 这篇博客讲的很好 通篇看完收获不少 精简一下自己的收获 1 AQS是一个基于状态 state 的链表管理方式 reentracntlock这个锁是基于AQS实现的

  • shell-循环语句和case分支

    一 if 循环 if 条件 then 执行内容 elif then 执行内容 else 执行内容 fi 或者 if 条件 then 执行内容 else 执行内容 fi 例 chmod x 脚本名 给与执行权限 二 case 分支 case

  • 1-2、如何学习Linux

    1 2 如何学习Linux 版本说明 版本 作者 日期 备注 0 1 loon 2018 12 6 初稿 目录 文章目录 1 2 如何学习Linux 版本说明 目录 一 前言 二 如何学习Linux 三 最后 一 前言 注意 这里不是要教你

  • 一个人走的快，一群人才走的远

    有太多的技术文章来指引我们解决技术痛点问题 但很少有文字来帮助我们解答个人成长 职业发展 持续学习等思维意识层面的问题 07年计算机专业毕业后 抱着无限的迷茫踏上了漫漫职业生涯路 从菜鸟做起 一路走来也是跌跌撞撞 诚惶诚恐 很多时候都在想

  • Exception: Content is not allowed in prolog-搜集

    用webwork验证时老发生错误 提示Content is not allowed in prolog 由于是解析xml文件出错 找到相应的文件一看 发现开头有几行汉字说明忘注释掉了 我把它们注释掉 问题得到解决 由于以前没遇到这种问题 于

  • MRI是如何实现成像体素的空间定位的

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 磁共振的每一个信号都含有全层的信息 因此需要对磁共振信号进行空间定位编码 即频率编码和相位编码 接收线圈采集到的MR信号实际是带有空间编码信息的无线电波 属于模拟信号而非数

  • matlab 与 VC 混编函数参数传递<2>

    下面是这个例子用到的m代码 它定义了一个名为myadd2的函数 Copy to clipboard CODE function y z myadd2 a b dummy function just to demonstrate the id

  • vmware导入别人虚拟机

    https blog csdn net qq 43271194 article details 105855516 utm source app app version 4 21 1

  • LayUi介绍&前言

    目录 1 什么是layui 2 layui easyui与bootstrap的对比 有趣的对比方式 嘿嘿嘿 easyui jquery html4 用来做后台的管理界面 半老徐娘 bootstrap jquery html5 美女 拜金 l

随机推荐

  • 《学会提问：批判性思维指南》

    批判性思维的三个方面 1 有一套相互关联 环环相扣的关键问题的意识 2 恰如其分地提出和回答关键问题的能力 3 积极主动地利用问题的强烈愿望 思维方式 海绵式思维 1 吸收外部世界的信息越多 就越有头绪 2 被动的方式 不知如何取舍 淘金式

  • XPath提取网页数据（附实例）

    文章目录 一 XPath语法 二 用Python实践 Python爬虫的两个思路 三 三个案例 完整代码 一 XPath语法 借助Chrome浏览器的XPath插件来学习XPath语法 网页测试无误再把规则拿下来写代码 视频学习链接 网络爬

  • java 泛型多重限制,java中基于超类和子类的泛型类型的多重限制

    I have a generic list class that implements a particular interface The list items in the interface also implement the sa

  • B树、B-树、B+树的定义和区分

    B 树 B 树又名B树 我们把所有的数据进行折半块查找 比如一共100条数据 在30和60的地方分一下 存放30和60的节点就是根节点 30和60就是该节点的关键字 100也就是分成了3份 这个节点自动创建三个指针 这三份就是根节点的子节点

  • linux查看系统属性

    系统 uname a 查看内核 操作系统 CPU信息 head n 1 etc issue 查看操作系统版本 cat proc cpuinfo 查看CPU信息 hostname 查看计算机名 lspci tv 列出所有PCI设备 lsusb

  • DDSM数据库使用说明

    一 官网下载 我们的下载工具是winscp软件 该软件可以用于远程ftp下载 首先 在网上搜索安装包进行下载安装 安装之后 打开软件 选择ftp 输入DDSM网址 匿名登录 等待连接以后 就可以看到我们需要下载的资源 然后选择我们需要下载的

  • Xcode7.1环境下上架iOS App到AppStore 流程 (Part 一)

    前言部分 之前App要上架遇到些问题到网上搜上架教程发现都是一些老的版本的教程 目前iTunesConnect 都已经迭代好几个版本了和之前的 界面风格还是有很大的差别的 后面自己折腾了好久才终于把自己的App上架 所以一直想写个最新 Xc

  • TortoiseGit工具 修改登录用户名密码

    TortoiseGit是大家常用的git客户端 操作起来非常的简便 但是当账号密码变化之后 再使用TortoiseGit操作git就会提示没有权限 那么 TortoiseGit怎么修改用户名密码呢 下面本文就介绍一下 方法 步骤 首先 打开

  • umi配置chainWebpack，使用自定义loader----jsx-px2rem

    目录 吐槽 loader 修改chainWebpack配置 完结 吐槽 最初追随潮流 老大看到了umi这个国人开发标签的框架 觉得可以尝试 并且相信阿里 从此开始了填坑之路 虽然云谦大佬在github上说了 umi本身的配置已经很完善了 但

  • win10+ubuntu20.04 双系统卸载ubuntu20.04

    清除Ubuntu系统分区 使用磁盘管理器比较省事 也可使用diskgenius 打开磁盘管理器后可以看到Ubuntu分区 如图所示 右键删除卷即可 删除开启引导启动项 删除了Ubuntu系统所有分区后 Windows的EFI分区里仍然会有U

  • Linux下C编译系统

    Linux下C编译系统 编译过程概述 了解一些编译知识的读者都知道 所谓编译 就是在编译程序读取源程序 字符流 对之进行词法和语法的分析 将高级语言指令转换为功能等效的汇编代码 再由汇编程序转换为机器语言 并且按照操作系统对可执行文件感谢格

  • 蓝桥杯第十四届省赛完整题解 C/C++ B组

    没有测评 不知道对不对 仅仅过样例而已 试题 A 日期统计 本题总分 5 分 问题描述 小蓝现在有一个长度为 100 的数组 数组中的每个元素的值都在 0 到 9 的 范围之内 数组中的元素从左至右如下所示 5 6 8 6 9 1 6 1

  • 虚拟服务器lan网段地址,lan侧服务器ip地址

    lan侧服务器ip地址 内容精选 换一换 云平台支持修改主网卡的私有IP地址 具体操作请参见本节内容 如需修改扩展网卡的私有IP地址 请删除网卡 并挂载新网卡 云服务器已关机 如果网卡绑定了虚拟IP或者DNAT规则 需要先解绑 如果网卡上有

  • 双向交错CCM图腾柱无桥单相PFC学习仿真与实现（2）SOGI_PLL学习仿真总结

    目录 前言 SOGI基本原理 锁相环基本原理 仿真实现及说明 总结 前言 前面总结了双向交错CCM图腾柱无桥单相PFC系统实现 后面把问题细分 关于SOGI锁相环的应用和学习在这里总结下 双向交错CCM图腾柱无桥单相PFC学习仿真与实现 1

  • 大数据流处理(Spark Streaming + Kafka)面试常考考点

    1 ack Kafka Producer的参数 是把数据写到Kafka broker里面去时需要的参数 常见的值有1 0 all 1 0 leader不做等待 只管发不管结果 延时性最低 持久性最差 1 默认 只要leader写数据到本地即

  • Windows 安装 Nginx

    Nginx下载nginx documentation Nginx 是一个高性能的网页服务器 能够反向代理HTTP HTTPS SMTP POP3 IMAP的协议链接 也可以作为一个负载均衡器和 HTTP 缓存 是一个免费 开源 高性能的 H

  • LeGO-LOAM建图

    1 安装LeGO LOAM LeGO LOAM需要依赖 ROS 环境 和 gtsam 遇到github下载慢的情况 可以从gitee导入仓库下载 1 1安装依赖项 wget wget O software gtsam zip https g

  • win10程序员计算器面板按钮介绍

    HEX 十六进制 DEC 十进制 OCT 八进制 BIN 二进制 注意这里的二进制为二进制补码形式 每输入一个数 进制转换会自动进行 QWORD 四字 64位 DWORD 双字 32位 WORD 字 16位 BYTE 字节 8位 Lsh 左

  • 递归实现逆序输出整数——C语言

    本题目要求读入1个正整数n 然后编写递归函数reverse int n 实现将该正整数逆序输出 输入格式 输入在一行中给出1个正整数n 输出格式 对每一组输入 在一行中输出n的逆序数 输入样例 12345 结尾无空行 输出样例 54321

  • BFC渲染机制

    BFC block formatting context 块级格式化上下文 实际就是一个隔离罩 W3C CSS2 1 规范中的一个概念 它是页面中的一块渲染区域 并且有一套渲染规则 它决定了其子元素将如何定位 以及和其他元素的关系和相互作用

热门标签