BFC - Block Formating Context 块级格式化上下文 BFC的目的是形成一个完成独立的空间，让空间里的子元素不会影响到外面的布局。 如何形成这样一个神奇的空间？我们为元素设置一些CSS属性就能触发这一空间。 最常见的触发规则有4种： 1、float不为none 2、position 不为 relative和stat
CSS盒模型在面试和日常开发的时候都是比较容易遇见的。 CSS盒模型主要有两种：标准盒模型和IE盒模型。 标准盒模型和IE盒模型他们主要的区别在于他们内容宽度问题。而这两种和模型是通过box-sizing来设定的，开发中默认的设定规则是content-box，但这种模式时真的不怎么好用。IE盒模型比
盒子模型 标准模型和IE模型 标准模型（标准w3c盒子模型） width和height都是根据其content的宽高算的 width=concent IE盒子模型 IE 盒子模型的 content 部分包含了 border 和 padding。 width=content+padding+border 外边距重叠问题 1. 兄弟元素边距重叠 当两个垂直外边距相
CSS / HTML基础问题总结大全（二） 一、二、script标签的defer和async三、介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？四、对 BFC 规范（块级格式化上下文：block formatting context）的理解？ 一、<!DOCTYPE> <!DOCTYPE>声明不是HTML标签，指示web浏览器关于页
/* bfc 块级格式化上下文； bfc 触发条件： html float不为none position为absolute 或者 fixed display为inline-block table-cell table-caption flex inline-flex; overflow不为visible；用的
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .outer{ 8 border:10px
【转】 前端笔记之CSS（下）浮动&BFC&定位&Hack 一、浮动 1.1 各个语言的主要知识点 HTML：标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS： 样式： 布局： 标准流(标准文档流、普通文档流)：盒子模型(width/height+padding+border+margin) 块元素行内元素
“刷脸支付系统”是一款基于人脸识别系统的支付平台，该系统无需钱包、信用卡或手机，会自动将消费者面部信息与个人账户相关联，支付时只需要面对设备屏幕上的摄像头即可，整个交易过程高效、便捷。 刷脸支付是依据人脸识别技术，是通过对人脸的面部特征进行识别，是结合了生物识别技术和图形
“刷脸支付系统”是一款基于人脸识别系统的支付平台，该系统无需钱包、信用卡或手机，会自动将消费者面部信息与个人账户相关联，支付时只需要面对设备屏幕上的摄像头即可，整个交易过程高效、便捷。 刷脸支付是依据人脸识别技术，是通过对人脸的面部特征进行识别，是结合了生物识别技术和图形
FC（Fomatting Context）：是页面中的一块渲染区域，有其渲染规则，决定其子元素将如何定位，以及和其他元素的关系和相互作用。 一）BFC规范（block）块级格式化上下文85 形成BFC条件：浮动元素（float除none以外的值） 定位元素（position的absolute / fixed）
BFC的基本概念: 通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。 BFC原理: BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。 BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。 BFC的区
7.25 面经。怕忘记记录一下比较常见的一些样式问题 1. margin外边距重叠问题：因为bfc的特性，同一个bfc容器的元素会发生，但是两个bfc容器不会 1. 能产生bfc - body 根元素 - 浮动元素：float 除 none 以外的值 - 绝对定位元素：position (a
BFC理解及运用BFC解决css bug Block Formatting Context (“块级格式化上下文”) 的缩写即为 BFC BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。 BFC的布局规则
边距重叠 统一的解决方案；设置padding或者border或者触发BFC 边距重叠有一下三种情况： 首先把所有的margin格式清空 <head> <title>边距重叠</title> <style> html *{ margin-top: 0px; padding: 0px; } </style> </head> <body> 1.父子元素之间 块级父
首先回顾下CSS常出现的几个样式问题1当子元素添加上边距时，父元素也会向下移动 解决方法:给子元素添加display:inline-block;或者用父元素的padding-top代替给可以 2子元素浮动后，父级元素检测不到其高度3当元素浮动后，兄弟元素的内容超过其高度后会侵占它的区域（其实问题原因与第
上一篇：《CSS世界》笔记三：内联元素与对齐下一篇：《CSS世界》笔记五：CSS层叠规则及元素隐藏 写在前面 原本博客名为“浮动与定位”，但是《CSS世界》第六章节的内容不仅有浮动定位，很大一部分篇幅都在讲BFC和overflow。更吸引人的是，作者将float/absolute/relative形容为“魔界三兄弟”，将
定义 BFC全称为block formatting context，意为块级格式化上下文，是Web页面中盒模型布局的css渲染模式。 可能上面的解释看了有点懵逼，通俗的说BFC指的的是一块区域的布局， 这个区域的布局有一个显著特点：这个区域内的子元素无论使用何种布局、何种样式都不会影响外部的元素。BFC比较常
BFC（block formatting context）块级格式化上下文。 如果一个元素具有 BFC，内部子元素无论如何都不会影响外部的元素。所以，BFC 元素是不可能发生 margin 重叠的，因为 margin 重叠是会影响外面的元素的; BFC 元素也可以用来清除浮动的影响，因为如果不清除，子元素浮动则父元素高度塌陷，必然
BFC的定义 BFC到底是个啥呢？先贴出一段大佬们在分析BFC的时候字面上的理解： 在CSS布局中，是通过对一个个box的布局，来实现整体页面的布局，这一个个box也就是一个个容器元素，这些元素分为两类：块级元素(block)，行内元素(inline)。 对于不同类型的元素，有不同的处理规则，这个元素
BFC实际上是形成一个独立的区域，与外界元素互不影响。 触发BFC的条件可以有： 1. overflow不为visible 2. float不为none 3. position不为static或relative 4. display为table-cell、flex、inline-block、inline-flex BFC能解决的问题： 浮动元素造成父元素高度塌陷 其他解决方式：为父元
BFC布局规则: 内部的Box会在垂直方向，按照从上到下的方式逐个排列。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此 BFC的区域
1.文档流 文档流其实分为定位流、浮动流、普通流三种。而普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC，还有GFC和FFC。 常规流(No
1、有关BFC的理解 2、盒模型的理解 3、box-sizing的理解 4、渐进增强 VS 优雅降级 5、url->页面加载完成的整个流程 6、js组成部分 7、如何跨域访问 8、js判断数组 9、严格模式 10、ajax的优缺点 11、HTML、XML、XHTML 有什么区别 12、html语义化 13、内容与样式分离 14、meta标
接着聊一下BFC、IFC，与FFC、GFC，GFC是一种二维度的布局方式，现在也蛮火，但是因为兼容性问题比较大，现在用的不多。其实这些布局方式经常会遇到，主要是想了解一下相关的各种概念和术语。 想要理解BFC与IFC，首先要理解另外两个概念：Box 和 FC（即 formatting context） 1、Box 一个
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>BFC - 块级格式化上下文</title> 5 <!-- 6 BFC的布局规则: 7 1. 内部的Box会在垂直方向，一个接一个地放置。 8 2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin
