CSS编码撰写中视觉效果文件格式化实体模型的学

2021-01-20 06:39 jianzhan

CSS 视觉效果文件格式化实体模型(visual formatting model)是用来解决文本文档并将它显示信息在视觉效果新闻媒体上的体制。这是 CSS 的1个基本定义。 视觉效果文件格式化实体模型依据 CSS 盒实体模型为文本文档的每一个元素转化成 0,1 或好几个盒。每一个盒的合理布局由以下內容构成:

(1)盒规格:确立特定,受到限制或沒有特定
(2)盒种类:行内(inline), 行内级別(inline-level), 分子行内级別(atomic inline-level), 块(block)盒;
(3)精准定位计划方案(positioning scheme): 基本流,波动或肯定精准定位;
(4)树中的其它元素: 它的子代与同代;
(5)视口(viewport) 规格与部位;
(6)内含照片的固定不动规格;
(7)其它信息内容。
1个盒相对它的包括块(containing block) 的界限来3D渲染。一般盒为它的子孙后代元素创建包括块。留意盒其实不受它的包括块的限定,当它的合理布局跑到包括块的外面时称为外溢(overflow)。

视口 Viewport
在持续媒体上工作中的客户代理商一般会向客户出示1个视口(显示屏上的1个对话框或其它可视性地区),客户能够根据它来浏览文本文档。客户代理商能够在视口被调剂尺寸时更改文本文档的合理布局(详见原始包括块)。

假如视口小于3D渲染文本文档的画布地区,客户代理商理应出示1个翻转体制。每一个画布数最多可有着1个视口,但客户代理商能够把文本文档3D渲染最多个画布上(即为同样文本文档出示不一样的主视图)。

包括块 Containing blocks
在CSS 2.1中,很多框的部位和尺寸都依据1个名为包括块的矩形框框边沿来相对性测算获得。为元素转化成的框一般会当做其后代框的包括块;大家称框为其后代“建立”(establishes)了包括块。“框的包括块”表明“框所处的包括块”,而并不是其造成的包括块。

每一个框会被给予1个相对其包括块的部位,但它不容易被局限在其包括块内;它有将会会外溢。

盒的转化成(Box generation)
CSS 视觉效果文件格式化实体模型的1一部分工作中是从文本文档元素转化成盒。转化成的盒有着不一样种类,并对视觉效果文件格式化实体模型的解决造成危害。转化成盒的种类取决于 CSS 特性 display

块级元素与块盒(Block-level elements and block boxes)

当元素的 CSS 特性  display 为 block, list-item 或 table 时,它是块级元素 block-level 。块级元素(例如<p>)视觉效果上展现为块,垂直排序。

块级盒参加(块文件格式化左右文 block formatting context)。每一个块级元素最少转化成1个块级盒,称为关键块级盒(principal block-level box)。1些元素,例如<li>,转化成附加的盒来置放新项目标记,但是大部分元素只转化成1个关键块级盒。

关键块级盒将包括子孙后代元素转化成的盒和转化成的內容。它也是可使用(精准定位计划方案 positioning scheme)的盒。

venn_blocks.png1个块级盒将会也是1个块器皿盒。块器皿盒(block container box) 只包括其它块级盒,或转化成1个行内文件格式化左右文(inline formatting context),由此只包括行内盒。留意块级盒与块器皿盒定义不一样。 前者叙述元素跟它的父元素与弟兄元素之间的主要表现,后者叙述元素跟它的子孙后代之间的危害。一些块级盒,例如报表,并不是块器皿盒。相反,1些块器皿盒,例如非更换行内块及非更换报表模块格,并不是块级盒。

另外是块器皿盒的块级盒称为块盒(block boxes)。

密名块盒(Anonymous block boxes)

有时必须加上填补性盒,这些盒称为密名盒(anonymous boxes),  它们沒有姓名,不可以被 CSS 挑选符选定。

不可以被 CSS 挑选符选定代表着不可以用款式表加上款式。这代表着全部承继的 CSS 特性值为 inherit ,全部非承继的 CSS 特性值为 initial 。

块器皿盒要末只包括行内级盒,要末只包括块级盒。但一般文本文档会另外包括二者。在这类状况下,将建立密名块盒来包括紧邻的行内级盒。

拿下面的 HTML 编码来讲 ( <div> 与 <p> 应用默认设置特性 display:block )

XML/HTML Code拷贝內容到剪贴板
  1. <div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div>  

将建立两个密名块盒,1个包括 <p> 前面的文字 (Some inline text), 1个包括 <p> 后边的文字(followed by more inline text),  构造以下:

結果:


拷贝编码
编码以下:
Some inline text
followed by a paragraph
followed by more inline text.

和 <p> 元素不一样, 开发设计者不可以操纵这两个密名盒。针对可承继特性, 它们将取 <div> 的特性值, 例如 color。针对非承继特性,值为原始值 ,例如沒有特定 background-color, 值为原始值即 transparent,因而 <div> 情况可见。而 <p> 能够特定 background-color 。相近的,这两个密名盒文字是1样的色调。
另外一种将建立密名块盒的状况是,1个行内盒包括了1个或几个块盒。在这类状况下,包括块盒的盒将拆分成两个行内盒置放于块盒前后左右,随后各自由两个密名块盒包括。这样块盒就与两个包括行内元素的密名块盒产生了弟兄关联。

假如行内盒包括好几个块盒,而且这些块盒之间沒有夹杂內容,将在这些块盒前后左右建立密名块盒。

行内级元素与行内盒(Inline-level elements and inline boxes)

