今日感悟无论什么时候开始，重要的是开始之后不要停下来。前言对于一些前端工程师来说，有时候CSS是一件让他们很头疼的事情。明明定了某个样式，但是布局就是不行。如果你也有这种问题，那么是时候学习一下什么是css可视化格式化模型了。只有知己知彼，才能解决问题。CSS视觉格式模型是用于在视觉媒体上处理和显示文档的计算规则。模型是CSS的基本概念之一。可视化格式模型根据CSS框模型将文档中的元素转换为框。每个框的布局由以下因素决定：框的大小：精确指定，由约束指定，或未指定框类型：行内框（inline）、inline-level、atomicinline-level、块定位方案：文档树中其他元素的普通流定位、浮动定位或绝对定位元素：即当前框的子元素或兄弟元素。视口的大小和该位置包含的图像的大小。其他一些外部因素。该模型将根据框的包含块的边界来渲染框。通常，一个盒子会创建一个包含其后代元素的包含块，但盒子不受包含块的限制。当盒子的布局运行到包含块之外时，称为溢出（overflow）。Boxgeneration简介Boxgeneration是一种CSS视觉格式，是用于从文档元素生成框的ization模型的一部分。有不同类型的盒子，不同类型的盒子有不同的格式化方法。框的类型取决于CSS显示属性。块级元素和块框当元素的显示为块、列表项或表格时，该元素将成为块级元素。块级元素将被格式化为块（例如文章的一段），默认情况下垂直排列。每个块级框都参与块格式化上下文的创建，每个块级元素至少生成一个块级框，即主块级框。有些元素（例如列表项）会生成额外的框来放置项目符号，而那些生成列表项的元素可能会生成更多的框。然而，大多数元素只生成一个主要的块级框。主块级框包含后代元素生成的框和内容，它也参与定位方案。块级框也可以是块容器框。块容器框要么仅包含其他块级框，要么仅包含行内框并创建行内格式化上下文。需要注意的是，块级盒子不同于块容器盒子。前者描述了元素及其父元素和兄弟元素的行为，而后者描述了元素及其后代的行为。有些块级盒子不是块容器盒子，比如表格；还有一些块容器盒不是块级盒，比如不可替换的内联块和不可替换的表格单元格。块级盒同时也是块容器盒的称为块盒。匿名块框在某些情况下，视觉格式需要添加无法使用CSS选择器选择的辅助框，因此得名匿名框。CSS选择器不适用于匿名框，因此它们不能由样式表设置样式。也就是说，此时所有可继承的CSS属性值都是inherit，所有不可继承的CSS属性值都是initial。块包含框可能只包含行内级框或块级框，但通常文档会包含两者，在这种情况下，在相邻的行内级框外创建一个匿名块框。示例部分考虑以下HTML代码，假设和都保持默认样式（即它们的显示是块）：
此时会生成两个匿名块框：一个是元素前面的文本（Someinlinetext.），一个是元素后面的文本（后面是更多的内联文本。）。此时，将生成以下块结构：显示为：一些内联文本，然后是一段，然后是更多内联文本。对于这两个匿名框，程序员无法像
元素那样控制它们的样式，所以它们会从
中继承那些可继承的属性，比如颜色。其他不可继承的属性会被设置为initial，例如，因为没有为它们指定background-color，所以它们有一个默认的透明背景，元素的box可以用CSS指定背景颜色。同样，两个匿名框的文本颜色始终相同。另一种创建匿名块框的情况是行内框包含一个或多个块框。此时，包含blockbox的box被拆分为两个inlineboxes，一个在blockbox的前面，一个在blockbox的后面。块框之前的所有内联框都将被匿名块框包裹，块框之后的内联框也是如此。因此，块盒将是这两个匿名块盒的兄弟盒。如果有多个块框之间没有行内元素，则在这些框之前和之后创建两个匿名块框。行内级元素和行内框部分如果一个元素的显示属性是inline、inline-block或inline-table，则该元素称为行内级元素。显示时，它不会生成内容块，但可以与其他内联级内容分多行显示。一个典型的例子是包含多种格式内容（例如强调文本、图像等）的段落，这些内容可以由行内级元素组成。行内元素生成行内框，它也参与创建行内格式化上下文。行内框既是行内级框，也是其内容有助于创建其容器的行内格式化上下文的框，例如所有具有display:inline样式的非替换框。如果内联级框的内容不参与内联格式化上下文的创建，则称该内联级框是原子的。用inline-block或inline-table的显示值替换inline-level元素或元素创建的box不会像inlinebox一样拆分成多个box。注意：原子行内级盒最初被称为原子行内盒，这种说法不准确，因为它们不是行内盒。这后来在勘误表中得到修复。但是，当你看到一些文章中使用“atomicinlinebox”时，你可以理解为“atomicinlinebox”，因为这只是一个名称修改。原子内联级框不能在同一内联格式化上下文中跨多行拆分：
Thetextinthespancanbesplitinseverallinesasitisainlinebox.maydisplayas:Thetextinthespancanbesplitintoseverallinesasitis一个行内框行内框。并且：
span中的文本不能分成几行，因为它是一个内联块框。 可能显示为：跨度中的文本不能拆分为多行，因为它是一个内联块框。“不能分成几行，因为它”永远不会换行。匿名内联框类似于块框，CSS引擎有时会自动创建一些内联框。这些行内框不能被选择器选择，所以它们是匿名的。它们从父元素继承那些可继承的属性，其他属性保持初始默认值。一个常见的情况是CSS引擎会自动为直接包含在块框内的文本创建一个内联格式化上下文，在这种情况下，文本将被一个足够大的匿名内联框包围。但是如果只包含空格，则可能不会生成匿名行内框，因为white-space的设置可能会去掉空格，导致最终的实际内容为空。其他类型的框行框行框由内联格式化上下文创建，用于显示一行文本。在块盒内，线盒总是从块盒的一侧延伸到另一侧。当有浮动元素时，行框从左浮动元素的右边缘延伸到右浮动元素的左边缘。lineboxes的存在更多是出于技术目的，web开发者通常不需要关心它们。Run-inboxRun-inbox由display:run-in定义，它可以是blockbox也可以是inlinebox，取决于它后面的box的类型。插入框可用于在可能的情况下将标题嵌入文章的第一段。注意：插入框已从CSS2.1标准中删除，但可能会作为实验性功能再次添加到CSS3中。所以最好不要用于官方项目。其他模型引入的框除了内联和块格式化上下文之外，CSS还定义了几种也可以应用于元素的内容模型。这些模型通常用于描述布局，它们可能会定义一些额外的框类型：表格内容模型可能会创建一个表格包装框和一个表格框，以及多个其他框，例如表格标题框等。多列内容模型可能会在容器框和内容之间创建多个列框。实验性的网格内容模型或弹性框内容模型也会创建一些其他类型的框定位规则。生成框后，CSS引擎需要对它们进行定位以完成布局。.以下是定位盒子时使用的规则：普通流：依次定位每个盒子浮动：将盒子从普通流中取出，放在外盒子的一侧绝对定位：根据绝对位置定位的位置盒子是根据盒子的包含元素建立的绝对坐标系来计算的，所以绝对定位的元素可能会覆盖其他元素。普通流程介绍在普通流程中，盒子会按顺序放置。在块格式上下文中，框是垂直排列的；在行内格式化上下文中，框是水平排列的。当CSS的position属性为static或relative，float为none时，其布局方式为normalflow。浮动介绍在浮动定位中，浮动框会浮动到当前行的行首或行尾。这会导致正常流中的文本和其他内容“流动”到浮动框的边缘，除非该元素通过clear清除之前的浮动。当一个盒子的浮动值不是无，并且它的位置是静态的或相对的，盒子是浮动的。如果float设置为left，则浮动框会定位在当前行框的开头（左），如果设置为right，则浮动框会定位在当前行框的结尾（右）.无论是向左浮动还是向右浮动，linebox都会拉伸以适应浮动框的大小。绝对定位简介在绝对定位中，盒子从当前流中完全移除，不再与它有任何联系。元素具有父子或兄弟关系），其位置将使用顶部、底部、左侧和右侧计算相对于其包含块的位置。如果元素的位置是绝对的或固定的，则该元素是绝对定位的。对于固定位置的元素，它的包含块是整个视口，元素相对于视口是绝对定位的，所以滚动时元素的位置不会改变。参考资料MDN文档：https://developer.mozilla.org...喜欢的你可以打开微信，扫一扫关注早都君，每天早上为你推送前端知识，打发拥挤地铁公交的时光
