摘要：控制框块级元素和块框以及行内元素和行框相关的概念。规则在行内格式化上下文中，框一个接一个地水平排列，起点是包含块的顶部。
CSS的可视化格式模型
CSS中规定每一个元素都有自己的盒子模型（相当一规定了这个元素如何显示）；
然后可视化格式模型则是把这些盒子模型按照规则摆放到页面上，也就是如何布局；
换句话说，盒子模型规定了怎么在页面上摆放盒子，盒子的相互作用等等；
CSS的可视化格式模型就是规定了浏览器在页面中如何处理文档树
1、关键字：包含块（Containing Block）、
控制框（Controlling Box）、
BFC(Block Formatting Context)、
IFC(Inline Formatting Context)、
定位体系、
浮动等
2、CSS三种定位机制：普通流、浮动流、绝对定位 3、包含块一个元素的box的定位和尺寸，会与某一矩形框有关，这个框就称之为包含块。
元素h会为它的子孙元素创建包含块，但是，并不是说元素的包含块就是它的父元素，元素的包含块与它的祖先元素的样式有关：
譬如：
根元素是最顶端的元素，他没有父节点，它的包含块就是初始化包含块；
static和relative的包含块由他最近的块级、单元格或者行内块祖先元素的内容框（content）创建；
fixed的包含块就是当前可视窗口；
absolute的包含块由他最近的position属性值不为static的祖先元素创建：
如果其祖先元素是行内元素，则包含块取决于其祖先元素的direction特性；
如果祖先元素不是行内元素，那么包含块的区域应该是祖先元素的内边距边界。
4、控制框(Controlling Box)块级元素和块框以及行内元素和行框相关的概念。
块框
块级元素会生成一个块框（Block Box），块框会占据一整行，用来包含子box和生成的内容；
块框同时也是一个块包含框（Containing Box），里面要么只包含块框，要么只包含行内框（不能混杂）；
如果块框内部有块级元素也有行内元素，那么行内元素会被匿名块框包围
匿名块框的生成：
some inline textmore text
div生成了一个块框，包含了另一个块框p以及文本内容some inline text，此时文本内容会被强制加到一个匿名的块框里面，被div生成的块框包含；
换句话说：如果一个块框在其中包含另一个块框，那么我们强迫它只能包含块框，因此其他文本内容生成出来的都是匿名块框（而不是匿名行内框）。
行内框
一个行内元素生成一个行内框；
行内元素能排在一行，允许左右有其他元素。
匿名行内框的生成：
some more text text
div元素生成一个块框，其中有几个行内框（如em）以及文本some和text，此时会专门为这些文本生成匿名行内框；
display属性的影响
display的几个属性也可以影响不同框的生成：
block，元素生成一个块框；
inline，元素产生一个或多个的行内框；
inline-block，元素产生一个行内级块框，行内块框的内部会被当做块框来格式化，而此元素本身会被当作行内级框来格式化（这也是为什么会产生BFC）；
none，不生成框，不再格式化结构中，而另一个visibility：hidden则会产生一个不可见的框
总结：
如果一个框里，有一个块级元素，那么这个框里的内容都会被当作块框来进行格式化，因为只要出现了块级元素，就会将里面的内容分成几块，每一块独占一行（出现行内可以用匿名块框解决）；
如果一个框里，没有任何块级元素，那么这个框里的内容会被当成行内框来格式化，因为里面的内容时按照顺序成行的排列。
FC（Formatting Context）
FC即格式化上下文，它定义框内部的元素渲染规则，比较抽象，譬如：
FC就像是一个大箱子，里面装有很多元素；
箱子可以隔开里面的元素和外面的元素（所以外部并不会影响FC内部的渲染）；
内部的规则可以是：如何定位、宽高计算、margin折叠等等
不同类型的框参与的FC类型不同，譬如块级框对应BFC，行内框对应IFC
注意：并不是说所有的框都会产生FC，而是符合特定的条件才会产生，只有产生了对应的FC后才会应用对应的FC渲染规则
BFC渲染规则
在块格式化上下文中，每一个元素左外边与包含块的左边解除（对于从右到左的格式化，右外边接触右边），即使存在浮动也是如此（所以浮动元素正常会直接贴近它的包含块的左边，与普通元素重合），除非这个元素也创建了一个新的BFC；
BFC特点：
内部box在垂直方向，一个接一个的放置；
box的垂直方向由margin决定，属于同一个BFC的两个box间的margin会重叠；
BFC区域不会与float box重叠（可用于排版）
BFC就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面的元素，反之也是如此；
计算BFC的高度时，浮动元素也参与计算（不会浮动塌陷如overflow：hidden清除浮动就是这个原理）；
如何触发BFC
根元素；
float属性不为none；
position为absolute或fixed；
display为inline-block、flex、inline-flex、table、table-cell、table-caption
overflow不为visible
display：table，本身不会产生BFC，但是他会产生匿名框（包含display：table-cell的框），而这个匿名框产生BFC。
IFC规则
在行内格式化上下文中，框一个接一个地水平排列，起点是包含块的顶部。水平方向上的margin，border和padding在框之间得到保留，框在垂直方向上可以以不同的方式对齐；
它们的顶部或底部对齐，或根据其中文字的基线对齐
行框：
包含那些框的长方形区域，会形成一行，叫做行框。行框的宽度有它的包含块和其中的浮动元素决定，高度的确定由行高度计算规则决定；
行框的规则：
如果几个行内框在水平方向上无法放入一个行框内，它们可以分配在两个或多个垂直堆叠的行框中（即行内框的分割）
行框在堆叠是没有垂直方向上的分割且永远不重叠；
行框的高度总是足够容纳所包含的所有框，不过他可能高于他包含的最高的框（例如，框对齐会引起基线对齐）
行框的左边接触到其包含块的左边，右边接触到其包含块的右边。
总结：
1. 行内元素总是会应用IFC渲染规则； 2. 行内元素会应用IFC规则渲染，譬如text-align可以用来居中等； 3. 块框内部对于文本这类的匿名元素，会产生匿名行框包围，而行框内部就应用IFC渲染规则 4. 行内框内部，对于那些行内元素，一样应用IFC渲染规则； 5. 另外，inline-block，会在元素外层产生IFC（所以这个元素可以通过text-align水平居中），当然，它的内部则按照BFC规则渲染
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113298.html
摘要：控制框块级元素和块框以及行内元素和行框相关的概念。规则在行内格式化上下文中，框一个接一个地水平排列，起点是包含块的顶部。 CSS的可视化格式模型 CSS中规定每一个元素都有自己的盒子模型（相当一规定了这个元素如何显示）； 然后可视化格式模型则是把这些盒子模型按照规则摆放到页面上，也就是如何布局； 换句话说，盒子模型规定了怎么在页面上摆放盒子，盒子的相互作用等等； CSS的可视化格式模...
摘要：控制框块级元素和块框以及行内元素和行框相关的概念。规则在行内格式化上下文中，框一个接一个地水平排列，起点是包含块的顶部。 CSS的可视化格式模型 CSS中规定每一个元素都有自己的盒子模型（相当一规定了这个元素如何显示）； 然后可视化格式模型则是把这些盒子模型按照规则摆放到页面上，也就是如何布局； 换句话说，盒子模型规定了怎么在页面上摆放盒子，盒子的相互作用等等； CSS的可视化格式模...
摘要：盒模型与本文为收集整理总结网上资源旨在系统复习盒模型与节省复习时间阅读分钟什么是盒模型每一个文档中，每个元素都被表示为一个矩形的盒子它都会具有内容区盒模型主要分两种标准盒模型盒模型怪异盒模型两者的区别标准盒模型的宽高则为内容区域的宽高盒模型 css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中，每...
摘要：盒模型与本文为收集整理总结网上资源旨在系统复习盒模型与节省复习时间阅读分钟什么是盒模型每一个文档中，每个元素都被表示为一个矩形的盒子它都会具有内容区盒模型主要分两种标准盒模型盒模型怪异盒模型两者的区别标准盒模型的宽高则为内容区域的宽高盒模型 css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中，每...
阅读 1369·2023-04-25 16:45
阅读 1915·2021-11-17 09:33
阅读 2304·2021-09-27 14:04
阅读 912·2019-08-30 15:44
阅读 2631·2019-08-30 14:24
阅读 3411·2019-08-30 13:59
阅读 1688·2019-08-29 17:00
阅读 885·2019-08-29 15:33
