LayoutObject
LayoutText
LayoutBR
LayoutCounter
LayoutTextCombine
LayoutTextFragment
LayoutWordBreak
LayoutBoxModelObject
LayoutInline
LayoutRubyAsInline
LayoutQuote
LayoutBox
LayoutMultiColumnSpannerPlaceholder
LayoutListMarker
LayoutFrameSet
LayoutTableBoxComponent
LayoutTableCol
LayoutTableRow
LayoutTableSection
LayoutReplica
LayoutReplaced(layout)
LayoutPart(layout)
LayoutEmbeddedObject
LayoutFrame
LayoutIFrame
LayoutHTMLCanvas(LayoutReplaced::layout)
LayoutImage(LayoutReplaced::layout)
LayoutMedia
LayoutVideo
LayoutBlock(layout->layoutBlock())
LayoutTable(layout)
LayoutScrollbarPart(layout)
LayoutGrid(layoutBlock)
LayoutDeprecatedFlexibleBox(layoutBlock)
LayoutFlexibleBox(layoutBlock)
LayoutButton
LayoutFullScreen
LayoutMenuList
LayoutSlider
LayoutSliderContainer
LayoutBlockFlow(layoutBlock)
LayoutView
LayoutVTTCue
LayoutTextTrackContainer
LayoutTableCell
LayoutTableCaption
LayoutSliderThumb
LayoutRubyText
LayoutRubyRun
LayoutRubyBase
LayoutProgress
LayoutMultiColumnSet
LayoutListItem
LayoutListBox
LayoutDetailsMarker
LayoutFieldset
LayoutFileUploadControl
LayoutFlowThread
LayoutTextControl
LayoutTextControlMultiLine
LayoutTextControlSingleLine
LayoutSearchField
# api 目录
LineLayoutItem
LineLayoutText
LineLayoutBR
LineLayoutSVGInlineText
LineLayoutTextCombine
LineLayoutBoxModel
LineLayoutInline
LineLayoutSVGInline
LineLayoutSVGTextPath
LineLayoutBox
LineLayoutBlockFlow
LineLayoutRubyBase
LineLayoutRubyRun
LineLayoutRubyText
LineLayoutListMarker
LayoutItem
LayoutTextItem
LayoutTextFragmentItem
LayoutBoxModel
LayoutTextControlItem
LayoutBoxItem
LayoutPartItem
LayoutEmbeddedItem
LayoutLIItem
LayoutImageItem
LayoutMediaItem
LayoutBlockItem
LayoutFullScreenItem
LayoutMenuListItem
LayoutProgressItem
LayoutSliderItem
LayoutViewItem
# line目录
DisplayItemClient
InlineBox
InlineFlowBox
RootInlineBox
InlineTextBox
LayoutBoxModelObject
- 此类是所有CSS对象的基类, 所有CSS对象都遵循box模型对象。有关更多信息,请参见LayoutBox中的BOX MODEL部分。
- 此类实际上没有框模型,但它公开了子类可以扩展的一些常用功能或概念。例如,有用于页边距,边框,填充和borderBoundingBox()的访问器。
- 此类分开实现的原因是从其继承的2个类(LayoutBox和LayoutInline)具有不同的设计要求,但需要具有相同绘制层(PaintLayer)。
- 有关Box模型的完整实现,请参见LayoutBox。
- 此类的一个重要成员是PaintLayer。该类对于painting和hit-testing至关重要。基于layerTypeRequired()的返回值,有不同的方式实例化PaintLayers。有趣的是,大多数SVG对象都继承自LayoutSVGModelObject,因此不能具有PaintLayer。这是我们设计的不幸产物,因为它限制了代码共享并阻止了硬件加速SVG(当前设计需要使用PaintLayer进行合成)。
- 为了充分理解LayoutBoxModelObject和继承的类,我们需要引入坐标系的概念。有2个主要坐标系:
- 物理坐标:这是用于绘画的坐标系,并且与在物理显示器(屏幕,打印页面)上看到的物理方向相对应。在CSS中,“ top”,“ right”,“ bottom”,“ left”全都在物理坐标中。该代码也符合此约定。
- 逻辑坐标:这是用于布局的坐标系。它由“writing-mode”(vertical-rl)和“direction”(ltr)确定。任何使用“before”,“after”,“before”或“after”的属性都在逻辑坐标中。这些也分别被称为“logical top”,“logical bottom”,“logical left”和“logical right”。
LayoutBox
- LayoutBox实现完整的CSS框模型。 LayoutBoxModelObject仅为LayoutInline和LayoutBox引入了一些抽象。模型的逻辑位于LayoutBox中,例如用于形成CSS框的矩形和偏移量的存储(m_frameRect),以及用于不同框的getters。
- LayoutBox也是支持滚动条的最高级类,但是逻辑被委托给PaintLayerScrollableArea。根据CSS规范,滚动条应“插入内部边框边缘和外部填充边缘之间”。滚动条的存在由“ overflow”属性确定,并且可以以布局溢出为条件(有关如何跟踪溢出的更多详细信息,请参见OverflowModel)。滚动条有2种类型:
- 非重叠滚动条占用内容框的空间。
- 覆盖滚动条不会仅覆盖边界框,可能会与填充框的内容重叠。有关滚动条的更多详细信息,请参见PaintLayerScrollableArea。
LayoutBlock
- LayoutBlock是任何作为包含块的LayoutObject使用的类。另请参见LayoutObject::containsBlock(),该函数用于获取LayoutObject的包含块。
- CSS是不一致的,并且允许内联元素(LayoutInline)包含块,即使它们不是块。我们的实现与内联混淆。例如LayoutObject :: containsBlock()与LayoutObject :: container()。
- 包含块是布局的中心概念,尤其是对于out-of-flow定位的元素的布局而言。它们用于确定LayoutObject的大小和位置。
- LayoutBlock是用于处理Blink中out-of-flow的已定位元素的类,尤其是对于布局而言(请参见layoutPositionedObjects())。这就是LayoutBlock通过 |gPositionedDescendantsMap| 跟踪它们的原因。 (请参见LayoutBlock.cpp)。
- 请注意,这是Blink做出的设计决策,并不反映CSS:CSS允许相对定位的内联(LayoutInline)包含块,但它们没有逻辑来处理流出的定位对象。这会导致选择一个封闭的LayoutBlock(用于在布局期间插入流出的对象)和CSS包含块(用于调整大小)的复杂性。
LayoutReplaced
- LayoutReplaced是CSS定义的Replaced elements的基类:
- Replaced elements内容超出CSS格式模型范围的元素,例如图像,嵌入式文档或applet。
- blink认为的Replaced elements具有固有尺寸(例如,图像或视频的自然尺寸)。固有大小由m_intrinsicSize存储。
- 计算有时会要求固有比率,定义如下:
- intrinsicWidth
intrinsicRatio = -------------------
intrinsicHeight
- intrinsicWidth
- intrinsicRatio比用于保持与原始对象大小相同的比例(因此,如果宽度/高度与原始对象不匹配,则避免视觉失真)。
LayoutFlexibleBox
LayoutBlockFlow
- LayoutBlockFlow是实现块容器的类
- LayoutBlockFlows是唯一允许拥有浮动对象的LayoutObject
- floats被插入|m_floatingObjects | (请参见FloatingObjects,以获取有关如何对floats进行建模的更多信息)。这是作为布局块(layoutBlockChildren)或行布局(LineBreaker类)的一部分发生的。这是因为floats可以是内联或块上下文的一部分。
- floats的一个有趣特征是它们可以侵入下一个块。这意味着| m_floatingObjects |可能包含指向先前同级LayoutBlockFlow的float的指针。
- LayoutBlockFlow是唯一的LayoutObject,可以拥有line box tree和perform inline layout。可以参阅LayoutBlockFlowLine.cpp。
- LayoutBlockFlow强制执行以下不变式:所有流入子项(即,不包括浮动和流出位置)都是全部块或全部内联框。
LayoutText
- LayoutText是表示文本节点的任何内容的根类(请参阅core/dom/Text.h)。
- 这是树中的一个公共节点,因此为了限制内存开销,此类直接从LayoutObject继承。 CSS和SVG布局均使用此类,因此从LayoutObject继承是自然的选择。
- 文本的实际layout由包含的内联对象(LayoutInline)或块对象(LayoutBlockFlow)处理。他们将调用Unicode的Bidirectional算法将文本分成实际的行。布局的结果是box树,它表示屏幕上的线。它存储在m_firstTextBox和m_lastTextBox中。要了解行是如何被bidi算法截断的,请阅读例如LayoutBlockFlow::layoutInlineChildren。
- m_firstTextBox和m_lastTextBox不属于LayoutText,而是指向封闭的内联/块的指针(请参见LayoutInline和LayoutBlockFlow的m_lineBoxes)。
- 此类为其基础文本实现首选的逻辑宽度计算。宽度存储在m_minWidth和m_maxWidth中。它们是根据m_preferredLogicalWidthsDirty延迟计算的。
- 先前的说明也适用于绘制部分。参见例如BlockFlowPainter :: paintContents特别使用LineBoxListPainter。
- bidi算法参考https://www.cnblogs.com/dojo-lzz/p/4289423.html
关于排版的基础知识,可以参考:
一篇文章了解HTML文档流(normal flow)