CSS 百分比宽度

百分比是一种相对于包含块的计量单位。它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。把页面缩小看下效果！

article img {
  float: right;
  width: 50%;
}

你甚至还能同时使用 min-width 和 max-width 来限制图片的最大或最小宽度！

你可以用百分比做布局，但是这需要更多的工作。在下面的例子中，当窗口宽度很窄时 nav 的内容会以一种不太友好的方式被包裹起来。总而言之，选一种最合适你的内容的方式。

nav {
  float: left;
  width: 25%;
}
section {
  margin-left: 25%;
}

<section> - 1

当布局很窄时，nav 就会被挤扁。更糟糕的是，你不能在 nav 上使用 min-width 来修复这个问题，因为右边的那列是不会遵守它的。

</section>

<section> - 2

只有计算值是可以继承的。所以，即使一个百分比值用于父属性，一个真正的值，比如具体像素宽度 length 的值，将访问继承的属性，而不是百分比的值。

</section>