理解 CSS 布局和块级格式上下文

最新推荐文章于 2022-04-15 20:59:59 发布
最新推荐文章于 2022-04-15 20:59:59 发布
阅读量158 收藏
点赞数

本文的目的是介绍一些概念来帮你增强 CSS 码力。如标题所示这篇文章主要是讲块级格式上下文BFCBlock Formatting Context。你可能没听过这个术语但只要你曾经使用 过CSS 布局你就能明白它。理解 BFC 是什么、它如何工作、如何创建一个 BFC 是非常有用的这些能帮你更好的理解 CSS 布局。

这篇文章里我会通过几个你会很熟悉的的示例解释 BFC。我还会告诉你一个新的 display 值当你理解了 BFC 后可能会很需要这个值。

目录

 

>>>阅读全文

sweetfire
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【前端学习之HTML&CSS进阶篇】-- CSS第二篇 -- 块级格式化上下文与堆叠上下文
lc1852109的博客
04-18 468
本节内容主要是块级格式化上下文的生成和计算规则以及堆叠上下文的应用，对于BFC区域原理的掌握是实现自己想要样式的必备之课，而Z-index的内容也是十分重要的关键样式之一。
【CSS】BFC 块级格式化上下文
最新发布
小秀的博客
10-22 537
可以通俗的理解为 BFC 就是一个功能，创建了 BFC 就相当于开启了这个功能。元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。元素开启 BFC 后，自己不会被其他浮动元素所覆盖。元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。根元素浮动元素绝对定位、固定定位的元素行内块元素表格单元格： table、thead、tbody、tfoot、th、td、tr、captionoverflow 的值不为 visible 的块元素（相对来说影响小些）
BFC--块级格式化上下文
weixin_43581952的博客
09-28 9108
BFC(Block formatting context) （1）概念： 直译为块级格式化上下文，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素. ·我理解为：将BFC看成是一种属性，当拥有该属性的元素就相当于一块独立的区域。 （2）实现BFC属性的方法： 1. 浮动元素，float 除 none 以外的值 2. 定位元素，position的值不是stati...
详解BFC：块级格式化上下文
icemwj的博客
10-06 2777
1、什么是BFC以及如何创建BFC （1）BFC 的概念： BFC（Block formatting context），即块级格式化上下文，它作为 HTML 页面上的一个独立渲染区域，只有区域内元素参与渲染，且不会影响其外部元素。 在一个 Web 页面的 CSS 渲染中，块级格式化上下文 （Block Fromatting Context）是按照块级盒子布局的。 （2）W3C 对 BFC 的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks，table-cells 和
BFC(块级格式化上下文)
qq_52301431的博客
04-15 3676
目录 BFC(块级格式化上下文) （1）元素的显示模式 （2）哪些元素会生成BFC （3）BFC布局规则 （4）BFC的主要用途 1. 清除元素内部浮动 2. 解决外边合并问题 3.阻止元素被浮动元素覆盖 BFC(块级格式化上下文) BFC（Block formatting context） 直译为“块级格式化上下文”。 （1）元素的显示模式 我们之前学过元素的显示模式：display。 分为 块级元素、行内元素、行内块元素。其实，display还有很多值 .
如何理解 CSS 布局和块级格式上下文
09-27
CSS布局和块级格式上下文（Block Formatting Context，简称BFC）是理解CSS布局机制的关键概念。BFC是一个独立的布局环境，它有自己的渲染规则，能够决定内部元素如何排列以及与外部元素如何交互。在CSS中，BFC主要...
CSS理解块级格式上下文（BFC）
09-24
【CSS理解块级格式上下文（BFC）】 在CSS布局中，Block Formatting Context（BFC）是一个至关重要的概念，它决定了元素内部块级元素的布局方式，同时保证了这个区域与外部元素的布局互不影响。BFC可以看作是一个...
CSS中层叠上下文的具体使用
11-21
层叠上下文是CSS布局中的一个关键概念，它涉及到元素在页面上的堆叠顺序，特别是在涉及定位元素...通过精确控制层叠上下文和`z-index`，我们可以确保元素按照预期的方式呈现，从而创建出更加精细和交互丰富的网页设计。
Android布局文件中的“工具：上下文”是什么？
CHCH998的博客
04-06 490
Starting with a recent new version of ADT, I've noticed this new attribute on the layout XML files,
BFC（块级格式上下文）
友人C君的博客
04-11 349
BFC（块级格式上下文） 可以解决：清除浮动问题、外边距合并问题、右侧自适应问题 BFC的生成 满足下列css声明之一的元素便会生成BFC 根元素 float的值不为none overflow的值不为visible（常用 overflow:hidden创建BFC区域） display的值为inline-block、table-cell、table-caption position的...
css【详解】格式化上下文布局 BFC 和 IFC
朝阳39的博客
09-09 528
格式化上下文布局 FC（Formatting Context）格式化上下文—— 一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素之间的关系和相互作用。 IFC布局——行内格式化上下文 inline formatting context 触发IFC的方法 块容器盒内不包括任何块级盒，即块容器盒（html行内块级标签或块级标签）内全是行内盒（html内联标签） IFC布局的特点 行内盒水平排列为一行，当容器宽度不够时就会换行 每一行都会生成一个行盒（见触发IFC的方法.
BFC块级格式化上下文
wangshang1320的博客
03-09 327
(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。那么，如何来创建块级格式化上下文以及格式化上下文的作用是什么？接下来的这篇文章给大家分享一下关于块级格式化上下文的内容。 我们常说的文档流其实分为==定位流、浮动流...
块级格式化上下文
显磊的博客
01-09 630
块级格式化上下文听说过多次，自己也去看了许多文章，但自己总是觉得晦涩，搞不清楚，后来又再去查了下很多文章，终于觉得自己理解一些了，希望自己描述出来能够准确和易懂。 Formatting context Formatting context 是页面的一个渲染区域，它有着自己的渲染规则，决定渲染区域里面的元素怎么定位，以及里面的元素之间的相互作用。而块级格式化上下文(Block fomatting c...
关于对CSS中BFC (块级格式化上下文) 的理解
yuliying的专栏
01-06 1962
转自: https://www.thinktxt.com/web-front/2017/02/18/css-bfc-layout-model.html 也许你已经掌握了HTML、CSS的基本布局技能，但是有可能还有一些难以琢磨透的专业名词还不是很清楚，比如BFC。今天我们就来聊聊对BFC的理解，以便我们在布局的过程中能够更加得心应手。 概念 BFC(Block Formatt
css块级格式化上下文
leadingme的博客
03-25 679
块级格式化上下文(Block Formatting Context，简称BFC) 块级格式化上下文说明 定义：一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局 不同的BFC区域，它们进行渲染时互不感染 创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部 块级格式化上下文具体规则 创建BCF的元素，它的自动高度需要计算浮动元素 – 原因： 为了隔绝内部和外...
[翻译] 理解 CSS 布局和块级格式上下文
weixin_34087503的博客
12-14 122
注：本文首发于个人博客 www.ferecord.com/understandi…，如若转载请注明来源。 前言 BFC 的概念始于 CSS2，是个蛮古老的 CSS 话题了，网上也到处能搜到 BFC 的介绍，但是都不够简洁。本文系翻译自 Rachel Andrew 女士的博文 Understanding CSS Layout And The Block Formatting Context，内容足...
CSS（十八）——块级格式化上下文
老程的小白博客空间
08-29 268
本笔记的内容较为重要，内容不多，但理解起来有些难度。同样在笔记的总结里会对核心概念进行总结和解释。各位同学开这篇笔记可能会多费神一些。 另，如果还是不懂可以私信我。我会尽量为大家说明。
CSS > 译文：理解CSS中的块级格式化上下文
weixin_33911824的博客
08-09 146
CSS > 译文：理解CSS中的块级格式化上下文 Original Author: Ritesh Kumar Original Article: http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/ Translator: HaoyCn D...
如何创建块级格式化上下
05-13
块级格式化上下文（Block Formatting Context，BFC）是一个 Web 页面渲染的基本概念之一，它是一个独立的渲染区域，具有一定的布局规则，可以包含浮动元素，并且可以防止外部元素的影响。 要创建一个BFC，可以按照...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值