2021-10-12 关于BFC的知识点

最新推荐文章于 2024-08-28 15:34:24 发布
最新推荐文章于 2024-08-28 15:34:24 发布
阅读量52 收藏
点赞数
文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jpljyb/article/details/120732955
版权
本文深入探讨了BFC（块级格式化上下文）在HTML布局中的关键作用，包括解决元素垂直与水平排布问题、消除margin重叠、理解和应用float布局、修复高度塌陷以及理解BFC之间的相互独立。通过掌握BFC，可以更好地优化页面布局，创建自适应两栏布局。此外，还介绍了触发BFC的条件，如overflow隐藏、浮动和定位等。
摘要由CSDN通过智能技术生成

BFC块级格式化上下文[对于之前遇到现象的解释]
1.在htm1中为啥元素在垂直方向上排布以及为啥有的元素在水平方向上排布
html本身就是-一个BFC, [自身变成了-一个新的BFC]
2. margin重叠的解决方案
overflow:hidden 触了一个 新的BFC
3. float为啥哪样那个排布
float box区域不会与触发BFC的区域融合
[自适应两栏的布局/双飞翼布局[html中结构的顺序]]
4.解决高度塌陷方法的解释
BFC会把浮动的高度也计算在内
5.对于父亲和孩子为啥挨着
BFC中:子元素的margin始终与父元素的boder紧挨着
6. BFC之间互不影响
出发BFC的条件
1. html
2.脱离标准文档流的也可以float值 不为none position的 值为fixed/ absolute
3. overflow的值不为默认
4. display:inline-block/table-caption/table-cell/flex/inline-flex

