不管你在什么时刻最先，主要的是最先今后不要住手。
媒介
关于部份前端工程师来讲，有时刻CSS令他们很头疼，明显设置了某个款式，然则规划就是不起作用。
假如你也有这类题目，那末是时刻进修下什么是css视觉花样化模子了。知己知彼方能解决题目。
CSS 视觉花样化模子（visual formatting model）是用来处置惩罚和在视觉媒体上显现文档时运用的盘算划定规矩。该模子是 CSS 的基本观点之一。
视觉花样化模子会依据CSS盒子模子将文档中的元素转换为一个个盒子，每一个盒子的规划由以下要素决议：
盒子的尺寸：正确指定、由约束条件指定或没有指定
盒子的范例：行内盒子（inline）、行内级盒子（inline-level）、原子行内级盒子（atomic
inline-level）、块盒子（block）定位计划（positioning scheme）：普通流定位、浮动定位或相对定位
文档树中的别的元素：即当前盒子的子元素或兄弟元素
视口尺寸与位置
所包括的图片的尺寸
其他的某些外部要素
该模子会依据盒子的包括块（containing block）的边境来衬着盒子。平常，盒子会竖立一个包括其子女元素的包括块，然则盒子并不由包括块所限定，当盒子的规划跑到包括块的表面时称为溢出（overflow）
盒子生成引见
盒子的生成是 CSS 视觉花样化模子的一部份，用于从文档元素生成盒子。盒子有差别的范例，差别范例的盒子的花样化要领也有所差别。盒子的范例取决于 CSS 的display属性。
块级元素与块盒子
当元素的 display为 block、list-item或 table时，该元素将成为块级元素。一个块级元素会被花样化成一个块（比方文章的一个段落），默许根据垂直方向顺次分列。
每一个块级盒子都邑介入块花样化高低文（block formatting context）的竖立，而每一个块级元素都邑最少生成一个块级盒子，即主块级盒子（principal block-level box）。有一些元素，比方列表项会生成分外的盒子来安排项目标记，而那些会生成列表项的元素可以会生成更多的盒子。不过，多半元素只生成一个主块级盒子。
主块级盒子包括由子女元素生成的盒子以及内容，同时它也会介入定位计划。
一个块级盒子可以也是一个块容器盒子。块容器盒子（block container box）要么只包括别的块级盒子，要么只包括行内盒子并同时竖立一个行内花样化高低文（inline formatting context）。
可以注重到块级盒子与块容器盒子是差别的这一点很主要。前者形貌了元素与其父元素和兄弟元素之间的行动，而后者形貌了元素跟其子女之间的行动。有些块级盒子并非块容器盒子，比方表格；而有些块容器盒子也不是块级盒子，比方非替代行内块和非替代表格单元格。
一个同时是块容器盒子的块级盒子称为块盒子（block box）。
匿名块盒子
在某些状况下举行视觉花样化时，须要增加一些补充性的盒子，这些盒子不能用CSS选择符选中，因而称为匿名盒子（anonymous boxes）。
CSS选择器不能作用于匿名盒子(anonymous boxes)，所以它不能被款式表给予款式。也就是说，此时一切可继续的 CSS 属性值都为 inherit ，而一切不可继续的 CSS 属性值都为 initial。
块包括盒子可以只包括行内级盒子，也可以只包括块级盒子，但平常的文档都邑同时包括二者，在这类状况下，就会在相邻的行内级盒子外竖立匿名块盒子。
示例节
斟酌下面的HTML代码，假定 和 都坚持默许的款式（即它们的 display 为 block）：
<div> Some inline text <p>followed by a paragraph</p> followed by more inline text. </div>
此时会发生两个匿名块盒子：一个是 元素前面的那些文本（Some inline text），另一个是元素背面的文本（followed by more inline text.）。此时会生成下面的块构造：
显现为：
Some inline text followed by a paragraph followed by more inline text.
对这两个匿名盒子来讲，程序员没法像<p>元素那样掌握它们的款式，因而它们会从<p>那边继续那些可继续的属性，如 color。其他不可继续的属性则会设置为 initial，比方，因为没有为它们指定 background-color，因而其具有默许的通明背景，而 元素的盒子则可以用CSS指定背景色彩。类似地，两个匿名盒子的文本色彩老是一样的。
另一种会竖立匿名块盒子的状况是一个行内盒子中包括一或多个块盒子。此时，包括块盒子的盒子会拆分为两个行内盒子，离别位于块盒子的前面和背面。块盒子前面的一切行内盒子会被一个匿名块盒子包裹，块盒子背面的行内盒子也是一样。因而，块盒子将成为这两个匿名块盒子的兄弟盒子。
假如有多个块盒子，而它们中心又没有行内元素，则会在这些盒子的前面和背面竖立两个匿名块盒子。
行内级元素和行内盒子节
假如一个元素的display属性为inline、inline-block或inline-table，则称该元素为行内级元素。显现时，它不会生成内容块，然则可以与其他行内级内容一同显现为多行。一个典范的例子是包括多种花样内容（如强调文本、图片等）的段落，就可以由行内级元素构成。
行内级元素会生成行内级盒子，该盒子同时会介入行内花样化高低文（inline formatting context）的竖立。行内盒子既是行内级盒子，也是一个其内容会介入竖立其容器的行内花样化高低文的盒子，比方一切具有display:inline款式的非替代盒子。假如一个行内级盒子的内容不介入行内花样化高低文的竖立，则称其为原子行内级盒子。而经由过程替代行内级元素或display值为inline-block或inline-table的元素竖立的盒子不会像行内盒子一样可以被拆分为多个盒子。
注重：最先的时刻，原子行内级盒子叫做原子行内盒子，这并不正确，因为它们并非行内盒子。厥后在一次勘误时修正了这一题目。不过，当你见到某些文章中运用了“原子行内盒子”的时刻，你尽可以将其明白为“原子行内级盒子”，因为这仅仅是一个名字的修正。
在同一个行内花样化高低文中，原子行内级盒子不能拆分红多行：
<style> span {
display: inline; /* default value*/
}</style>
<div style="width:20em;">
The text in the span
<span>can be split in several lines as it</span>
is an inline box.
</div>
可以会显现为：
The text in the span can be split into several lines as it is an inline box.
而：
<style> span {
display: inline-block;
}</style>
<div style="width:20em;">
The text in the span
<span>
cannot be split in several lines as it
</span>
is an inline-block box.
</div>
则可以显现为：
The text in the span cannot be split into several lines as it is an inline-block box.
个中的“cannot be split into several lines as it”永久不会换行。
匿名行内盒子
类似于块盒子，CSS引擎有时刻也会自动竖立一些行内盒子。这些行内盒子没法被选择符选中，因而是匿名的，它们从父元素那边继续那些可继续的属性，其他属性坚持默许值initial。
一种罕见的状况是CSS引擎会自动为直接包括在块盒子中的文本竖立一个行内花样化高低文，在这类状况下，这些文本会被一个足够大的匿名行内盒子所包括。然则假如仅包括空格则有可以不会生成匿名行内盒子，因为空格有可以会因为white-space的设置而被移除，从而致使终究的现实内容为空。
其他范例的盒子
行盒子
行盒子由行内花样化高低文竖立，用来显现一行文本。在块盒子内部，行盒子老是从块盒子的一边延伸到另一边（译注：即占有全部块盒子的宽度）。当有浮动元素时，行盒子会从向左浮动的元素的右边沿延伸到向右浮动的元素的左边沿。
行盒子更多是以技术性目标而存在的，Web开发者平常不须要体贴。
Run-in 盒子
Run-in 盒子经由过程display:run-in来定义，它可所以块盒子，也可所以行内盒子，这取决于紧随其后的盒子的范例。Run-in 盒子可以用来在可以的状况下将题目嵌入文章的第一个段落中。
注重：Run-in 盒子已经在CSS 2.1的规范中移除了，但可以会在CSS 3中作为一个实验性的内容再次到场。因而最好不要将其用于正式项目。
由其他模子引入的盒子
除了行内花样化高低文和块花样化高低文以外，CSS还定义了几种内容模子，这些模子一样可以应用于元素。这些模子平常用来形貌规划，它们可以会定义一些分外的盒子范例：
表格内容模子可以会竖立一个表格包装器盒子和一个表格盒子，以及多个其他盒子如表格题目盒子等
多列内容模子可以会在容器盒子和内容之间竖立多个列盒子
实验性的网格内容模子或flex-box内容模子一样会竖立一些其他品种的盒子
定位划定规矩
一旦生成了盒子今后，CSS引擎就须要定位它们以完成规划。下面是定位盒子时所运用的划定规矩：
普通流：根据序次顺次定位每一个盒子
浮动：将盒子从普通流中零丁拎出来，将其放到外层盒子的某一边
相对定位：根据相对位置来定位盒子，其位置依据盒子的包括元素所竖立的相对坐标系来盘算，因而相对定位元素有可以会掩盖其他元素
普通流引见
在普通流中，盒子会顺次安排。在块花样化高低文中，盒子在垂直方向顺次分列；而在行内花样化高低文中，盒子则程度分列。当CSS的 position 属性为 static 或 relative，而且 float 为 none 时，其规划体式格局为普通流。
浮动引见
在浮动定位中，浮动盒子会浮动到当前行的最先或尾部位置。这会致使普通流中的文本及其他内容会“流”到浮动盒子的边沿处，除非元素经由过程 clear 清除了前面的浮动。一个盒子的 float 值不为 none，而且其 position 为 static 或 relative 时，该盒子为浮动定位。假如将 float 设置为 left，浮动盒子会定位到当前行盒子的最先位置（左边），假如设置为 right，浮动盒子会定位到当前行盒子的尾部位置（右边）。不管是左浮动照样右浮动，行盒子都邑伸缩以顺应浮动盒子的大小。
相对定位引见
在相对定位中，盒子会完整从当前流中移除，而且不会再与其有任何联络（译注：此处仅指定位和位置盘算，而相对定位的元素在文档树中依然与其他元素有父子或兄弟等关联），其位置会运用 top、bottom、left 和 right
相对其包括块举行盘算。假如元素的 position 为 absolute 或 fixed，该元素为相对定位。
对牢固位置的元素来讲，其包括块为全部视口，该元素相对视口举行相对定位，因而转动时元素的位置并不会转变。
以上就是完整明白CSS中视觉花样化模子（附示例）的细致内容，更多请关注ki4网别的相干文章！
