css 100%溢出

CSS是网页开发中不可或缺的一部分。而100%溢出则是CSS的一个很重要的特性，它的作用是让元素能够在父容器的边界内溢出。

比如，如果你有一个宽度为300px的容器，而你想要在其中放置一个高度为400px的图片，而不希望它被剪切掉，这时，你就可以使用100%溢出来实现。

.parent {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.child {
  width: 100%;
  height: 400px;
  position: relative;
  top: -50%;
}

在上面的代码中，我们首先设置了一个容器的宽度和高度，然后在其中嵌套了一个元素。接着，我们给这个容器添加了overflow: hidden;的属性，这个属性的作用是让元素超出容器的部分不显示。

接下来，我们给这个嵌套元素设置了宽度为100%，这意味着它会在容器的边界内自动适应宽度。然后，我们将这个元素的高度设置为400px，并设置了相对位置和top属性，在这个元素被显示之前，将其向上移动50%。

由于overflow属性的限制，这个元素超出容器的部分将被隐藏，但是由于top属性的设置，这个元素所代表的图片却将完整地显示出来，不会被剪切掉。

通过使用100%溢出，你可以轻松地实现图片和其他元素的截断和隐藏，让你的网页更加优美和专业。