CSS布局之BFC和IFC
http://www.cnblogs.com/zt-blog/p/6708358.html
《这是一篇css2-3的布局规则0.000001览》
BFC -- block formatting context 块级格式上下文
块级元素(block-level elements)-- display:block/list-item/table/flex
块级盒(block-level boxes)-- 块级盒是指参与了BFC的盒子,块级元素都会生成包含后代元素和生成内容的自身原本的盒子,并且这个盒子会参与任何位置计算(利用父元素的BFC清除浮动的原理,另外还有clearfix的清除法)!
1. content box(content/inner edge * 4)
conent的四条边构成了content box
2. padding box(padding edge * 4)
padding的四条边构成了padding box
3. border box(border edge * 4)
border的四条边构成了border box
4. margin box(margin * 4)
margin的四条边构成了margin box。(外边距的上下合并解决方法,给父元素添加border,or为父元素设置BFC特性)
包含块(containing block)-- 最近的块级祖先元素的content box
块级排版上下文 BFC --
1. BFC布局是从包含块的顶部开始垂直向下,外边距会合并(仅指处于同一BFC的相邻块级盒),由普通文档流中的块级盒参与,body是root BFC。那么脱离文档流的元素布局呢?来看其他能创建新的BFC的情况:
1) position: absolute;
2) overflow: !visible;的块级盒子
3) float:left/right;
4) 不是块级盒子的block containers比如 display:inline-block/table-cell/table-caption
新的BFC里面的布局不影响外面的,反之亦然。
2. 在BFC中,每个盒子的左外边框紧靠他的包含块的左边框(从右到左则为右边框紧挨),即使相邻元素存在着浮动(但盒子的边框会因这个浮动而收缩),除非这个盒子的内部创建了一个新的BFC(此时盒子因为相邻元素的浮动而变窄),这是盒子左外边框就跑到浮动元素右/后边去了。典型的例子是文字环绕浮动的图片。
IFC -- Inline Formatting Contexts (内联格式上下文)
行内元素/内联元素(inline-level elements) -- 是指那些不会形成新的内容块的源文档的元素,内容被分布在行间,例如,内容段落或内联图片。-- display:inline/inline-table/inline-block. 行内元素生成行级盒子
inline-level box -- 行内级盒子,参与IFC内联格式上下文。
inline box -- 行内盒子,既是内联的(inline-level),同时他的内容参与他的IFC的。例如display:inline产生一个行内盒子,但是置换元素/inline-block/inline-table产生的不是行内盒子。。。
IFC --
1) 在IFC中,所有盒子一个接一个水平排列,从包含块的顶部开始。这些盒子之间的水平margins,borders和paddings互不影响,不合并。盒子可以通过多种方式实现垂直居中/上/下/基线... 包含这些形成一行的矩形区域叫做line box行盒。
2) 行盒的宽度由他的包含块和出现的floats共同决定,高度规则:
行盒中的每个行内级盒子大小 VS 置换元素/inline-block/inline-table元素的margin box高度 VS 行内盒子的line-height 中的最高者。
行内级盒子可以通过他们的vertical-align实现对齐方式,同时影响行盒高度。
行盒的高度是最高的盒子的顶部到最低的盒子底部之间的距离。
空的内联元素inline element产生空的行内盒子,仍可有margin border padding line-height
3) 行盒总是足够高来包含他内部的盒子们,也可能比内部最高的盒子高(例如盒子基线对齐)。当一个盒子高度小于包含它的行盒时,该盒子的垂直对齐由vertical-align决定。当几个盒子水平方向不能装在一个行盒时,他们被分发一堆垂直的行盒,因此,一个段落就是一堆垂直的行盒。行盒们没有垂直的隔离地堆积在一起 ,并且他们不会重叠。
4) 一般地,行盒的左边触碰到他的包含块的左边,右边触碰包含块的右边,但是,浮动盒子可能会出现在包含块的边和行盒的边之间,因此,尽管统一IFC中的行盒一般会有相同的宽度(即包含块的宽度),但是他们的宽度可能不同当水平空间因为float而减少时。统一IFC的行盒的高度是不同的。
5) 当一行的行内级盒子宽度总和比包含它们的行盒小时,他们的水平分布由text-align决定。如果取值justify那么用户代理也可能在行盒拉伸空间和文字(inline-table和inline-block盒子不适用).
6) 当行内盒子超出行盒宽度时,他会被分割成几个盒子,这些盒子分布到几个行盒中。如果一个行内盒子不能被分割开(例如行内盒子包含单个字母,特殊的不允许在行内盒子断字的语言 或white-space:nowrap/pre),那么行内盒子溢出行盒(水平方向)。
7) 当行内盒子被分割时,margins,borders,paddings在分割发生的地方没有可见的效果(或者有很多分割时的每一个分割)
8) 行内盒子也可以被分割成位于同一行盒的盒子, 参考'direction' and 'unicode-bidi' !!!
9) 行盒在IFC中被创建来hold行内级内容的,那些不包含文本,不包含preserved white space,不包含margin/padding/border非0的行内元素,不包含其他in-flow内容(如image,inline blocks, inline tables),不以preservered newline结束的行盒必须被看做高度为0的行盒以便于决定他们内部的元素的定位,并且必须被视为不存在的。
例如:
<P>Several <EM>emphasized words</EM> appear
<STRONG>in this</STRONG> sentence, dear.</P>
在p的块盒总包含5ge行内盒子,em盒子,strong盒子和3个匿名盒子。p的块盒生成行盒的包含块,包含块足够到时,只有一个行盒就够了;否则就会有多个行盒,行内盒子可能被分割。 下面是W3C官网的示例,em盒子设置了margin,padding,border,并且它被分割了,可以看到emphasized之后,words之前没有任何padding,margin,border的可视化效果。
CSS布局之BFC和IFC的更多相关文章
- 浅析CSS里的 BFC 和 IFC
前端日刊 登录 浅析CSS里的 BFC 和 IFC 2018-01-29 阅读 1794 收藏 3 原链:segmentfault.com 分享到: 前端必备图书<Web安全开发指南 掌握白 ...
- CSS布局基础——BFC
what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...
- 浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
- CSS 布局和 BFC
什么是 BFC 在一个Web页面的CSS渲染中,块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的.W3C对BFC的定义如下:浮动元素和绝对定位元素,非块级盒子 ...
- 分析CSS布局中BFC
1.什么是BFC BFC(Block Formatting Context,块级元素格式化上下文)是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和 ...
- CSS布局基础--BFC
1,什么是BFC BFC(Block Formatting Context)块级格式化上下文,它就是一个环境,HTML元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其他环境中的布局. ...
- CSS布局秘籍(1)-任督二脉BFC/IFC
01.CSS布局 1.1.正常布局流(Normal flow) 正常布局流 就是不做任何布局控制,按照HTML的顺序(从左到右,从上而下)进行布局排列.网页基于盒子模型进行正常的布局,主要特点: 盒子 ...
- css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用. BFC 什么是BFC Block ...
- css布局中的各种FC(BFC、IFC、GFC、FFC)
什么是FC?FC(Formatting Context)格式化上下文,其实指的是一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素之间的关系和相互作用. 什么是BFC? BFC( ...
随机推荐
- DBMS的工作模式
数据库管理系统(DBMS)是指数据库系统中对数据进行管理的软件系统,它是数据库系统的核心组成部分,对数据库的一切操作(增删改查)都是通过DBMS进行的 DBMS的工作模式如下: 1>接受应用程序 ...
- html5shiv.js让吃屎的IE6、IE7、IE8支持html5去吧
插件介绍 用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题.所以我们在使用过程中,想要让低版本的浏览器,即IE9以下的浏览器支持,那么这款html5shiv.js是一 ...
- 富通天下(T 面试)
1.Mybatis的分页查询是怎么实现的? 交流: A:我们是通过PageHelper插件实现的 B:你说下原生SQL应该怎么写? A:某段查询SQL,实现分页需要使用limit关键字,改变下标和页码 ...
- 初识WEBGL
WEBGL (全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一 ...
- Cycloid Hydraulic Motor Use: Use Failure And Treatment
The cycloidal hydraulic motor is a small low-speed, high-torque hydraulic motor with a shaft-distrib ...
- OpenCV2:第二章 创建图像并显示
一.简介 相当于在PS中,新建一个画布 二.CvMat类/LPLImage和CvMat结构体 参考: OpenCV2:第一章 图像表示 三.create() Mat m(2,2,CV_8UC3); m ...
- docker部署xxl-job
资源 xxl-job:1.9.1 docker:17.05.0-ce maven:3.5.0-jdk-8 tomcat:8.5.23.0 mysql:5.6.40 一.创建数据库 克隆项目到服务器下 ...
- Spring框架针对dao层的jdbcTemplate操作crud之update修改数据库操作
使用jdbcTemplate 原理是把加载驱动Class.forName("com.mysql.jdbc.Driver"); 和连接数据库Connection conn=Drive ...
- Django:调用css、image、js
1.在项目的manage.py同级目录创建static.templates 2.编辑settings.py,在最后加入 STATIC_URL = '/static/' HERE = os.path.d ...
- 条款15:在资源管理类中提供对原始资源的访问(Provide access to raw resources in resource-managing classes)
NOTE: 1.APIs往往要求访问原始资源(raw resources),所以每一个RAII class应该提供一个“取得其所管理之资源”的办法. 2.对原始资源的访问可能经由显示转换或隐式转换.一 ...