CSS规范中的一些东西html1.盒模型的上图是指盒模型中的content、padding、border、margin边界。样式框内容区域的尺寸——内容宽度和内容高度——取决于几个因素:生成框的元素是否设置了“宽度”或“高度”属性,框是否包含文本和其他框,框是否是表格等等。框的内容、填充和边框区域的背景样式由(框的)生成元素的“背景”属性指定。边距背景总是透明的。在组合边距CSS中,两个或多个框(可能但不一定是兄弟)的相邻边距合并为一个边距。以这种方式组合边距称为collapse,合并后的边距称为collapsedmargins(折叠边距)元素的上边距带有间隙(clearance是指clear属性引起元素位置移动而形成的间隙)与bottommargin相邻,其margin会与下一个兄弟(元素)的相邻margin合并,但合并后不会与父块的bottommargin合并;水平边距不会合并;两个边距相邻当且仅当:都属于流入(in-flow)块级框,在同一个块格式化上下文中;没有线框、间隙、填充或边框来分隔它们;都属于垂直相邻的框边缘,即形成以下对之一:框第一个流入子元素的顶部边距和第一个流入子元素的底部边距及其下一个流入兄弟的顶部边距最后一个in-flowchild的bottommargin和它的计算高度是'auto'的父元素bottommarginbox的top和bottommargins,前提是盒子没有建立新的块格式化上下文,'min-height'计算为0,'height'的计算结果为0或'auto',没有in-flowchildren的Collapsedmargins也可以与另一个margin相邻,只要其margin的任何部分与该margin相邻,就是合并结果:当两个或多个margin被合并,由此产生的边距宽度是组合边距宽度的最大值。对于负margin,正相邻margin的最大值减去负相邻margin的绝对值的最大值。如果没有正边距,则从0中减去相邻边距绝对值的最大值。如果元素的边距与其父级的上边距合并,则框的上边框定义为与其父级相同。否则,要么元素的父元素不参与边距折叠,要么只参与其父元素的底部边距。如果元素的上边框非零,则元素的上边框位置与元素下边框的位置相同。填充填充的属性类似于外边距的属性。不同的是内边距的padding不能为负。属性border边框比较简单,就是一些样式。2.可视化格式化模型在可视化格式化模型中,文档树中的每个元素根据其框模型生成0个或多个框。这些框的布局由(以下因素)控制:*框大小和类型*定位方案(常规流、浮动与绝对定位)*文档树中元素之间的关系*外部信息(例如视口大小、内部尺寸图像等)包含块CSS2.1,许多框的位置和大小是根据称为包含块的矩形框的边界计算的。通常,生成的框作为后代框的包含块。我们说一个盒子为其后代“建立”了包含块。“Abox'scontainingblock”是指“盒子所在的包含块”,而不是它生成的(containingblock)溢出块级元素和块盒行级元素和行内盒使用display属性来定义这样的样式作为块、内联块、内联、列表项和无。以下是这些属性的作用:ThisvaluewillmaketheelementgenerateablockboxThisvaluewillmaketheelementgenerateaninline-levelblockcontainer(内联级块容器)。内联块的内部被格式化为块框,元素本身被格式化为原子行内级框。该值使元素生成一个或多个行内框。这个值导致元素(例如,一个LI)生成一个主块框和一个标记框。有关列表和列表格式示例的更多信息,请参阅列表一章。该值导致元素不出现在格式化结构中(即,在视觉媒体中,元素不生成框且不影响布局)。后代元素也不生成任何框,并且元素及其内容从格式结构中完全删除。不能通过在定位方案的后代上设置“显示”属性来覆盖此行为。在CSS2.1中,常规流程包括块级盒子的块格式化,行内级盒子的行内格式化,以及StageBoxes的块级和内联RelativePositioningFloating在浮动模型中,首先按照常规流程放置盒子,然后从常规流程中取出并尽可能向左或向右移动。Othercontentmayflowalongthesideofafloat(Contentmayflowalongthesideofafloat)*绝对定位在绝对定位模型中,一个盒子被完全从正常流中移除(它不影响后续的Sibling元素)并定位根据包含块*一个元素如果是浮动的,绝对定位的,或者是根元素,就被称为流外(element)。如果一个元素不是流出的,则称为流入(元素)。静态盒子就是一个规则的盒子,按照规则的流向进行布局。'top'、'right'、'bottom'和'left'属性无效。相对框的位置是根据正常流计算的(称为正常流中的位置),然后该框相对于其正常位置进行偏移。当B框相对定位时,后面的框的位置仍然按照B计算,没有偏移。'position:relative'对表行组、表头组、表尾组、表行、表列组、表列、表单元格和表标题元素的影响是not定义的绝对框的位置(可能还有大小)由“top”、“right”、“bottom”和“left”属性指定,这些属性指定相对于框的包含块的偏移量。绝对定位的盒子从正常流中取出,这意味着它们不会影响后续兄弟元素的布局,而且,虽然绝对定位的盒子有边距,但它们不会与任何其他边距合并,除非盒子相对于某些元素是固定的reference(参考)是固定的(fixed),盒子的位置是根据'absolute'模型计算的。与“绝对”模型一样,框的边距不与任何其他边距合并。3.常规流常规流中的框属于格式化上下文,它可以是块或内联(格式化上下文),但不能两者兼而有之。块级框参与块格式化上下文。行内级框参与行内格式化上下文。块格式化上下文浮动、绝对定位的元素、不是块框的块容器(例如inline-blocks、table-cells和table-captions),以及'overflow'不是'visible'的块框(除非该值已传播到视口)为其内容建立新的块格式化上下文。在块格式上下文中,框一个接一个地垂直放置,从包含块的顶部开始。两个同级框之间的垂直距离由“边距”属性确定。合并同一块格式化上下文中相邻块级框之间的垂直边距。在块格式上下文中,每个框的左外边缘紧挨着包含块的左外边缘(对于从右到左的格式,右外边界紧随其后)。即使在有浮动的情况下也是如此(尽管一个盒子的行框可能会因为浮动而缩小)。除非框建立一个新的块格式化上下文(在这种情况下框本身可能会被浮动缩小)内联格式化上下文在一个内联格式化上下文中,框从水平放置的包含块的顶部开始一个接一个地放置。水平边距、边框和填充在这些框之间有效。框可以以不同的方式垂直对齐:通过它们的底部或顶部,或者通过它们内部文本的基线。包含来自同一行的框的矩形区域称为行框。线盒的宽度由包含块和浮动条件决定,线盒的高度由计算线高部分给出的规则决定。linebox总是足够高以容纳它。所有箱子。但是,它可能比它包含的最高框高(例如,如果框是基线对齐的)。当盒子B的高度小于它所在的行盒的高度时,B在行盒中的垂直对齐方式由'vertical-align'属性决定。当多个inline-levelboxes不能水平共存于一个linebox中时,将它们分成两个或多个垂直堆叠的lineboxes。因此,一个段落是一个垂直堆叠的行框。线框不垂直堆叠(除非另有说明),它们不重叠相对定位当一个框按照正常流动或浮动放置时,它可能会相对于该位置移动,这称为相对定位。以这种方式偏移框(B1)的位置不会影响框(B2),如下所示:给定B2的位置,B1不会偏移,并且在B1应用偏移后B2不会重新定位。这表明相对定位可能会导致框重叠。但是,如果相对定位导致带有'overflow:auto'或'overflow:scroll'的框溢出,UA必须允许用户访问这部分内容(在其偏移位置),在这种情况下创建滚动条可能会影响布局绝对定位在绝对定位模型中,一个框相对于它的包含块显式偏移,并且完全从正常流中移除(不影响后续兄弟)。一个绝对定位的盒子为其子元素和绝对(不包括固定)定位的后代建立一个新的包含块。但是,绝对定位元素的内容不会与任何其他框对齐。它们可能会遮盖其他框的内容(或它们自己被遮盖),具体取决于重叠框的堆叠级别。固定定位是绝对定位的一个子类别。与固定定位框的唯一区别是包含块是由视口建立的。对于连续媒体,滚动文档时固定框不会移动。在这方面,它们类似于固定背景图像。对于分页媒体,固定定位框将在每一页上重复(出现)。例如,这对于在每页底部放置签名很有用。如果固定定位的框大于页面区域,则它们将被剪裁。在初始包含块中不可见的定位框的固定部分将不会被打印
