小卡酷谋的博客

平时我们从设备终端看到的 HTML 文档都是一个平面的，事实上 HTML 文档中的元素却是存在于三个维度中。除了大家熟悉的平面画布中的 x 轴和 y 轴，还有控制第三维度的 z 轴。其中 x 轴通常用来表示水平位置，y 轴来表示垂直位置，z 轴表示屏幕内外方向上的位置。在 CSS 中要确定沿着 z 轴排列元素，表示的是用户与屏幕的这条看不见的垂直线：而这里我们要讨论的层叠上下文（ stacking context ），就是 HTML 中的一个三维的概念。

如果某些属性可以继承，那么自然没有必要在写一遍。所谓重排就是浏览器重新计算布局位置与大小。这里我们主要来看 CSS 方面能够进行哪些性能优化。文件被下载、解析之后，浏览器才会知道还有另外一个。需要下载，这时才去下载，然后下载后开始解析、构建。会引发资源文件的下载顺序被打乱，即排列在。当然，性能优化是来自方方面面的。会影响浏览器的并行下载。文件只有在引用它的那个。会导致下载顺序紊乱。下载，并且打乱甚至破坏。

在网页加载的时候，某些图片还在请求中或者还未请求，这个时候就先找一个临时代替的图像，放在最终图像的位置上，但是这只是临时替代的图形，当图片数据准备好以后，会重新渲染真正的图形数据。但用户并不是一开始就需要所有的资源，所有我们可以对资源进行拆分，首先加载那些关键的资源，其他的资源等到需要的时候再去加载它。大部分用户不会用到一个网站的所有页面，但我们通常的做法却是把所有的功能都打包进一个很大的文件里面。，也被称之为惰性渲染，指的是为了提高用户感知的加载速度，以尽快的速度来呈现页面的技术。文件的大小可能会有几。

每一个元素都有所有的属性，每一个属性都会通过一系列的计算过程得到最终的值。其中的第二步和第三步层叠和继承会有一些需要注意的知识点。

如果该条属性作者并没有设置，那么还不会着急去使用默认值，而是会去看一下能否继承到该属性值。当然不是，真实的情况是这个元素所有的属性都拥有，只不过有一组默认的属性值。，当作者样式和浏览器默认样式中的声明值有冲突时，会优先把作者样式中的声明值当作。最终，如果没有作者样式，该属性值也无法继承而来，则会使用浏览器的默认样式。一段很简单的代码，就一个段落，然后设置了一个颜色属性为红色。属性，但是其实它一个属性都没落下，每个属性都是有默认值。属性值，同属于作者样式，这显然就属于层叠冲突了。

简单来说，就是页面中的一块渲染区域，并且有一套自己的渲染规则。它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。在上面的代码中，父元素的高度是靠子元素撑起来的，但是一旦我们给子元素设置了浮动，那么父元素的高度就塌陷了。效果：在上面的代码中，我们要设置两栏布局，左边栏宽度固定，右边栏自适应。基于此特点，我们就可以制作两栏自适应布局，方法就是给固定栏设置固定宽度，给不固定栏开启。设置了浮动效果，所以会脱离标准流，自然而然。上面只记录了一些常见的方式，完整的。的高度时，浮动子元素也参与计算。