咨询：是否存在代表包含块宽度1%的CSS单位（非vw、vb）

嘿，这个问题我挺有共鸣的——有时候确实会误以为有这样的原生单位，但实际上目前CSS里并没有直接对应「包含块宽度1%」的原生单位，我来给你掰扯清楚：

先澄清几个容易混淆的单位 #

• vw/vh：这个是基于视口（浏览器可视区域）的1%，和元素的包含块完全无关，你肯定已经清楚这点了。
• vb：你提到的这个单位，其实是基于视口块级尺寸的1%（简单说就是视口的高度或宽度里更小的那个维度），同样和包含块没有关系，所以不是你要找的。

那怎么实现你要的「基于包含块宽度保持尺寸比例」的需求？ #

虽然没有原生单位，但有几个非常实用的方法：

• 经典padding百分比技巧：CSS里的padding-top/padding-bottom的百分比值，是基于包含块的宽度计算的！比如要做一个1:1的正方形，只需要给div设置：

  .square {
    width: 50%; /* 占包含块宽度的50% */
    padding-top: 50%; /* 高度等于包含块宽度的50%，实现1:1比例 */
    position: relative; /* 如果要在里面放内容，需要加这个 */
  }
  

  里面的内容可以用绝对定位放在容器里。

• 现代CSS的aspect-ratio属性：这个属性简直是为比例布局量身定做的！直接指定宽高比，它会自动基于元素的宽度（也就是包含块的宽度）来计算高度，比如：

  .ratio-box {
    width: 70%;
    aspect-ratio: 16/9; /* 保持16:9的宽高比 */
  }
  

  现在主流浏览器都支持这个属性，兼容性非常好，推荐优先用这个。

• CSS变量+calc组合：如果需要更灵活的比例计算，可以给包含块定义变量，然后子元素用calc计算：

  .container {
    --container-w: 100%;
  }
  .child {
    width: calc(var(--container-w) * 0.6);
    height: calc(var(--container-w) * 0.3); /* 高度是包含块宽度的30% */
  }
  

  不过这个方法其实有点冗余，不如前面两种直接。

简单说就是：没有你以为的那种原生单位，但现有的CSS特性完全能满足你的需求，甚至更灵活～

内容的提问来源于stack exchange，提问作者Entretoize