当元素的 CSS 特性 display 的测算值为 inline, inline-block 或 inline-table 时,称它为行内级元素。视觉效果上它将內容与其它行内级元素排序为多行。典型的如段落內容,有文字(能够有多种多样文件格式例如侧重),或照片,全是行内级元素。
行内级元素转化成行内级盒(inline-level boxes),参加行内文件格式化左右文(inline formatting context)。另外参加转化成行内文件格式化左右文的行内级盒称为行内盒(Inline boxes)。全部display:inline 的非更换元素转化成的盒是行内盒。而不参加转化成行内文件格式化左右文的行内级盒称为分子行内级盒(atomic inline-level boxes)。这些盒由可更换行内元素,或 display 值为 inline-block 或 inline-table 的元素转化成,不可以拆分为好几个盒。

留意:最初分子行内级盒(atomic inline-level boxes)被称为分子行内盒(atomic inline boxes)。很悲剧,它们并不是行内盒。标准的勘误表调整了这个不正确。 无论如何,当再看到分子行内盒时能够安心确当成分子行内级盒,由于只是改了姓名。
分子行内盒内行内文件格式化左右文里不可以分为多行。

CSS Code拷贝內容到剪贴板
  1. <style>   
  2.   span {   
  3.     display:inline/* default value*/  
  4.   }   
  5. </style>   
  6. <div style="width:20em;">   
  7.    span 里的文字 <span>能够   
  8.    分为多行由于</span>它是个行内盒。   
  9. </div>  

結果:


拷贝编码
编码以下:
span 里的文字能够
分为多行由于它是个
行内盒。

CSS Code拷贝內容到剪贴板
  1. <style>   
  2.   span {   
  3.     display:inline-block;   
  4.   }   
  5. </style>   
  6. <div style="width:20em;">   
  7.    span 里的文字 <span>不可以分为多行   
  8.    由于它</span> 是个行内块盒。   
  9. </div>  

結果:


拷贝编码
编码以下:
span 里的文字
不可以分为多行由于它
是个行内块盒。
密名行内盒(Anonymous inline boxes)

相近于块盒,CSS 模块有时全自动转化成行内盒。这些盒也是密名的,由于它们沒有对应的挑选器姓名。它们承继全部可承继的特性,非承继的特性取 initial。

密名行内盒最多见的事例是块盒立即包括文字,文字将包括在密名行内盒中。空白假如应用white-space 去掉,则不容易转化成密名行内盒。

行盒(Line boxes)

行盒由行内文件格式化左右文(inline formatting context)造成的盒,用于表明1行。在块盒里边,行盒从块盒1边排版到另外一边。 当有波动时, 行盒从左波动的最右侧排版到右波动的最左侧。

行盒是技术性上的完成,开发设计者一般无需操劳它。

插进盒(Run-in boxes)

插进盒,由  display:run-in 界定,由后续盒的种类决策是块盒還是行盒。能够用来在第1个段落中插进题目。

Note: 插进盒(Run-in boxes)从 CSS 2.1 规范中移除,由于可实际操作的完成界定不够。 将会 CSS3 会引进,可是这是试验特性,不可以用于生产制造自然环境。

除行内及块文件格式化左右文, CSS 容许元素有更多的內容实体模型。这些提升的实体模型是以便叙述特殊的合理布局,将会会界定新的盒种类:

(1)报表內容实体模型(table content model)能够建立1个报表包装盒(table wrapper box)及报表盒(table box), 还可以建立独特盒,例如题目盒(caption boxes)。
(2)两列內容实体模型(multi-column content model)能够在器皿盒与內容之间建立列盒(column boxes)。
(3)试验性的栅格数据,延展性盒內容实体模型也建立新的盒种类。
(4)精准定位计划方案(Positioning schemes)EDIT

1旦盒转化成了, CSS 模块要特定它们的部位。会用到以下之1的计划方案:

(1)基本流(normal flow)盒1个接1个排序。
(2)波动(floats)计划方案将盒从基本流里提出来,放在当今盒的周围。
(3)肯定精准定位(absolute positioning)中的盒座标是肯定的。肯定精准定位元素能够盖住应用其它精准定位计划方案的元素。


基本流(Normal flow)

在基本流中,盒1个接着1个排序。在块级文件格式化左右文里边, 它们竖着排序;内行内文件格式化左右文里边, 它们横着排序。 当 position 为 static 或 relative,而且 float 为 none 时会开启基本流。

(1)在块级文件格式化左右文里边,基本流竖着排序。
(2)行内文件格式化左右文里边,基本流横着排序。

基本流分成两种状况:
(1)针对静态数据精准定位(static positioning),position 值 为 static ,盒的部位是基本流合理布局里的部位。
(2)针对相对性精准定位(relative positioning),position 值 为 relative, 盒偏位部位由这些特性界定 top, bottom, left and right 。即便有偏位,依然保存原来的部位,其它基本流不可以占有这个部位。

波动(Floats)
针对波动精准定位计划方案(float positioning scheme), 盒称为波动盒(floating boxes)。它坐落于当今行的开始或结尾。这致使基本流围绕在它的附近,除非设定 clear 特性。

要应用波动精准定位计划方案,元素 CSS 特性 position 为 static 或 relative,随后  float 不为 none 。假如 float 设为 left, 波动由行盒的开始刚开始精准定位。假如设为 right, 波动精准定位内行盒的结尾。

肯定精准定位(Absolute positioning)

针对肯定精准定位计划方案, 盒从基本流中被移除,不危害基本流的合理布局。 它的精准定位相对它的包括块,有关CSS特性: top, bottom, left 及 right 。

假如元素的特性position为 absolute 或 fixed, 它是肯定精准定位元素。

固定不动精准定位元素(fixed positioned element)也是肯定精准定位元素,它的包括块是视口。当网页页面翻转时它固定不动在显示屏上,由于视口沒有挪动。