前端学习第三周BFC的学习

BFC之前学的时候没太懂,后来专门复习了下。

BFC(Block formatting context):可以直接翻译为"块级格式化上下文",它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

BFC的布局规则:1.内部的Box会在垂直方向,一个一个的放置;2.Box垂直方向的距离由margin决定。且同一个BFC的两个相邻Box的margin会发生重叠;3.每个元素的margin box的左边,与包含块boeder box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。4.BFC的区域不会与float box重叠;5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也是如此;6.计算BFC的高度时,浮动元素也参与计算。

生成BFC的元素:根元素、float属性不为none、position为absolute或fixed、display为inline-block,table-cll,table-caption,flex,inline-flex、overflow不为visible。

BFC的作用:1.自适应两栏布局;2.清楚内部浮动;3.防止垂直margin重叠。

BFC内部元素与外部元素不会相互影响,因此,当BFC外部存在浮动时,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动重叠。同样,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的道理。

时间: 04-23

前端学习第三周BFC的学习的相关文章

201671010140. 2016-2017-2 《Java程序设计》java学习第三周

java学习第三周       不知不觉,学习java已经是第三周了,不同于初见时的无措,慌张,在接触一段时日后,渐渐熟悉了一些,了解到了它的便利之处,也体会到了它的一些难点,本周主攻第四章,<对象与类>,事实上,在第二周的实验中,我就已经接触过它了,当时我并不理解Scanner方法使用时,为什么要使用import语句,现在,通过学习第四章,我知道了,通过控制台进行输入时,需要构造一个Scanner对象,并与"标准输入流"System.in关联,使用import语句引入ja

linux学习第三周总结

linux学习第三周总结 学习linux的第三周,也是惊喜最多的一周,让我看到学linux并不是很枯燥,相反非常有趣,可玩性很多,但越深入越觉得可学习的地方有很多,也有非常多的不足,所以革命尚未成功,同志更需努力 同样来简单终结一下本周的重点,内容比较多,说要简单提一下,不做详解 一.shell脚本编程基础 内容:1. 编程基础 2. 脚本基本格式3. 变量4.运算5.条件测试6.条件判断if 7.条件判断case 8.配置用户环境 shell脚本:包含一些命令或声明,并符合一定格式的文本文件

javaweb学习总结(三十二)——JDBC学习入门【转】

原文地址:javaweb学习总结(三十二)——JDBC学习入门 一.JDBC相关概念介绍 1.1.数据库驱动 这里的驱动的概念和平时听到的那种驱动的概念是一样的,比如平时购买的声卡,网卡直接插到计算机上面是不能用的,必须要安装相应的驱动程序之后 才能够使用声卡和网卡,同样道理,我们安装好数据库之后,我们的应用程序也是不能直接使用数据库的,必须要通过相应的数据库驱动程序,通过驱动程序去和数 据库打交道,如下所示: 1.2.JDBC介绍 SUN公司为了简化.统一对数据库的操作,定义了一套Java操作

学习H5三周感想

首先,我是一个不爱学习的孩子,不愿意动手,但是为了能够将来能够自食其力,我就选择了这个比较火的H5,希望自己将来有个能有个好的收入,可以娶她回家. 下面就说说我学习三周H5的感受吧.. 第一周:刚接触有新鲜感,感觉挺舒服的,但是越往后越让我感到害怕,看着那一行行的代码,我都在怀疑我是不是得了密集恐惧症.哈哈,可见我多想了,第一周学习简单的HTML语言,这个相对来说非常简单,就是所能做的图片不多,必须要和css以及js联合起来才能会出现各种各样缤纷色彩的网页.对第一个老师——许竞先的感受是:这个老

第三周----html基础学习

主要是记录自己从基础开始扎实学习html的过程,这周是第一周,下面是我实现的几个实例,主要还是比较基础的东西通过整理一遍的方式来巩固一下自己 首先就是超链接 <a href="熨斗林佳鹏.html" target="_blank">灿坤蒸汽电熨斗</a> 这样就可以通过点击这句话跳转到另外一个html,target属性则可以让这个被链接的东西在何处显示 然后是多层次显示,通过不同的标题实现 <!DOCTYPE html> <

第三周vim入门学习2

一.vim重复命令 1.重复执行上次命令 在普通模式下.(小数点)表示重复上一次的命令操作 拷贝测试文件到本地目录 $ cp /etc/protocols . 打开文件进行编辑 $ vim protocols 普通模式下输入x,删除第一个字符,输入.(小数点)会再次删除一个字符,除此之外也可以重复dd的删除操作 2.执行指定次数相同的命令 进入普通模式输入N<command>,N表示重复后面的次数,下面来练习以下: 打开文件文件进行编辑 $ vim protocols 下面你可以依次进行如下操

第三周vim入门学习1

一.vim模式介绍 1.概念:以下介绍内容来自维基百科Vim 从vi演生出来的Vim具有多种模式,这种独特的设计容易使初学者产生混淆.几乎所有的编辑器都会有插入和执行命令两种模式,并且大多数的编辑器使用了与Vim截然不同的方式:命令目录(鼠标或者键盘驱动),组合键(通常通过control键(CTRL)和alt键(ALT)组成)或者鼠标输入.Vim和vi一样,仅仅通过键盘来在这些模式之中切换.这就使得Vim可以不用进行菜单或者鼠标操作,并且最小化组合键的操作.对文字录入员或者程序员可以大大增强速度

学习第三周

学生管理系统 ---------------------------------------------------------------------------------------------------------------------------- public class StudentManager { /**学生数组*/ public static Student[] stuArray = new Student[20]; /**学生人数*/ public static in

博览网C++学习第三周

本周学习真正的面向对象程序开发, 主要就是编写几个有关系(is-a)的类,然后编程的时候针对基类的指针和引用编程. 其实,C++在这里(指面向对象编程)有一些惯用法: 1. 基类析构函数必为虚函数 2. 基类应该要有虚函数(除了虚析函数外的虚函数),否则设计是有问题的. 3. C++中有一个派别认为虚函数(除了虚析函数外的虚函数 ) 都应该是private的, 这种思想本质上是将原本public的虚函数都"包裹"了一层非虚函数,非虚函数 调用私有虚函数也就是模板方法设计模式.我觉得明白