理解一些概念：
盒子模型
页面中的所有元素都被看作一个矩形盒子
内边距（padding)是内容区周围的空间。
边框(border)会在内边距外侧增加一条框线，这条框线可以是实线、虚线或点划线。
外边距(margin)，外边距是围绕在盒子可见部分之外的透明区域，用于在页面中控制元素之间的距离。
轮廓线(outline)，可以在边框盒子外围画出一条线，但这条线不影响盒子的布局，也就是不会影响盒子的宽度和高度。
盒子大小
默认情况下，元素盒子的width和height属性指的是内容盒子，也就是元素可渲染内容区的宽度和高度。
box-sizing的默认值为content-box（内容盒子），width和height属性的值将会给到内容区。–标准盒子模型
box-sizing的值修改为border-box（边框盒子），那么width和height属性的值将会包含内边距、边框和内容区。–怪异盒子模型
块盒（块级元素）与行盒（行级元素）
1、块级元素：p、h1和article这些元素都是。它们作为元素，显示为内容块或块级盒子(block box)的形式。
特点：
块级盒子会沿垂直方向堆叠，盒子在垂直方向上的间距由它们的上、下外边距决定。
2、行级元素：strong、span，因为它们的内容会以行内盒子(inline box)的形式显示在行内。
特点：
行内盒子是沿文本流水平排列的，也会随文本换行而换行。
它们之间的水平间距可以通过水平方向的内边距、边框和外边距来调节。
行内盒子的高度不受其垂直方向上的内边距、边框和外边距的影响，所以行内盒子明确设置高度和宽度也不会起作用。
3、display属性：改变生成的盒子类型。
（1）display属性设置为block，让span变得跟块级元素一样。
（2）display属性设置为none，让浏览器不为相应的元素生成盒子。不生成盒子，元素及其包含的内容就不会显示出来，也不会占用文档中的空间。
（3）display属性设置为inline-block。元素就会像一个行内盒子一样水平排列，同时像块级元素一样，能够设置宽度、高度、垂直外边距和内边距。
匿名块盒与匿名行内盒
1、匿名块盒
匿名块盒（Anonymous block box）是一类特殊的盒子，它们没有名字，不能用CSS选择符选中，因此无法直接通过CSS进行样式设置。匿名块盒的所有可继承的CSS属性值都为inherit，而所有不可继承的CSS属性值都为initial。
产生情况
（1）当块容器盒子同时包含块级元素和行内级元素时，CSS引擎会在相邻的行内级元素外创建匿名块盒来包裹这些行内级元素。
（2）当行内级盒子中包含块级盒子时，CSS引擎会拆分这个行内级盒子，并在拆分后的部分之间创建匿名块盒来包裹剩余的行内级内容。
举例：
<div>Some inline text<p>followed by a paragraph</p>followed by more inline text.
</div>
<div>是一个块容器盒子，它同时包含了行内文本和块级元素<p>。
CSS引擎会在“Some inline text”和<p>元素之间，以及<p>元素和“followed by more inline text.”之间创建匿名块盒来包裹这些行内文本。后面布局会进一步说明。
2、匿名行内盒
匿名行内盒（Anonymous inline box）：是指在HTML文档中，当文本或其他行内内容没有被任何行内元素（如<span>、<a>、<strong>等）包裹时，CSS引擎会自动为这些内容生成一个或多个匿名行内盒子，以便进行布局和渲染。
举例：
<p>Some <em>emphasized</em> text and more text.
</p>
<p>是一个块级元素，它包含了一些行内内容。其中，“Some ”和“ text and more text.”是文本内容，它们没有被任何行内元素包裹。因此，CSS引擎会自动为这些内容生成匿名行内盒子：
- “Some ”会生成一个匿名行内盒子。
<em>emphasized</em>是一个行内元素，它不会生成匿名行内盒子。- “ text and more text.”会生成另一个匿名行内盒子。
在行内格式化上下文中，这些匿名行内盒子会与<em>元素一起进行布局和渲染，确保文本内容能够按照预期的方式显示。
BFC详解
BFC（Block Formatting Contexts），即块级格式化上下文，是W3C CSS2.1规范中的一个“概念”。注意是概念。
指的是浏览器中创建的一个独立的渲染区域，并且拥有一套渲染规则，这套规则决定了其子元素如何定位，以及与其他元素的相互关系和作用
BFC特性
- 独立性：BFC内部的元素布局与外部元素无关，外部的布局也不会影响到BFC内部。
- 浮动元素包裹：浮动元素会被包裹在BFC的内部，不会影响到BFC外部的元素的布局。
- 垂直边距不重叠：在BFC中，两个相邻的块级元素的垂直边距不会发生重叠。
- 包含浮动元素：BFC在计算高度时会包含内部的浮动元素，从而避免父元素高度塌陷的问题。
BFC的形成条件
一个元素满足以下条件之一，就会生成BFC：
- 根元素（
<html>）。 - 浮动元素（
float属性值不是none）。 - 绝对定位元素（
position属性值为absolute或fixed）。 display属性值为inline-block、table-cell、table-caption、flex、inline-flex的元素。overflow属性值为auto、hidden、scroll的元素。
BFC应用场景：
例子一：清除浮动
当一个容器内部包含浮动元素时，该容器的高度可能会塌陷，因为它不包含浮动元素的高度。通过给容器添加一个overflow: hidden;样式，可以触发容器的BFC，使其包含浮动元素的高度，从而清除浮动导致的高度塌陷问题。
<div class="container"><div class="float-left">浮动元素</div>
</div>
.container {overflow: hidden; /* 触发BFC */border: 1px solid #000;
}.float-left {float: left;width: 100px;height: 100px;background-color: lightblue;
}
例子二：解决外边距重叠问题
在CSS中，垂直方向上的相邻块级元素的外边距可能会发生重叠。通过给其中一个元素创建BFC，可以阻止外边距的重叠。
<div class="box1"></div>
<div class="box2"></div>
.box1 {margin-bottom: 20px;height: 100px;background-color: lightgreen;
}.box2 {overflow: hidden; /* 触发BFC */margin-top: 30px;height: 100px;background-color: lightcoral;
}
在这个例子中，.box1和.box2的垂直外边距原本会重叠，但由于.box2触发了BFC，因此它们的外边距不会重叠，.box2会出现在.box1下方30px的位置。
例子三：自适应两栏布局
通过给两栏布局中的其中一栏创建BFC，可以实现自适应两栏布局。其中一栏的宽度固定，另一栏的宽度自适应。
<div class="left">左栏</div>
<div class="right">右栏</div>
.left {float: left;width: 200px;height: 200px;background-color: lightblue;
}.right {overflow: hidden; /* 触发BFC */height: 200px;background-color: lightgreen;
}
布局
有了 DOM 树和 DOM 树中元素的计算样式后，浏览器会根据这些信息合并成一个 layout 树，
收集所有可见的 DOM 节点，以及每个节点的所有样式信息。
根据 DOM 树里每个节点的样式，计算出每个节点的尺寸和位置。
布局生成原理
Layout 树和 DOM 树不一定是一一对应的，为了构建 Layout 树，浏览器主要完成了下列工作：
1、遍历 DOM 树：从 DOM 树的根节点开始遍历每个可见节点。
-
某些不可见节点（例如 script、head、meta 等），它们不会体现在渲染输出中，会被忽略。
-
某些通过设置 display 为 none 隐藏的节点，在渲染树中也会被忽略。
布局树是记录节点的几何信息(尺寸和位置)的，如果设置了
display: none;，则节点失去几何信息，不会被添加到布局树中
-
伪元素节点不存在于DOM树中，但是有几何信息，因此会被生成到布局树中。
-
w3c规定：
- 内容必须在行盒中
- 行盒和块盒不能相邻
如果在块盒中直接写入内容，则会在中间生成一个匿名行盒；
如果块盒和行盒相邻，则为行盒外部生成一个匿名块盒。
- 2、创建布局树节点：浏览器为每个可见元素创建一个布局树节点，这个节点包含了元素的基本信息，如元素的 ID、类名、样式等。
- 3、建立父子关系：浏览器建立布局树节点之间的父子关系，确保每个元素的布局信息与其父元素和子元素的布局信息保持一致。
布局计算—重排 Reflow
重要理解：
- 布局 是首次确定渲染树中所有节点的尺寸和位置，以及确定页面上每个对象的大小和位置的过程。
- 重排 是后续过程中对页面的任意部分或整个文档的大小和位置的重新计算
当DOM（文档对象模型）的变化影响了元素的几何信息（如元素的位置和尺寸大小）时，浏览器需要重新计算元素的几何属性，并将其安放在界面中的正确位置。
1、什么情况会触发重排？
- 页面初始渲染。
- 添加或删除可见的DOM元素。
- 元素位置的改变，或者使用动画。
- 改变元素尺寸，比如边距、填充、边框、宽度和高度等。
- 填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变。
- 浏览器窗口尺寸的变化（resize事件发生时）。
- 设置style属性的值，因为通过设置style属性改变节点样式的话，每一次设置都会触发reflow。
2、减少重排的策略策略有哪些？
- 减少直接操作DOM元素：尽量使用className来控制样式，而不是直接修改style属性。
- 避免使用table：因为table属性的变化可能会导致布局重排或重绘。
- 使用CSS3动画代替JavaScript动画：因为CSS3动画不会触发重排。
- 避免在循环中操作DOM：把DOM节点的属性值放在一个循环里当成循环里的变量可能会引发重排。
- 使用DocumentFragment：如果需要创建多个DOM节点，可以先使用DocumentFragment创建完，然后一次性地加入document，这样可以减少重排的次数。
- 使用display: none隐藏元素：当对父盒子进行操作前，先使用display: none隐藏它，等所有的操作完成后，再将这个父盒子显示出来。这样，中间的操作都不会造成重排。
)
