包含块

  什么是包含块?简单来说,就是决定一个元素大小和定位的元素。一个元素会为它的内部元素创建包含块,但也不能说元素的包含块就是它的父元素:

1、position:fixed 的元素

  包含块是当前可视窗口

2、position:absolute 的元素

  包含块是最近的 position属性为非static的祖先元素

3、静态定位和相对定位 的元素

  包含块是最近的块级祖先元素

层叠上下文

  跟BFC相似,是可以创建出来的(z-index: Number)

  同一个层叠上下文中,层叠级别由低到高:边框和背景、负z-index、块盒子、浮动盒子、行内盒子、z-index:0、正z-index

  一个元素在Z轴上的堆叠顺序,由『层叠上下文』和『层叠顺序』决定:

    1、同一个层叠上下文,层叠级别大的元素在上

    2、同一个层叠上下文,层叠级别相同,后来居上

    3、不同的层叠上下文,由父级元素层叠上下文决定

BFC(块级格式上下文)

  创建BFC

  1、float: left、right

  2、positon: absolute、fixed

  3、display: inline-block、table-caption、table-cell   (注:display为float、table、list-item等类型的会参与BFC,不会创建 )

  4、overflow: auto、hidden、scroll

BFC的特点

  1、在一个BFC内部,盒子会在垂直方向上排列

  2、在一个BFC内部,相邻的margin-bottom和margin-top叠加

  3、在一个BFC内部,每个元素左边紧贴着包含盒子的左边

  4、在一个BFC内部,如果有一个内部元素是一个新的BFC,则新BFC区域不会与float元素的区域重叠

  5、计算一个BFC高度时,内部浮动元素的高度也会参与计算

BFC用途

  1、避免垂直外边距叠加     不让他们在同一个BFC里

  2、清除浮动   如果一个元素是BFC,计算高度时,内部浮动子元素的高度也得算进去。这就是为什么我们经常用overflow清除浮动的原因

  3、避免文字环绕  创建BFC后,新BFC就不会与float元素区域重叠了

  4、自适应两列布局  同上

包含块、层叠上下文、BFC的更多相关文章

  1. CSS——关于z-index及层叠上下文(stacking context)

    以下内容根据CSS规范翻译. z-index 'z-index'Value: auto | <integer> | inheritInitial: autoApplies to: posi ...

  2. css中margin重叠和一些相关概念(包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes )

    平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...

  3. 由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)

    写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...

  4. 坑爹的BFC;块格式上下文

    Formatting context(FC) Formatting context 是 W3C CSS2.1 规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位 ...

  5. 块格式化上下文(Block Formatting Context,BFC)

    块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. 下列方式会创建块格 ...

  6. 前端面试题-BFC(块格式化上下文)

    一.BFC 的概念 1.规范解释 块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元 ...

  7. 层叠上下文 Stacking Context

    层叠上下文 Stacking Context 在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的x轴,y轴以及表示层叠的z轴.对于每个html元素,都可以通过设置z-index属性来设 ...

  8. 学习块格式化上下文(BlockFormattingContext)

    什么是BFC BFC全称是Block Formatting Context,即块格式化上下文.它是CSS2.1规范定义的,关于CSS渲染定位的一个概念.要明白BFC到底是什么,首先来看看什么是视觉格式 ...

  9. CSS基础:层叠顺序和层叠上下文

    简介 在考虑到两个元素可能重叠的情况下,层叠顺序决定了那个元素在前面,那个元素在后面,这是针对普通元素而言.而层叠上下文和块级格式化上下文 (BFC) 一样,基本上也是由一些 CSS 属性创建的,它单 ...

随机推荐

  1. VS Extension: Create a txt file and set the content

    使用 Visual Studio Extension 创建一个文本文件,并填入内容. 需要引用 EnvDTE C:\Program Files (x86)\Microsoft Visual Studi ...

  2. mysql 自定义排序顺序

    mysql 自定义排序顺序 实例如:在sql语句中加入ORDER BY FIELD(status,3,4,0,2,1)语句可定义排序顺序 SELECT tsdvoucher0_.VOUCHER_ID ...

  3. ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditor(转)

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-24/191.html --------------- ...

  4. res\menu\main.xml:6: error: No resource identifier found for attribute 'showAsAction' in package 'com.xxx.xxxx'

    res\menu\main.xml:6: error: No resource identifier found for attribute 'showAsAction' in package 'co ...

  5. PYTHON多进程并发WEB服务器(利用LINUX的FORK)

    这个又牛X 一点点.. 这还不涉及IO,如果调用GEVENT之类作异步IO或非阻塞IO,那就大框架都有啦.. ############################################# ...

  6. asp.net 框架接触(2)

    1. 学习一个框架就要尽量按照它的各种规则(命名规则等)来命名,写代码 比如 下列Entity层内的代码"StudentInfo"编写应与数据库内的表名严格对应 不然就会报错 [T ...

  7. 总结一下SQL语句中引号(')、quotedstr()、('')、format()在SQL语句中的用法

    总结一下SQL语句中引号(').quotedstr().('').format()在SQL语句中的用法 日期:2005年6月1日 作者:seasky212 总结一下SQL语句中引号(').quoted ...

  8. Context 之我见

    Context这个单词在程序开发中屡见不鲜,我记得以前在博客中写过一些关于这个词语的自我解释,但是我这个人有一个毛病就是健忘,如果不将自己的想法写下,不出十分钟,就被我抛到九霄云外. 真我现在还有点想 ...

  9. 【POJ】1054 The Troublesome Frog

    题目是非常经典的搜索+剪枝.题意简言之就是,青蛙需要沿着直线踩着踏点通过田地,并且踏点需要至少为3.问哪条路径青蛙踩坏的作物最多.很好的一个条件是青蛙每次移动都是等间距的.题目需要注意将其排序. #i ...

  10. ☀【动画】过渡 transition

    CSS3 动画系列3-transition(过渡) √http://www.css88.com/archives/5403 如果丘处机没有路过牛家村,中国将是最发达国家 <!DOCTYPE ht ...