告别“布局跳跳糖”：contain-intrinsic-size，你布局的定海神针 你有没有遇到过这样的糟心事儿？网页加载时，文字还没渲染出来，图片还在路上，整个页面就像一个正在搭积木的小孩，一会儿高一会儿矮，布局乱得像被熊孩子蹂躏过的玩具堆？这，就是布局跳动，专业术语叫CLS（Cumulative Layout Shift），用户体验的头号公敌。 想象一下，你正兴致勃勃地浏览一篇美食攻略，刚准备点开一家看起来超诱人的餐厅链接，结果页面突然向下猛地一跳，你点到了广告！心中的一万只草泥马奔腾而过… 这滋味，谁懂？ 罪魁祸首往往是那些动态内容，比如图片、视频、iframe，甚至是字体加载。它们在加载完成之前，浏览器并不知道它们的确切尺寸，于是只能先按兵不动，等内容加载完毕，才“恍然大悟”地重新调整布局。这一调整，就导致了布局跳动。 别慌！今天，我们要介绍一位重量级选手，专门来拯救你于水火之中，它就是CSS属性 contain-intrinsic-size。这家伙就像一个“预言家”，能提前告诉浏览器，某个元素将来会占据多大的空间，让浏览器提前做好准备，避免布局跳动。 contai …