CSS规范之BFC & IFC
元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”)。但是不同的元素显示的方式会有所不同,例如<div>和<span>就不同,而<strong>和<p>也不一样。在文档类型定义(DTD)中对不同的元素规定了不同的类型,这也是DTD对文档之所以重要的原因之一。
1. 替换和不可替换元素
从元素本身的特点来讲,可以分为替换和不可替换元素。
a) 替换元素
替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。
例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容;又例如根据<input>标签的type属性来决定是显示输入框,还是单选按钮等。
(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容,即是一个空元素,例如:
<img src=”cat.jpg”/>
<input type="submit" name="Submit" value="提交"/>
浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。
b) 不可替换元素
(X)HTML的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)。例如:
<p>段落的内容</p>
段落<p>是一个不可替换元素,文字“段落的内容”全被显示
2. 显示元素
除了可替换元素和不可替换元素的分类方式外,CSS2.1中元素还有另外的分类方式:块级元素(block-level)和行内元素(inline-level,也译作“内联”元素)。
a) 块级元素
在视觉上被格式化为块的元素,最明显的特征就是它默认在横向充满其父元素的内容区域,而且在其左右两边没有其他元素,即块级元素默认是独占一行的。
典型的块级元素有:<div>、<p>、<h1>到<h6>,等等。
通过CSS设定了浮动(float属性,可向左浮动或向右浮动)以及设定显示(display)属性为“block”或“list-item”的元素都是块级元素。
但是浮动元素比较特殊,由于浮动,其旁边可能会有其他元素的存在。而“list-item”(列表项<li>),会在其前面生成圆点符号,或者数字序号。
b) 行内元素
行内元素不形成新内容块,即在其左右可以有其他元素,例如<a>、<span>、<strong>等,都是典型的行内级元素。
display属性等于“inline”的元素都是行内元素。几乎所有的可替换元素都是行内元素,例如<img>、<input>等等。
不过元素的类型也不是固定的,通过设定CSS的display属性,可以使行内元素变为块级元素,也可以让块级元素变为行内元素。
术语普及
盒: 每个元素都会生成一个盒,用来容纳后代(生成的盒)。所以我们可以把一个页面看做是由一个个的盒子堆砌而成的,只是这些盒子也分种类.
块级元素: display 为 block/table/list-item 的元素。
块级盒: 块级元素生成的盒
内联级元素: display 为 inline/inline-block/inline-table 的元素
内联级盒: 内联级元素生成的盒。但是只有 inline 元素生成的盒才叫做内联盒,它区别于 inline-block 元素的内联级块盒。
行盒: 内联格式化上下文中,包含来自同一行的盒的矩形区域叫做行盒
匿名块盒
FC
FC(Formating Context,格式化上下文) 是一个布局的环境,它里面的盒子需要遵循FC这套体系的规则, CSS2.1 中定义了 BFC(Block Formating Context,块级格式化上下文) 和 IFC(Inline Formating Context,内联格式化上下文), BFC 讲的是块级盒子的布局规则, IFC 讲的是内联级盒子的布局规则。
BFC
1. 浮动,绝对定位元素,非块盒的块容器(例如,inline-blocks,table-cells和table-captions)和’overflow’不为’visible’的块盒会为它们的内容建立一个新的块格式化上下文。(触发BFC)
2. 在一个块格式化上下文中,从包含块的顶部开始,盒在竖直方向一个接一个地放置。两个兄弟盒之间的竖直距离由’margin’属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并。
3. 在计算生成了 BFC 的元素的高度时,其浮动子元素应该参与计算。(触发bfc 解决父容器高度坍陷的问题)
IFC
IFC中的行盒的宽度是包含块的宽度减去 float 元素(如果有的话)的宽度,行盒高度是最高的盒的top与最低的盒的bottom之间的距离。
内联盒的高度是由line-height决定的,而可替换元素,inline-block,inline-table 元素的高度则是由它们的 margin 盒高度决定的。
对‘display’,‘position’和‘float’之间关系的定义
1.同时设置’absolute’或者’fixed’、非 ‘none’ 的 float,float 会被覆盖为 ‘none’。
2.如果'display'设置为'none',用户端必须忽略掉'position'和'float'。在这种情况下,元素不产生框。
3.即如果'position'设置为'absolute'或'fixed'且‘float’的值不为‘none’,display的值就会被设置为‘block’,所以设置display: inline; float: left;等同于float:left,display:inline 的属性并未生效。因为用户端会忽略掉对’display‘的设置。float:left和display:inline-block当然是不等同的。
position:absolute和float会隐式的改变display类型,
不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让元素以display:inline-block的方式显示,可以设置长宽,默认宽度并不占满父元素,就算是显示的设置display:inline或display:block,仍然无效。
float在IE6下的双倍边距bug就是利用添加display:inline来解决的
注意一点的是,position:relative并不能够隐式的改变display的类型
CSS规范之BFC & IFC的更多相关文章
- CSS 中的 BFC,IFC,GFC和FFC
原文网址:http://www.cnblogs.com/dingyufenglian/p/4845477.html What‘s FC? 一定不是KFC,FC的全称是:Formatting Conte ...
- 浅析CSS里的 BFC 和 IFC
前端日刊 登录 浅析CSS里的 BFC 和 IFC 2018-01-29 阅读 1794 收藏 3 原链:segmentfault.com 分享到: 前端必备图书<Web安全开发指南 掌握白 ...
- 我对CSS中的BFC的理解
1.什么是BFC 其实在老师让我们写这篇叫BFC的时候,我跟本不知道有什么BFC的东西. 后来,我找了一些资料,知道了,BFC是Block Formatting Context (块级格式化上下 ...
- 关于CSS inline-block、BFC以及外边距合并的几个小问题
CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...
- Scoped CSS规范草案
原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/Scoped-CSS 写在前面 问:什么是Scoped CSS规范? Scoped CSS规范是We ...
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
Atitit.css 规范 bem 项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...
- 前端CSS规范整理_转载、、、
一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用U ...
- CSS布局基础——BFC
what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...
- 【转】css学习专题-BFC
css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...
随机推荐
- 安装centos7.1 32bit时,没有可用的网络设备的解决方法
安装的系统镜像文件:CentOS-7-i386-LiveGNOME-1511.iso 虚拟机版本: 问题: 原因: 原先我在这里选择的时候,以为自己安装的不是64位的,所以没有选择centos 64, ...
- Redis整合Spring结合使用缓存实例
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文介绍了如何在Spring中配置redis,并通过Spring中AOP的思想,将缓存的 ...
- JavaEE基础(十三)
1.常见对象(StringBuffer类的概述) A:StringBuffer类概述 通过JDK提供的API,查看StringBuffer类的说明 线程安全的可变字符序列 B:StringBuffer ...
- C++11的一些新特性
3.1.9崭新的Template特性 Variadic Template 可变参数模板 void print() { } template <typename T, typename… Type ...
- 查找素数(0~1000)的算法(Java代码)
1.一般方法,设置标兵,进行查找 class prime{ //检查是否是素数 public void isPrime(){ ; ;i<=;i++){ ; ;j<i;j++){ ){ co ...
- Android 读取Assets中资源
//读取文件 private static String getFromAssets(Context context, String fileName) { String result = " ...
- Paratroopers
Paratroopers Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7881 Accepted: 2373 Descript ...
- corefile的设置与使用
一.简介 corefile是Linux下程序崩溃时生成的文件,可以用来分析程序崩溃的原因,因为它内部包含了程序崩溃时的堆栈信息. 二.corefile的设置 默认情况下,程序崩溃是不会生成corefi ...
- Android 编程下图片的内存优化
1. 对图片本身进行操作 尽量不要使用 setImageBitmap.setImageResource. BitmapFactory.decodeResource 来设置一张大图,因为这些方法在完成 ...
- 2016年10月18日 星期二 --出埃及记 Exodus 19:2
2016年10月18日 星期二 --出埃及记 Exodus 19:2 After they set out from Rephidim, they entered the Desert of Sina ...