CSS中的各种FC

什么是FC?

Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。

BFC

什么是BFC

Block Formatting Context,块级格式化上下文,一个独立的块级渲染区域,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。

BFC的约束规则
  1. 内部的BOX会在垂直方向上一个接一个的放置;
  2. 垂直方向上的距离由margin决定。(完整的说法是:属于同一个BFC的俩个相邻的BOX的margin会发生重叠,与方向无关。)
  3. 每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此。(这说明BFC中的子元素不会超出它的包含块,而position为absolute的元素可以超出它的包含块边界);
  4. BFC的区域不会与float的元素区域重叠;
  5. 计算BFC的高度时,浮动子元素也参与计算;
  6. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然;
BFC的应用
  • 防止margin发生重叠
  • 防止发生因浮动导致的高度塌陷
怎么生成BFC
  • float的值不为none;
  • overflow的值不为visible;
  • display的值为inline-block、table-cell、table-caption;
  • position的值为absolute或fixed;

display:table也认为可以生成BFC?其实是在于Table会默认生成一个匿名的table-cell,正是这个匿名的table-cell生成了BFC。

IFC

什么是IFC

IFC(Inline Formatting Contexts)直译为"行内格式化上下文",IFC的line box(线框)高度由其包含行内元素中最高的实际高度计算而来(不受到竖直方向的padding/margin影响)

IFC有的特性
  1. IFC中的line box一般左右都贴紧整个IFC,但是会因为float元素而扰乱。float元素会位于IFC与与line box之间,使得line box宽度缩短。

  2. IFC中时不可能有块级元素的,当插入块级元素时(如p中插入div)会产生两个匿名块与div分隔开,即产生两个IFC,每个IFC对外表现为块级元素,与div垂直排列。

IFC的应用
  1. 水平居中:当一个块要在环境中水平居中时,设置其为inline-block则会在外层产生IFC,通过text-align则可以使其水平居中。

  2. 垂直居中:创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。

GFC

GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文",当为一个元素设置display值为grid的时候,此元素将会获得一个独立的渲染区域,我们可以通过在网格容器(grid container)上定义网格定义行(grid definition rows)和网格定义列(grid definition columns)属性各在网格项目(grid item)上定义网格行(grid row)和网格列(grid columns)为每一个网格项目(grid item)定义位置和空间。

GFC将改变传统的布局模式,他将让布局从一维布局变成了二维布局。简单的说,有了GFC之后,布局不再局限于单个维度了。这个时候你要实现类似九宫格,拼图之类的布局效果显得格外的容易。

FFC

FFC(Flex Formatting Contexts)直译为"自适应格式化上下文",display值为flex或者inline-flex的元素将会生成自适应容器(flex container)。

Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素,而设置为 inline-flex 的容器则渲染为一个行内元素。

伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说,Flexbox 定义了伸缩容器内伸缩项目该如何布局。

FFC与BFC的区别

FFC与BFC有点儿类似,但仍有以下几点区别:

  • Flexbox 不支持 ::first-line 和 ::first-letter 这两种伪元素

  • vertical-align 对 Flexbox 中的子元素 是没有效果的

  • float 和 clear 属性对 Flexbox 中的子元素是没有效果的,也不会使子元素脱离文档流(但是对Flexbox 是有效果的!)

  • 多栏布局(column-*) 在 Flexbox 中也是失效的,就是说我们不能使用多栏布局在Flexbox 排列其下的子元素

  • Flexbox 下的子元素不会继承父级容器的宽


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361253.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HDU 2647 Reward 拓扑排序

http://acm.hdu.edu.cn/showproblem.php?pid2647 题意: 输入N和M代表N个人和M组数据,M组数据中的A和B代表A的工资要比B的工资高,底薪是(888元),问你这个老板至少要付 多少钱给这些员工,A比B工资…

EE Servlet 3:简单表单处理

对于大多数Web开发人员而言,Web应用程序中的表单处理就像小菜一碟。 如果我们无法捕获用户的输入并进行处理,将不会有太大用处。 因此,我在servlet3示例中包含了一个简单的FormServlet ,该示例演示了您可能会遇到的很少使用的表单…

编写高质量的代码--基础:结构和样式,行为的分离

实现高质量的代码需要我们在结构和样式,行为的分离的基础上做到:精简,重用,有序。精简:尽量减小文件的大小,提高页面加载速度。重用:提高代码的重用性,减少冗余代码,提高…

提高Java的锁性能

Plumbr是唯一通过解释应用程序性能数据来自动检测Java性能问题的根本原因的解决方案。 几个月前,我们在Plumbr中引入了锁定线程检测之后,我们开始收到类似于“嘿,太好了,现在我知道是什么导致了性能问题,但是现在应该…

APK反编译工具

apktool dex2jar jd-gui 1、将要反编译的APK文件后缀改为.zip,解压 2、取出classes.dex文件,拷贝至dex2jar目录。 3、在dex2jar目录运行下列命令行:dex2jar.bat classes.dex,回车。 4、会发现该目录生成了classes.dex.dex2jar.j…

Dom属性方法

