BFC是个什么概念？

【BFC是个什么概念？】的更多相关文章

BFC是个什么概念？

在布局中一般就三种定位方式:普通流.浮动.绝对定位. BFC,译过来叫作“块级格式化上下文”,听起来贼高大上,它属于普通流的一种.通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部的布局. 假如我在body里面写两个div如下: <body> <div></div> <div></div> </body> 给他们都添加如下样式: width: 100px; height: 100px…

前端笔记之CSS（下）浮动&BFC&定位&Hack

一.浮动 1.1 各个语言的主要知识点 HTML:标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS: 样式: 布局: 标准流(标准文档流.普通文档流):盒子模型(width/height+padding+border+margin) 块元素行内元素浮动流:产生?影响?如何解决? 定位流:静态定位(不定位) 相对定位绝对定位固定定位 JavaScript(JS): ECMAScript:语法 DOM: BOM: 1.2 浮动产生的背景? 背景:浮动产生的初衷是为了解决…

什么是BFC（Block Formatting Context）

原文:https://segmentfault.com/a/1190000012221820 https://www.w3.org/TR/CSS2/visuren.html#block-formatting 9.4 Normal flow Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level bo…

BFC 从了解到放弃

最近工作中我突然产生了一个想法,就如我们人类面临的终极问题一般,我从哪里来?我到哪里去?在撸代码进行CSS布局的时候,我会去想,我为什么这么做?,为什么浮动的元素要用overflow?,为什么要用clearfix?,为什么边距会重叠?为什么absolute就不需要clearfix,为什么... 作业部落地址:https://www.zybuluo.com/shenguotao/note/625449 目录: 什么是BFC?及其作用! 如何产生BFC? BFC的应用边距重叠不与float bo…

CSS 潜藏着的BFC

在写样式时,往往是添加了一个样式,又或者是修改了某个属性,就达到了我们的预期. 而BFC就潜藏在其中,当你修改样式时,一不小心就能触发它而毫无察觉,因此没有意识到BFC的神奇之处. 什么是BFC(Block Formatting Context) 写CSS样式时,对一个元素设置css,我们首先要知道这个元素是块级元素还是行内元素,而BFC就是用来格式化块级盒子的. Formatting Context:指页面中一个渲染区域,并且拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系…

BFC 浅谈

写在前面 Block formatting context (块级格式化上下文) 页面文档由块block构成每个block在页面上占据自己的位置使用新的元素构建BFC overflow:hidden | auto | scroll: 只要不为visible新的空间告诉浏览器,外面的环境影响不到我了我重新来进行Block formatting 布局和定位核心: 新的BFC,给出了新的不受外界影响的块级格式化环境 block 块级-> 页面的基础 formatting context 格式化-…

BFC理解

Block formatting context (块级格式化上下文) 页面文档由块block构成每个block在页面上占据自己的位置使用新的元素构建BFC overflow:hidden | auto | scroll: 只要不为visible 新的空间告诉浏览器,外面的环境影响不到我了我重新来进行Block formatting 布局和定位核心: 新的BFC,给出了新的不受外界影响的块级格式化环境 block 块级-> 页面的基础 formatting context 格式化->…

BFC 是什么？

BFC 是什么? 本文写于 2020 年 7 月 17 日总有同学问我:"这个 div 为什么会插出来?为什么 float 的 div 这么不好操作?".这其实就是没有深入理解 BFC 而造成的后果. BFC,全名 Block Formatting Context,译为块格式化上下文. 当我第一次看到这个中文的时候,我觉得这简直就是直译啊!太赤裸裸了!并且翻译过来的这个词语反而让我看不懂了--到底是"块/格式化/上下文"还是"块格式化/上下文"…

CSS十问——好奇心+刨根问底=CSSer

最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限,这篇文章从构思加完成用了四五天,如果你和我一样是前端小白,不妨仔细斟酌体会,以期领悟到一些东西:如果你是业界大牛,也请你驻足随意瞄上两眼,把言辞内容不妥的地方指出来,我们共同讨论. 时刻保持好奇心第一问:当margin的值为百分比形式时,为什么浏览器会根据父容器宽度得出计算值? 在我之前一篇博客…

有时summary的状态和details是否有open属性有关

用过mac的同学对这个界面一定很熟悉,因为这个界面和我们今天要说的details有很多相近的地方,首先,其有折叠效果,用户可以自己选择打开或关闭哪一个,其次,当我们直接打开的时候,默认会有几个标签是打开的,有一些是关闭的,而这些我们的details都能实现. RigMeister2000这个工具比较谜,因为人形角色都没有绑定这个脚本实际上它在LateUpdate里会去做约束处理.但实际上你开不开这个脚本变化不大,或者说基本上没变化. 上述的实现方式并不完美,实际项目中还需要让spring bo…