CSS中的IFC和BFC入门
CSS中的IFC和BFC入门
提到CSS,首先会想到的就是盒模型,如果对于盒模型不是很理解的,看这里。这是一个基础的系列,看了盒模型还可以看看box-sizing,好了不多说了,下面介绍今天的重点。
首先从概念入门,B是Block,I是inline,F [Formatting] C [context]。一句话概括就是格式化上下文一个是块级,一个是行级。
BFC有如下规则:
- 内部的盒子会在垂直方向,一个个的放置;
- BFC是页面上的一个隔离的容器
- 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠
- 计算BFC的高度时,浮动元素也参与计算
- BFC的区域不会与float重叠;
触发BFC的条件:
body 根元素;
浮动元素:float 不为none的属性值;
绝对定位元素:position (absolute、fixed)
display为: inline-block、table-cells、flex
overflow 除了visible以外的值 (hidden、auto、scroll)
这里提出一点,规则是作用于BFC内部的元素,而条件则是作用于BFC容器的,这点要理解。
这些只是概念,要想理解,还得结合一些例子来看。
布局规则一二条是概念,就不介绍了。第三条:
- .p {
- width:200px;
- height:50px;
- margin:50px 0;
- background-color:red;
- }
- <body>
- <div class="p"></div>
- <div class="p"></div>
- </body>
效果如图所示:
由图可知,由于全都存在于body根元素的BFC下,发生了重叠,如果想避免重叠,可以用另一个BFC将第二个div包裹起来,可以自己试验一下。这里提一句,如果你直接将第二个div变成BFC(比如添加overflow:hidden),结果还是一样的,因为他们两个还是处于同一个BFC下。
第四条:浮动元素参与计算BFC高度
- <div style="border: 3px solid #000;">
- <div style="width: 50px; height: 50px; background: green;
- float: left;">
- </div>
- </div>
效果如上,由于只是一个普通的div,里面包含的浮动元素并没有为div撑起高度。尝试一下将div变成BFC看会发生什么。
第五条:BFC区域不会与float发生重叠。
我们知道float是脱离文档流的,如果对其中一个div使用了float,两个并列的div会发生重叠,这时可以把非float的div变成BFC,这样就会避免重叠。
以上就是BFC的内容,要做到理解并运用到实际开发中。
下面说一下IFC,在这之前先看一个例子,这个是我在开发中遇到的问题,
- .box{
- width:150px;
- height:150px;
- display:inline-block;
- word-wrap:break-word;
- background:green
- }
- <code class="language-css"><div class='box'>asdfasdfasdfffffffffffffffffffffffffffffffffffffffffffffffff</div>
- <div class='box'>asdfasdfasdf</div></code>
- <div class='box'>asdfasdfasdfffffffffffffffffffffffffffffffffffffffffffffffff</div>
- <div class='box'>asdfasdfasdf</div>
效果如下:
可以看到第二个inline-block发生了下陷,这里的知识就涉及到了IFC。这里也不卖关子,给第二个添加vertical-align:top;属性就可以解决问题。
首先说一下行级盒子的宽度和高度,可以很容易的发现,对<span>这个inline-level box设置宽度和高度并没有什么作用(对于行内元素,设置margin,padding的top 和 bottom也是不起作用的),他有自己的宽高计算方法,高由font-size决定的,宽等于其子行级盒子的外宽度(margin+border+padding+content width)之和。
再说一下Inlinebox,总的来说,inlinebox就是布局中的一行,里面可以只包含一个<span>行内元素,也可以包含多个<span>或者inline-block.
inlinebox也有自己的宽高度计算的方法,宽度取决于内部元素的宽度,最大为父元素的宽度,linebox的高度取决于linebox元素,一般由最高的元素决定linebox的高度。
这里我不对于BFC 做过多解释,如果想了解更深的,可以参照这篇文章,不过我倒是觉得如果不是太偏执,不需要这样,毕竟<span>嵌套<span>也许永远也不会用到这种操作。
要解决上面的问题,更多的应该关注行内元素的对齐方式,默认是baseline对其,来一张图;
由此可见,之前的对其方式为baseline对齐顾导致下陷。
下面总结几条inline元素的baseline位置:
- inline元素的baseline,为内容盒content-box里面文本框的基线。
- inline-block的外边缘就是margin-box的外边缘,
- 如果inline-block内部有内容,则baseline为内容最下方的baseline,参照刚才给出的例子。
- 如果Inline-block内部无内容,则baseline与margin-box的下边缘重合。
- 如果overflow属性不为visible(默认),则baseline与margin-box的下边缘重合。
这里给出一个例子做讲解,剩下的可以自己去尝试。
- .box{
- width:150px;
- height:150px;
- display:inline-block;
- word-wrap:break-word;
- background:green
- }
- .box1{
- width:150px;
- height:150px;
- overflow:hidden;
- display:inline-block;
- word-wrap:break-word;
- background:green
- }
- <div class='box1'>asdfasdfasdfffffffffffffffffffffffffffffffffffffffffffffffff</div>
- <div class='box'>asdfasdfasdf</div>
执行结果如下,可见baseline与第一个inline-block的margin-box重合了。
IFC和BFC就介绍到这里,如果有问题欢迎提出指正。
CSS中的IFC和BFC入门的更多相关文章
- 总结下对我对于CSS中BFC的认知
首先第一个,什么是BFC? BFC的全称叫Block Formatting Context (块级格式化上下文)BFC是css中隐含属性,开启BFC后元素会变成一个独立的布局环. 简单来说,它 ...
- 浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
- CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins
前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...
- CSS中重要的BFC
CSS中有个重要的概念BFC,搞懂BFC可以让我们理解CSS中某些原本看似诡异的地方. 简介 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流.普通流三种.而普通流其实就是指B ...
- webpack快速入门——CSS中的图片处理
1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic"></div& ...
- 是的,是你的BFC - CSS中常用
是的,是你的BFC - CSS中常用 是的,是你的BFC - CSS中常用 CFC 全称:(Block Formatting Contexts)含义是块级格式化上下文),就是一个块级元素的渲染 ...
- 重新认识Box Model、IFC、BFC和Collapsing margins
尊重原创,转载自: http://www.cnblogs.com/fsjohnhuang/p/5259121.html 肥子John^_^ 前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了I ...
- 盒子模型、IFC、BFC和Collapsing margins
前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日学习 ...
- CSS中各种布局的背后(*FC)
CSS中各种布局的背后,实质上是各种*FC的组合.CSS2.1中只有BFC和IFC,CSS3 中还增加了FFC和GFC. 盒模型(BoxModel) 上图为W3C标准盒模型,另外还有一种IE盒模型(I ...
随机推荐
- QTP连接数据库
'注意:其中DSN=数据源名:UID=用户名:PWD=用户密码 Dim Conn Set Conn=CreateObject("ADODB.Connection") Const C ...
- AxInterop.ShockwaveFlashObjects.dll 问题
在实际项目中引用此dll加载项目启动动画(swf),但在64位上此dll并不支持,解决办法有待商讨,个人在项目中,把加载动画的部分给注释掉了,不给项目中签入,他们用的都是32位系统,我的是64位的.请 ...
- vs快捷键复制当前行
vs快捷键 1)如果你想复制一整行代码,只需将光标移至该行,再使用组合键“Ctrl+C”来完成复制操作,而无需选择整行.2)如果你想剪切一整行代码,只需将光标移至该行,再使用组合键“Ctrl+X”来完 ...
- Matlab常用函数(1)
1.max() C = max(A) A为向量,返回最大值.若为矩阵,以类向量为基准,返回每列的最大值的行向量.若为多维矩阵.切片返回每一个2维矩阵的行向 量. C = max(A,B) ...
- zabbix的配置
一.网络自动发现: 1.zabbix的网络自动发现是一个非常强大的功能,该功能可以完成以下工作. a.快速发现并添加主机. b.简单的管理. c.随着环境的改变而快速搭建监控系统. 2.网络发现基于以 ...
- Entity Framework Code-First(10.2):Entity Mappings
Entity Mappings using Fluent API: Here, we will learn how to configure an entity using Fluent API. W ...
- 5. Python大法之告别脚本小子--各类URL采集器编写
在i春秋上面,有很多不错的脚本: https://bbs.ichunqiu.com/forum.php?mod=collection&action=view&ctid=137 http ...
- Netbeans使用UTF-8编码
如果要NetBeans用UTF-8对文件进行解码,需要修改配置文件,具体方法如下: 1. 找到你的Netbeans安装目录下的etc文件夹,如C:\Program Files\NetBeans 6.9 ...
- 微信小程序iPhone X空白兼容
开局一张图…… 看看这空白的地方多丑 ~ 接下来就是见证奇迹的时刻(上代码) //app.js App({ onLaunch: function (ops) { if (ops.scene == 10 ...
- Go:定时执行任务time.sleep和time.tick的优劣
golang 写循环执行的定时任务,常见的有以下三种实现方式:1.time.Sleep方法: for { time.Sleep(time.Second) fmt.Println("我在定时执 ...