containing block和BFC
来源:互联网 发布:olay新生塑颜系列知乎 编辑:程序博客网 时间:2024/05/24 06:19
1、Box
Box 是 CSS 布局的对象和基本单位,元素的类型和 display 属性,决定了这个 Box 的类型。比较常见的有:
- block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context;
- inline-level box:display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且参与 inline formatting context;
块级盒的是参与块级上下文排版的一种盒子,每个块级元素都会生成这种盒子,并且参与任何有关定位的计算。盒模型结构如下:
他们分别定义了content box、padding box、border box、margin box。
2、containing block
定义:元素盒子的位置和尺寸往往是相对于一个确定的矩形计算的,我们称这个矩形为元素的包含块。
如果这个元素的position值是relative或static,这个元素的包含块是由离其最近的块级的祖先盒子的内容的边content-edge构成的。就是离其最近的块级祖先盒子的content-box。
如果position:fixed,它的CB就是ICB(initial containing block,根元素所在的containing block)。
如果position:absolute,如果不存在除static定位的父元素,则CB为ICB。否则的话:
- 若block container不是inline box,则其CB与这个父block container(block box/inline box/table cell)的padding box重叠。
- 若block container是inline box,如果 'direction' 是 'ltr',包含块的顶、左边是祖先元素生成的第一个框的顶、左内边距边界(padding edges) ,右、下边是祖先元素生成的最后一个框的右、下内边距边界(padding edges)。如果 'direction' 是 'rtl',包含块的顶、右边是祖先元素生成的第一个框的顶、右内边距边界 (padding edges) ,左、下边是祖先元素生成的最后一个框的左、下内边距边界 (padding edges)。
3、BFC
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
BFC有一些规则:
- 内部的Box会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时,浮动元素也参与计算。
触发BFC
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
BFC应用:
- 两列布局。
- 清除内部浮动,撑开父高度。
- 防止两个margin重叠。
阅读全文
0 0
- containing block和BFC
- Containing Block
- containing block's height
- CSS中的containing block
- position&containing block
- BFC (BLOCK FORMARTTING CONTEXT)
- 谈谈几大Box Model以及Element Width、Element Background Width和Containing Block Width
- CSS包含块(the containing block)和与之相关的百分比属性
- BFC(Block Formatting Context)
- 包含块(containing block)学习
- CSS核心:包含块(Containing Block)
- 如何判断盒子的containing block
- 什么是CSS包含块(Containing Block)
- CSS包含块(Containing Block)
- Definition of "containing block" 细说包含块
- 浅谈CSS包含块Containing Block
- css笔记:包含块(Containing Block)
- 关于Block Formatting Context--BFC和IE的hasLayout
- 19.隐式Intent
- 灰度变换:imadjust and stretchlim
- 24_方法_方法的本质_形参_实参_return语句
- c#多线程对于字典型的处理
- Flask-SQLAlchemy 学习总结
- containing block和BFC
- 使用Android自带的TTS实现语音播报(电话号码)功能
- Openlayers之加载MapQuest地图
- IE7和IE9中有关于javaScript的兼容问题
- oracle 索引比表大的情况测试
- js函数中参数的传递
- andfix增量升级更新 热补丁修复
- 单机存储系统
- ant使用教程--基础篇