我要变秃了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BFC知识点
Mr_qinyivue的博客
09-20 205
1.BFC是块级格式化上下文，独立渲染区，只有块元素参与BFC布局逻辑，内部的(box)盒会在垂直方向上依次放置。 2.box垂直方向的距离由margin决定，属于同一个BFC相邻两个box的上下margin会发生重叠，按照margin的最大值设定。 3.每个元素的margin的box左边与包含块border box的左边相接触。 4.BFC区域不会与float box重叠。 5.BFC是页面上隔离独立的容器，容器里面的子元素不受外面的影响。 6.计算BFC高度时，浮动元素也参与计算。 触发BFC有哪些条
前端知识点之BFC
PrototypeOne的博客
04-24 509
BFC 什么是BFC BFC：Block formatting context，中文块级格式化上下文。 它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。 BFC的布局规则 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由m
浅谈BFC
QiuHuanmin的博客
03-24 735
之前，对于BFC的概念很模糊，前几天做了百度前端技术学院第一阶段的任务3、任务6、任务8，涉及到了这个问题。师兄讲说让我去了解下BFC，于是乎，通过翻阅资料、百度科普，就有了这篇文章。简单总结一下对BFC的认识。     1.什么是BFC      BFC即Block  Formatting  Content。首先大家知道Box即CSS布局的对象和基本单位，是盒模型，不同类型的Box会参与不同
BFC详解
weixin_47450807的博客
03-21 727
一、写在前面 今天看到一道面试题，主要是关于BFC的理解，下面将针对BFC的相关特性做出总结。 二、何为BFC BFC(Block Formatting Context)格式化上下文，是 web页面中盒子模型布局的CSS渲染模式，指的是一个独立 的渲染区域或者是一个隔离的独立容器。 三、形成BFC的条件 1、浮动元素，float除none以外。 2、定位元素，position(absolute, fixed) 3、display为以下其中之一的值：inline-block,table-cell,table
BFC-开源
05-15
通过了解这些知识点，我们可以看到"BFC-开源"不仅是一个编译器，还体现了开源社区的力量和跨平台软件设计的理念。对于开发者来说，这是一个很好的学习和实践编译器构造、跨平台开发以及参与开源协作的机会。
Windows DWrite 组件 RCE 漏洞 (CVE-2021-24093) 分析
smellycat000的专栏
06-24 768
聚焦源代码安全，网罗国内外最新资讯！概述Windows图形组件DWrite库存在数组越界写漏洞 (CVE-2021-24093)，可导致远程代码执行。当DWrite库解析恶意构造的字体文...
Web-前端html+css从入门到精通 133. BFC规范（下）.zip
05-23
本篇将深入探讨BFC规范，帮助初学者从入门到精通，理解并掌握这一关键知识点。 首先，BFC是一个独立的布局区域，它有自己的渲染规则，比如内部元素如何排列、如何避免浮动元素的影响等。在BFC中，元素按照一定的...
【CSS知识点】——解决高度塌陷以及BFC详解
m0_50785976的博客
10-29 287
高度塌陷以及BFC详解
前端基础知识点-每天一个基本知识点（100+个前端小知识，你是否都知道？）
m0_67394006的博客
03-02 9075
文章目录 前言 第一回合 一、知识点：cookie（21/09/06） 二、知识点：节流和防抖（21/09/07） 三、知识点：var和let以及const（21/09/08） 四：知识点：深拷贝和浅拷贝（21/09/09） 五、知识点：作用域和作用域链（21/09/10） 六、知识点：从输入URL到页面展示这中间发生了什么（21/09/11） 七、知识点：重排和重绘（21/09/12） 八、知识点：TCP和UDP（21/09/13） 九、知识点：三次握手（21/09/15） 十、知识点：绝对定位和相对定
33.鼠标悬停时的波浪线效果 & CSS 重置
粉丝们务必加入微信粉丝群
08-25 89
通过理解这些原则,你可以创建你自己的重置,完美地适合你的项目的独特需求。这个技巧是 CSS 和 SVG 如何协同工作以创建令人兴奋的视觉效果的一个很好的例子。通过理解这些技术,你可以创建真正独特和吸引人的网页设计,给你的用户留下深刻印象。它避免了许多旧的 CSS 重置的复杂性和过度特异性,而是依靠更现代的浏览器默认值。从其中一些中汲取灵感,这里是我的自以为是的 CSS 重置,以及我选择包含每个规则的原因解释。虽然这可以工作,但它可能会使你的 CSS 难以阅读和维护,特别是如果你有多个这样的效果。
CSS\JS实现页面背景气泡logo上浮效果
p_s_p的博客
08-24 372
【代码】CSS\JS实现页面背景气泡logo上浮效果。
CSS基础 什么是盒模型
最新发布
呼叫6945的博客
08-28 426
当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒（box）一个盒子由四个部分组成：content、padding、border、margin在css中盒模型可以分为假设一个盒子的css如下。
CSS实现水滴效果图
N201871643的博客
08-26 184
水滴效果：指在网页上呈现出水滴从上方滴落的效果，通常伴随着水波纹扩散的动画效果。CSS：层叠样式表（Cascading Style Sheets），是一种用于描述HTML或XML（包括各种XML方言，如SVG、XHTML等）文档呈现的样式语言。
引号的艺术：用CSS quotes 属性打造个性化引用
2401_85812026的博客
08-25 433
CSS 的quotes属性是一个强大的工具，它允许开发者自定义网页上的引用标记，从而增强网页的视觉效果和用户体验。本文将深入探讨quotes属性的使用方法，包括如何设置不同的引号样式，以及如何结合伪元素和内容生成技术来实现更复杂的引号效果。quotes属性用于指定在元素中使用的引用标记。它可以定义开放引号和闭合引号，以及它们的类型（水平或垂直）。q {/* 定义中文引号和英文引号 */q:before {q:after {
2024前端面试题-css篇
FormAda的博客
08-21 1045
使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决，只要加了-webkit-text-size-adjust:none;收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用display：block/inline-block/...；‌3.使用display属性‌：将元素的display属性设置为inline-block、table-cell、table-caption、flex或grid等也可以触发BFC。
打印样式的艺术：用CSS @media 规则优化页面输出
2401_85761003的博客
08-25 827
随着Web技术的发展，CSS已经成为前端设计中不可或缺的一部分。在构建响应式网站时，除了考虑不同屏幕尺寸的显示效果，打印样式的优化同样重要。CSS的@media规则提供了一种灵活的方式来定义不同媒体类型下的样式，其中就包括打印媒体。本文将详细介绍如何使用@media规则来实现打印样式的优化，包括页面布局、字体大小、颜色和背景等的调整，并通过实际的代码示例，展示如何创建适合打印的Web页面。@media规则允许开发者根据不同的媒体类型应用不同的CSS样式。对于打印样式，我们主要关注print媒体类型。
CSS content 属性：伪元素的魔法师
2401_85341950的博客
08-25 425
CSS（层叠样式表）是控制网页样式的强大工具。其中，content属性与伪元素结合使用，能够实现许多创造性的设计效果。伪元素如::before和::after允许我们在选定元素前后插入内容，而content属性则定义了这些内容。本文将详细探讨content属性的用法，包括如何使用它来插入文本、图片、计数器等，并提供丰富的代码示例，以帮助开发者和设计师理解并应用这一功能。在CSS中，伪元素允许我们为元素添加特殊的部分或样式，而不需要修改HTML结构。最常见的伪元素是::before和::after。
CSS3动画——飞行的小精灵
懒羊羊大王的博客
08-25 1211
通过多层结构、渐变色、圆角、多种动画效果以及细节处理，成功地创造了一个充满活力和趣味性的飞行小精灵动画效果。
前端工程师面试高频知识点全解析
以下是对每个部分的关键知识点概述： 1. HTML 部分： - 了解常见兼容性问题及解决策略。 - 掌握页面性能优化技巧，如减少HTTP请求、压缩资源等。 - 深入理解H5（HTML5）的新特性和应用场景。 - 理解浏览器加载...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值