css中bfc和ifc
bfc
定义:块级格式化上下文,他是一个独立的渲染区域,他规定了这个内部如何布局,并且与这个区域的外部毫不相干。
BFC布局规则:
内部的Box会在垂直方向,一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠,常用来清除浮动和布局。
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时,浮动元素也参与计算
生成bfc的元素有哪些:
float的属性不为none
position为absolute和fixed
overflow不为none
display为inline-block,table-cell,flex,inline-flex
ifc
定义:行内格式化上下文
IFC布局规则:
框会从包含块的顶部开始,一个接一个地水平摆放。
摆放这些框的时候,它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上,这些框可能会以不同形式来对齐:它们可能会把底部或顶部对齐,也可能把其内部的文本基线对齐。能把在一行上的框都完全包含进去的一个矩形区域,被称为该行的行框。水平的margin、padding、border有效,垂直无效。不能指定宽高。
行框的宽度是由包含块和存在的浮动来决定。行框的高度由行高计算这一章所描述的规则来决定。
行框一定会高到足以容纳它所包含的全部框。然而,它也可能比它所包含的最高的框还要高(例如:这些框是以基线对齐)。当框 B 的高度小于包含它的行框时,则 B 在行框中垂直对齐的位置由’vertical-align’ 属性来决定。当几个行级框在水平方向上无法塞得进同一个行框时,它们会被分布在两个或多个垂直堆放的行框中。行框会以既没有垂直间距 也没有重叠的方式被垂直堆放起来。
通常,行框的左边紧贴其包含块的左边,而行框的右边紧贴其包含块的右边。然而,浮动框可以插在包含块边缘与行框边缘之间。因此,尽管在同一个IFC中的行框通常有同样的宽度(也就是其包含块的宽度),但它们的宽度也可能受浮动让水平可用空间减少的影响而有所改变。在同一个IFC中,行框的高度通常是变化的(例如:某一行包含了一个比较高的图片,而其它行只包含文本)。
当一行上的行级框的总宽度小于包含它们的行框的宽度,则它们在行框内的水平分布由’text-align’属性来决定。
当一个行内框的宽度超过了行框的宽度,则它会被分割成几个框,而这些框会分布在几个行框。如果此行内框不可分割(例如:单个字符、或语言指定的文字打断规则不允许在此行内框中出现打断、或该行内框受 white-space 属性为 nowrap或 pre 的影响),那么该行内框溢出该行框。
行内框被分割的时候,外边距、边框和内边距在出现分割的地方都没有视觉效果。
**行高计算 ― ‘line-height’ 与 ‘vertical-align’ 属性**
计算行框里的各行内级框的高度。对于置换元素、行内块元素、行内表格元素来说,这是边界框的高度,对于行内框来说,这是其 ‘line-height’。
行内级元素根据其 ‘vertical-align’ 属性垂直对齐。
行框的高是最顶端框的顶边到最底端框的底边的距离。
css中bfc和ifc的更多相关文章
- CSS之BFC、IFC、FFC and GFC
CSS之BFC.IFC.FFC and GFC 什么是FC? BFC(Block Formatting Contexts) BFC的布局规则: 如何生成BFC: IFC(Inline Formatti ...
- 总结下对我对于CSS中BFC的认知
首先第一个,什么是BFC? BFC的全称叫Block Formatting Context (块级格式化上下文)BFC是css中隐含属性,开启BFC后元素会变成一个独立的布局环. 简单来说,它 ...
- 理解CSS中BFC
BFC(Block Formatting Context) 是Web页面中盒模型布局的CSS渲染模式.它的定位体系 属于 常规文档流 .摘自 W3C : 浮动,绝对定位元素, inline-block ...
- html/css中BFC的开启、关闭、作用
什么是BFC BFC是什么并不重要.重要的是开启它干嘛?以及如何开启它 根据W3C的标准,在页面中元素都一个隐含的属性叫做Block Formatting Context(块级 格式化 环境)简称BF ...
- CSS中BFC规则
何为BFC BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的B ...
- 浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
- CSS中的IFC和BFC入门
CSS中的IFC和BFC入门 提到CSS,首先会想到的就是盒模型,如果对于盒模型不是很理解的,看这里.这是一个基础的系列,看了盒模型还可以看看box-sizing,好了不多说了,下面介绍今天的重点 ...
- BFC?来自CSS中的BFC
浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子 ...
- CSS中的BFC
CSS当中BFC介绍 在前端当中,我们都知道标准文档流,我们在开发的时候,经常会碰到block和inline.而下文要说到的BFC就是对块级盒子的格式化.当然block级别的盒子是BFC,那么inli ...
随机推荐
- iOS下JS与原生OC互相调用(总结)
这是去年总结的一篇文章,也一并先放到这个目录下好了. iOS开发免不了要与UIWebView打交道,然后就要涉及到JS与原生OC交互,今天总结一下JS与原生OC交互的两种方式. JS调用原生OC篇 方 ...
- 使用Spring+Junit4.4进行测试
http://nottiansyf.iteye.com/blog/345819 使用Junit4.4测试 在类上的配置Annotation @RunWith(SpringJUnit4ClassRunn ...
- iOS中发送短信/发送邮件的实现 韩俊强的博客
需要引入框架: MessageUI.framework 布局如下: 短信和邮件: #import "ViewController.h" #import <MessageUI/ ...
- C++为什么要设计友元函数和友元类
1. 首先要提一下java,比如java定义一个类1.class,会生成字节码.java有反射机制,可以找到类对象,直接修改类的私有属性.逐渐反射机制成为了一种标准,sun做成标准,JDK的API函数 ...
- windbg分析运行在64位环境下的32位程序的dump
windbg命令如下 1. .load wow64exts 2. !sw 3. ~* kvnf
- Android源码浅析(三)——Android AOSP 5.1.1源码的同步sync和编译make,搭建Samba服务器进行更便捷的烧录刷机
Android源码浅析(三)--Android AOSP 5.1.1源码的同步sync和编译make,搭建Samba服务器进行更便捷的烧录刷机 最近比较忙,而且又要维护自己的博客,视频和公众号,也就没 ...
- SimpleDateFormat用法大全及易错分析
SimpleDateFormat 使用java语言处理日期相关操作,就不可避免的会使用到SimpleDateFormat.当然了,目前我们采用较多的是Calendar类,通过对之求相关的属性值即可得到 ...
- 版本控制之最佳实践(Git版)
现如今,应该每个开发者都在使用版本控制工具了吧.然而,如果你理解版本控制的基本规则,你便能更好地发挥它的效用.在此,我们汇总了一些最佳实践,希望你在使用Git做版本控制时能够了然于心.得心应手. 1. ...
- ActivityManagerService启动过程分析
之前讲Android的View的绘制原理和流程的时候,讲到过在Android调用setContentView之后,Android调用了一个prepreTravle的方法,这里面就提到了Activity ...
- Android平台 Psensor传感器调试方法
一. 驱动层调试1.在板级dts文件中增加相应的dts代码,如:调试sensor类,在代码中找到已经有的代码在修改,I2C使用那根(一般为I2C3),I2C地址(找datasheet或者FAE),哪个 ...