CSSvisualformatmodelCSS规定每个元素都有自己的boxmodel（相当规定这个元素如何显示）；那么视觉格式模型就是把这些盒子模型按照规则排列到页面上，也就是怎么布局；换句话说，盒子模型指定了如何在页面上放置盒子，盒子之间的交互等；CSS的视觉格式模型指定浏览器如何处理页面中的文档树1.关键词：包含块（ContainingBlock）、控制框（ControllingBox）、BFC（BlockFormattingContext）、IFC（InlineFormattingContext）、定位system,floating等2.CSS三种定位机制：普通流，浮动流，绝对定位3.包含一个元素的盒子的定位和大小会和某个矩形盒子相关，这个盒子叫做包含块.元素h将为其后代元素创建一个包含块。但是，这并不意味着元素的包含块就是它的父元素。元素的包含块与其祖先元素的样式有关：例如：根元素是最顶层元素，它没有父节点，它的包含块是初始包含块；static和relative的包含块由其最近的块级别、单元格或内联块祖先元素的内容框（内容）创建；fixed的包含块是当前可见的块窗口；absolute的包含块由其最近的position属性值不是static的祖先元素创建：如果其祖先元素是行内元素，则包含块取决于其祖先元素的direction属性；如果祖先元素不是内联元素，那么包含块的区域应该是祖先元素的填充边界。4、块级元素和块盒、行内元素和行盒相关的概念。块框块级元素会生成一个块框（BlockBox），它会占据一整行来包含子框和生成的内容；块盒也是一个块包含盒（ContainingBox），要么只包含块盒，要么只包含行内盒（不能混用）；如果块框内部有块级元素和内联元素，那么内联元素会被匿名块框包围匿名块框的生成：
div生成一个块框，其中包含另一个块框p和文本内容一些内联文本。这时候文本内容会被强制添加到一个匿名的块盒中，这个匿名块盒是由div生成的块盒包含；换句话说：如果一个块框包含另一个块框，我们强制它只包含块框，所以其他文本内容生成为匿名块框（不是匿名内联框）。内联框一个内联元素生成一个内联框；内联元素可以排成一行，允许其他元素在左边和右边。匿名内联框的生成：
somemoretexttext
div元素生成一个块框，里面有若干个内联框（比如em）和textsome和text。专门为这些文本生成匿名行内框；display属性的影响display的几个属性也会影响不同框的生成：block，元素生成块框；inline，元素生成一个或多个行内框；inline-block，元素生成行内级块盒，行内块盒内部会被格式化为块盒，元素本身也会被格式化为行内级盒（这就是为什么会生成一个BFC);none，不生成box，不再在格式化结构中，还有一个visibility:hidden会生成一个不可见的box总结：如果一个box里面有块级元素，那么这个box里面的内容会被格式化为一个blockbox因为只要出现块级元素，里面的内容就会被分成几个块，每个块占一行（in-line的出现可以用匿名块box解决）；如果一个盒子里没有块级元素，那么这个盒子的内容就会被格式化为一个行内盒子，因为里面的内容是按行排列的。FC(FormattingContext)FC就是格式化上下文，定义了盒子内部的元素渲染规则，比较抽象。例如：FC就像一个大盒子，里面有很多元素；盒子可以将里面的元素和外面的元素分开（所以外部不会影响FC内部的渲染）；内部规则可以是：如何定位、计算宽高、边距折叠等。不同类型的框架参与不同的FC类型，比如块级框架对应BFCs，内联框架对应IFC注：它并不是说所有的box都会产生FC，而是只有在满足一定条件的情况下才会产生。只有对应的FC生成后，才会应用对应的FC渲染规则。BFC渲染规则在块格式化上下文中，每个元素的左外边缘从包含块的左侧释放（对于从右到左的格式化，右外边缘触及右侧），即使有浮动（所以浮动元素通常会直接附加到其包含块的左侧，与普通元素重合），除非该元素还创建了一个新的BFC；BFC特点：内部盒子一个接一个竖放；box的垂直方向由margin决定，属于同一个BFC的两个box之间的margin会重叠；BFC区域不会与浮动框重叠（可用于排版）BFC在页面上是一个隔离的独立容器，容器内的子元素不会影响外面的元素，反之亦然；在计算BFC的高度时，浮动元素也参与计算（无浮动崩溃如overflow:hiddenclearsfloating就是这个原理）；如何触发BFC根元素；float属性不是无；位置是绝对的或固定的；displayisinline-block,flex,inline-flex,table,table-cell,table-captionoverflowisnotvisibledisplay:table,本身不会生成BFC，但是会生成匿名frame（包含display:table-cell的frame),这个匿名帧会生成BFC。IFC规则在内联格式化上下文中，框从包含块的顶部开始水平排列。盒子之间的水平边距、边框和填充被保留，盒子可以以不同的方式垂直对齐；根据其中文本的基线，它们的顶部或底部，或线框：包围这些框的矩形形成一行的区域称为线框。行框的宽度由其包含块和其中的浮动元素决定，其高度的确定由行高计算规则决定；lineboxes的规则：如果几个inlineboxes在水平方向不能装进一个linebox，可以将它们分布在两个或多个垂直堆叠的lineboxes中（即分割inlineboxes）。lineboxes堆叠，不垂直分割，永不重叠；一个线框的高度总是足够大以容纳所有包含的框，但是，它可能比它包含的最高框高（例如，框对齐会导致基线对齐）。行框的左侧接触其包含块的左侧，右侧接触其包含块的右侧。总结：1.内联元素总是应用IFC渲染规则；2、行内元素会使用IFC规则渲染，例如可以使用text-align居中等；3.对于块框内的文本等匿名元素，会生成匿名元素4.在行内框内，对于那些内联元素，同样应用IFC渲染规则；5.另外，inline-block会在元素的外层生成IFC（所以这个元素可以通过text-align水平居中），当然它的内部是按照BFC规则渲染的
