BFC与IFC
在我们做的网页上通常最重要的其中一点就是美观度,bfc他是一个块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
因为我现在天天在做网页了,之前没怎么关注bfc与ifc原理,以至于我做出来的网页有点偏差。所以要深刻学习以下知识。
bfc:指它里面的子元素不会影响到外面的元素
加上一个overflow:hilden该元素的子元素是一个bfc下面
只要触发的是个bfc那么它对外面都没有影响。
1.block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context;
2.inline-level box:display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且参与 inline formatting context;
块级元素,在浏览器中通常是垂直布局,然后可以用margin来控制块级元素之间的间距,并列和嵌套的块级元素都存在外边距,也就是margin合并的问题。
而行内元素是以水平的方式布局,垂直方向的margin,padding都是无效的,并且设置的宽高也是无效的。
它还有一些布局的规则:
- 内部的Box会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时,浮动元素也参与计算
而IFC为"内联格式化上下文",IFC的line box(线框)高度由其包含行内元素中最高的实际高度计算而来的
1.IFC中的line box一般左右都贴紧整个IFC,但是会因为float元素而扰乱。float元素会位于IFC与与line box之间,使得line box宽度缩短。
2.水平居中:当一个块要在水平居中时,设置为inline-block则会在外层产生IFC,通过text-align可以水平居中。
3.垂直居中:创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。
同个ifc下的多个line box高度会不同。 IFC中时不可能有块级元素的,当插入块级元素时(如p中插入div)会产生两个匿名块与div分隔开,即产生两个IFC,每个IFC对外表现为块级元素,与div垂直排列。
BFC与IFC的更多相关文章
- 浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
- 初识 BFC、 IFC、GFC、FFC
首先本文中介绍的 BFC. IFC.GFC.FFC 均为 CSS 中常见问题的解读,如没兴趣,可以绕道了. 然后在介绍这么多的 *FC 之前,我们得了解 一下 Box 和 Formatting Con ...
- 你知道BFC、IFC、FFC、GFC及多栏自适应布局吗?
FC(Formatting Context)格式化内容,常见的FC有BFC.IFC.FFC.GFC四种类型,BFC和IFC是W3C CSS2.1规范提出的概念,FFC和GFC是W3C CSS3规范提出 ...
- 【转】前端的BFC、IFC、GFC和FFC
什么是BFC.IFC.GFC和FFC CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC. FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念. ...
- 什么是BFC、IFC、GFC和FFC
什么是BFC.IFC.GFC和FFC CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC. FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念. ...
- 重拾 BFC、IFC、GFC、FFC
温故知新,巩固基础 从 FC 开始 FC,Formatting Context,格式化上下文,是 W3C CSS2.1 规范中的一个概念,定义的是页面中一块渲染区域,并且有一套渲染规则,它决定了其子元 ...
- 浅谈BFC和IFC
先说说FC,FC的含义就是Fomatting Context.它是CSS2.1规范中的一个概念. 它是页面中的一块渲染区域.而且有一套渲染规则,它决定了其子元素将怎样定位.以及和其它元素的关系和相互作 ...
- CSS之BFC、IFC、FFC and GFC
CSS之BFC.IFC.FFC and GFC 什么是FC? BFC(Block Formatting Contexts) BFC的布局规则: 如何生成BFC: IFC(Inline Formatti ...
- 到底什么是BFC、IFC、GFC和FFC,次奥?
软件开发的一般被称为民工,搞前端的,有人形容为是掏粪工,说白了连民工级别高都没有.说直接点就是个制作界面的,注意,连设计界面的都算不上,一般前端都是拿着设计稿去照这样子开发的. 说这些无非是觉得前端前 ...
随机推荐
- importExcel运用注解实现EXCEL导入poi类
JAVA报表 package com.app.common.excel; import java.io.File; import java.io.FileInputStream; import jav ...
- Codeforces Round #154 (Div. 2) : B
一个很简单的题: 方法一: 二分. 代码: #include<cstdio> #include<algorithm> #define maxn 100005 using nam ...
- MIST
获取当前状态机 modelObj.states[modelObj.curStatus.stateId] "FH_Search" modelObj.states[modelObj.p ...
- linux RWT
http://www.cnblogs.com/qlwy/archive/2011/06/26/2121919.html#undefined
- EntityFramework 异常 -- An entity object cannot be referenced by multiple instances of IEntityChangeTracker
问题 在调用 DbSet 的 Attach() 方法时(与将 Entity 设置为 EntityState.Unchanged 状态等价)报告以下错误: An entity ob ...
- 【HDOJ】2389 Rain on your Parade
读题显然是二分图匹配,看成guest与umbrella的匹配.匈牙利果断TLE了,其实时间卡的相当紧.HK过的,750ms. /* 2389 */ #include <iostream> ...
- Delphi webservice 定义 转
webservice Web Services是由企业发布的完成其特定商务需求的在线应用服务,其他公司或应用软件能够通过Internet来访问并使用这项在线服务. 简介 它是一种构建应用程序的普遍 ...
- SqlServer:CTE函数处理递归(WITH语法)
我们在做分类处理的时候,总会遇到递归的处理,比如说地区就是一个例子,中国--北京--西城区,我们可以把这样的信息存储在一个数据表中,用ParentID区分根节点和叶子节点.假如我们要做导航,得到了”西 ...
- Oracle数据库12560及更改密码为永久
小厂子的程序员还要折腾Oracle维护.这这里简单记录一下Oracle数据库服务器使用时遇到并解决的一些问题. 1. 在Oracle数据库服务器上(即安装Oracle数据库端的机器上),可以使用命令 ...
- FBReader移植日记 第二天
昨天我们的移植工作进行了一大半,还留下两个重要的部分没有完成:1.没有移植的 ZLTextView,2.FormatPlugin相关的类. 第一个问题我们放在后面解决,下面先解决格式插件的问题. 我们 ...