一、javascript的三大核心 1.ECMAScript js的语法标准 2.DOM Document object Model 文档对象模型,提供的方法可以让js操作html标签 3.BOM Browser Object Model 浏览器对象模型,提供的方法让js可以操作浏览器 注意:1. js里最大的boss是wind…

学习Netflix管理员–第2部分

为了继续上一篇有关Netflix Governator的一些基础知识的文章,在这里,我将介绍Netflix Governator带给Google Guice的另一项增强功能–生命周期管理 生命周期管理本质上提供了进入对象所经历的不同生命周期阶段的钩子,以引用有关Governor的Wi…

[置顶] UDP协议---心德(1)

UDP协议1.面向无连接 2.速度快 3.不可靠的协议,容易丢包 4.包小于64k DatagramSocket:此类表示用来发送和接收数据报包的套接字 DatagramPacket:数据包 发送端: 1.创建一个udpsocket服务 DatagrameSocket dsnew DatagramSocket(); 2.将数据封装到数据包…

@vue/cli 3 运行支持报错 socket

问题 /sockjs-node/info 无限报错解决方案 原因是相关代理端不支持 ws,因此需要在代理处关闭 ws,即 ws: false,如下:vue.config.js const ds_proxy {/: {ws: false,target: https://dev.test.gitinn.com/,changeOrigin: true,…

Eclipse快捷键以及设置

转自:http://www.blogjava.net/liudawei/articles/362468.html Eclipse实用快捷键大全 收藏 Alt左箭头,右箭头 以在编辑窗口切换标签Alt上下箭头, 以自动选择鼠标所在行,并将其上下移动Ctrlf6 可以弹出菜单…

学习Netflix管理员–第1部分

最近几天,我一直在与Netflix Governator合作,并尝试使用Governator尝试一个小样本,以将其与Spring Framework的依赖项注入功能集进行比较。 以下内容并不全面,我将在下一系列文章中对此进行扩展。 因此,对于没有经验的…

元素类型

元素是文档结构的基础&#xff0c;在CSS中&#xff0c;每个元素生成了一个包含了元素内容的框&#xff08;box&#xff0c;也译为“盒子”&#xff09;。但是不同的元素显示的方式会有所不同&#xff0c;例 如<div>和<span>就不同&#xff0c;而<strong>和&l…

React 等框架使用 index 做 key 的问题

React 等框架使用 index 做 key 的问题 假如有两个树&#xff0c;一个是之前&#xff0c;一个是更变之后&#xff0c;我们抽象成两种可能性。 插入内容在最后插入内容在最前 关于插在中间&#xff0c;原理一样&#xff0c;就不阐述。 使用 ul 代表树&#xff0c;并且使用了…

非捕获Lambda的实例

大约一个月前&#xff0c;我在Java 8的lambda表达式框架下总结了Brian Goetz的观点 。 目前&#xff0c;我正在研究有关默认方法的文章&#xff0c;令我惊讶的是&#xff0c;我又回到了Java处理lambda表达式的方式。 这两个功能的交集可能会产生微妙但令人惊讶的效果&#xff0…

SQL Server 查询性能优化——创建索引原则(一)

索引是什么&#xff1f;索引是提高查询性能的一个重要工具&#xff0c;索引就是把查询语句所需要的少量数据添加到索引分页中&#xff0c;这样访问数据时只要访问少数索引的分页就可以。但是索引对于提高查询性能也不是万能的&#xff0c;也不是建立越多的索引就越好。索引建少…

WordPress强制跳转https教程

在互联网火热的今天&#xff0c;安全问题显得越来越重要&#xff0c;为了用户信息安全&#xff0c;很多热门网站都启用了https 有小伙伴就问&#xff1a;我启用了https&#xff0c;为什么访问的时候显示的还是http呢&#xff1f; 其实&#xff0c;有时候并不是因为我们ssl证书…

AEM中的单元测试(大声思考)

如果要在AEM中进行单元测试&#xff0c;这不是任何建议&#xff0c;而是各种思想的总结和一些可供选择的选项。 一段时间以前&#xff0c;我已经为客户进行了一些研究&#xff0c;这篇文章在很大程度上受到了这项工作的影响&#xff0c;但是很多上下文相关的东西已经被淘汰了。…

Java 8的装饰器模式

在最近的一篇文章中&#xff0c;我描述了装饰器模式如何拯救了我的一天。 我给出了一个小代码段&#xff0c;其中包含创建装饰器的最简单方法&#xff0c;但承诺Java 8会有更好的方法。 这里是&#xff1a; 用Java 8装饰 HyperlinkListener listener this::changeHtmlViewBa…

WPF中使用流文档灵活地显示内容

WPF中使用流文档灵活地显示内容 by: Markus Egger form: http://msdn.microsoft.com/msdnmag/issues/07/08/wpf/default.aspx?loczh Windows Presentation Foundation (WPF) 提供了一系列功能。事实上&#xff0c;功能…

canvas图表(4) - 散点图

原文地址&#xff1a;canvas图表(4) - 散点图 今天开始完成散点图&#xff0c;做完这一节&#xff0c;我的canvas图表系列就算是完成了&#xff0c;毕竟平时最频繁用到的就是这几类图表了&#xff1a;柱状&#xff0c;折线&#xff0c;饼图&#xff0c;散点。经过编写canvas图表…