告别“布局跳跳糖”：contain-intrinsic-size，你布局的定海神针
你有没有遇到过这样的糟心事儿？网页加载时，文字还没渲染出来，图片还在路上，整个页面就像一个正在搭积木的小孩，一会儿高一会儿矮，布局乱得像被熊孩子蹂躏过的玩具堆？这，就是布局跳动，专业术语叫CLS（Cumulative Layout Shift），用户体验的头号公敌。
想象一下，你正兴致勃勃地浏览一篇美食攻略，刚准备点开一家看起来超诱人的餐厅链接，结果页面突然向下猛地一跳，你点到了广告！心中的一万只草泥马奔腾而过… 这滋味，谁懂？
罪魁祸首往往是那些动态内容，比如图片、视频、iframe，甚至是字体加载。它们在加载完成之前，浏览器并不知道它们的确切尺寸，于是只能先按兵不动，等内容加载完毕，才“恍然大悟”地重新调整布局。这一调整，就导致了布局跳动。
别慌！今天，我们要介绍一位重量级选手，专门来拯救你于水火之中，它就是CSS属性 contain-intrinsic-size。这家伙就像一个“预言家”，能提前告诉浏览器，某个元素将来会占据多大的空间，让浏览器提前做好准备，避免布局跳动。
contain-intrinsic-size：我的任务就是“占坑”！
简单来说，contain-intrinsic-size 的作用就是给一个元素指定一个“固有大小”，即使这个元素的内容还没加载出来，浏览器也会按照这个大小给它预留空间。
你可以把它想象成一个建筑工地的“地基”。在盖楼之前，我们会先打好地基，明确建筑的占地面积和高度。contain-intrinsic-size 就像这个地基，告诉浏览器，这个元素将来会占据多大的空间，让浏览器提前规划好布局，避免内容加载后突然“拔地而起”，扰乱整个页面。
语法很简单，用法却很灵活：
contain-intrinsic-size: <length> | auto | none;
<length>： 指定元素的固有宽度和高度。你可以使用任何CSS长度单位，比如px,em,rem,vw,vh等。如果只指定一个值，则宽度和高度都使用该值。如果指定两个值，则第一个值表示宽度，第二个值表示高度。auto： 让浏览器自己决定固有大小。这通常用于替换元素，例如<img>和<video>，浏览器会根据元素的实际内容来计算固有大小。none： 不指定固有大小。这相当于完全禁用contain-intrinsic-size，元素的大小将完全取决于其内容。
实战演练：告别图片加载时的“布局蹦极”
图片是造成布局跳动的常见原因之一。在图片加载完成之前，浏览器并不知道它的尺寸，所以会先给它分配一个默认大小（通常是很小），等图片加载完毕，浏览器才发现“卧槽，原来这么大！”，然后重新调整布局，导致页面跳动。
有了 contain-intrinsic-size，我们可以提前给图片“占坑”：
img {
contain: size; /* 关键！启用尺寸容器 */
contain-intrinsic-size: 500px 300px; /* 预留 500px 宽，300px 高的空间 */
}这段代码告诉浏览器，所有 <img> 元素都应该被视为“尺寸容器”，并且它们的固有大小是 500px 宽，300px 高。即使图片还没有加载出来，浏览器也会按照这个大小给它预留空间，避免布局跳动。
注意： 这里使用了 contain: size。contain 属性的作用是告诉浏览器，元素应该被视为一个独立的容器，它内部的变化不会影响到外部的布局，反之亦然。contain: size 表示只应用尺寸容器，也就是只影响元素的尺寸计算。
更进一步：让 contain-intrinsic-size 自动适应图片宽高比
上面的例子中，我们硬编码了图片的宽高。但如果图片的宽高比例不固定，硬编码就会导致图片变形。这时，我们可以结合 aspect-ratio 属性，让 contain-intrinsic-size 自动适应图片的宽高比：
img {
contain: size;
contain-intrinsic-size: 500px; /* 只指定宽度 */
aspect-ratio: 16 / 9; /* 指定宽高比为 16:9 */
}这段代码告诉浏览器，图片的宽度是 500px，宽高比是 16:9。浏览器会根据这两个信息自动计算出图片的高度，并给它预留相应的空间。这样，无论图片的实际尺寸如何，都能保持正确的宽高比，避免变形。
视频也适用：让视频加载不再“惊天动地”
视频和图片一样，也会造成布局跳动。我们可以使用类似的方法，给视频预留空间：
video {
contain: size;
contain-intrinsic-size: 800px 450px; /* 预留 800px 宽，450px 高的空间 */
}iframe 的福音：告别“iframe 地震”
iframe 是一个嵌入其他网页的 HTML 文档。由于 iframe 的内容通常来自不同的域名，加载速度可能较慢，因此也容易造成布局跳动。contain-intrinsic-size 同样可以派上用场：
iframe {
contain: size;
contain-intrinsic-size: 100% 600px; /* 预留 100% 宽度，600px 高度的空间 */
}这段代码告诉浏览器，iframe 的宽度应该占据父容器的 100%，高度是 600px。即使 iframe 的内容还没有加载出来，浏览器也会按照这个大小给它预留空间，避免布局跳动。
auto 的妙用：让浏览器自己做主
有时候，我们并不想硬编码元素的固有大小，而是希望浏览器根据元素的实际内容来自动计算。这时，我们可以使用 auto 关键字：
img {
contain: size;
contain-intrinsic-size: auto; /* 让浏览器自己决定固有大小 */
}在这种情况下，浏览器会尝试根据图片的实际尺寸来计算固有大小。如果图片已经加载完毕，浏览器会使用图片的实际尺寸作为固有大小。如果图片还没有加载完毕，浏览器会使用默认的尺寸。
注意： auto 关键字通常用于替换元素，例如 <img> 和 <video>。对于其他元素，auto 关键字可能不会产生预期的效果。
none 的作用：取消“占坑”
如果你想完全禁用 contain-intrinsic-size，可以使用 none 关键字：
img {
contain-intrinsic-size: none; /* 不指定固有大小 */
}在这种情况下，元素的大小将完全取决于其内容。
总结：contain-intrinsic-size 的优势与局限
优势：
- 有效避免布局跳动： 这是
contain-intrinsic-size最重要的优势。它可以提前给动态内容预留空间，让浏览器提前规划好布局，避免内容加载后突然“拔地而起”，扰乱整个页面。 - 提升用户体验： 布局跳动会严重影响用户体验。
contain-intrinsic-size可以让页面加载更加平滑流畅，提升用户体验。 - 简单易用：
contain-intrinsic-size的语法很简单，用法也很灵活。只需要几行代码，就可以轻松解决布局跳动问题。
局限：
- 需要提前知道元素的尺寸：
contain-intrinsic-size需要提前知道元素的尺寸，或者至少需要知道元素的宽高比。如果元素的尺寸完全未知，contain-intrinsic-size就无法发挥作用。 - 可能造成视觉上的“空白”： 如果元素的实际内容比
contain-intrinsic-size指定的大小要小，就会在页面上留下一些“空白”，影响美观。 - 并非万能药：
contain-intrinsic-size只能解决因动态内容加载造成的布局跳动问题。对于其他原因造成的布局跳动，contain-intrinsic-size无能为力。
最佳实践：如何充分发挥 contain-intrinsic-size 的威力
- 结合
contain: size使用：contain: size可以将元素视为一个独立的容器，防止内部的变化影响到外部的布局，反之亦然。这可以更好地控制元素的尺寸，避免意外的布局跳动。 - 使用合适的长度单位： 可以使用任何CSS长度单位，比如
px,em,rem,vw,vh等。选择合适的长度单位可以更好地适应不同的屏幕尺寸和分辨率。 - 结合
aspect-ratio属性使用： 如果元素的宽高比例不固定，可以结合aspect-ratio属性，让contain-intrinsic-size自动适应元素的宽高比。 - 谨慎使用
auto关键字：auto关键字通常用于替换元素，例如<img>和<video>。对于其他元素，auto关键字可能不会产生预期的效果。 - 测试与调试： 在使用
contain-intrinsic-size之后，一定要进行充分的测试与调试，确保元素的尺寸和布局符合预期。
总结：让你的网页告别“布局跳跳糖”
contain-intrinsic-size 是一个强大的CSS属性，可以有效避免因动态内容加载造成的布局跳动，提升用户体验。虽然它并非万能药，但只要合理使用，就能让你的网页告别“布局跳跳糖”，变得更加平滑流畅。
下次再看到页面跳动，别再抱怨了，赶紧祭出 contain-intrinsic-size 这件神器吧！相信它会给你带来惊喜！