css 按钮让隐藏的内容显示不出来

CSS中，我们可以使用按钮来实现显示或隐藏内容的功能。但是，你可能遇到这样一个问题：当隐藏的内容出现时，会撑开整个页面或部分页面。这样的体验当然是不好的，所以，我们需要设置一些特殊的样式来解决这个问题。

实现这个目标的最简单的方法就是使用display：none。但是，如果您的隐藏内容非常重要或需要被SEO索引，那么您需要考虑其他方法。

下面是一种基于CSS的方法，使隐藏的内容不会撑开页面：

    .button {
        background-color: #f2f2f2;
        border: 1px solid #ddd;
        color: #222;
        cursor: pointer;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
    }
    .content {
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s ease-in-out;
    }
    .content.show {
        max-height: 9999px;
    }

上面的CSS代码中，按钮的样式使用了display：inline-block，这意味着，无论隐藏的内容占用多少空间，其父容器都不会撑开页面。

接下来，我们将通过.max-height属性来控制隐藏内容的高度，.overflow：hidden是将隐藏内容超出区域的部分隐藏起来。在.transition：all 0.3s ease-in-out中，我们通过CSS3动画来平滑地动态显示和隐藏隐藏内容。最后，当我们通过.show类将隐藏的内容显示出来时，我们通过增加max-height：9999px，强制将其显示。

使用这种方法，隐藏的内容不会撑开您的页面。当用户通过点击按钮，show类被添加到内容中，它将顺滑地展开。如果再次点击按钮，show类将被删除，该内容将缩回其开始位置。

在您的应用程序中实现这个方法非常容易，所以尝试一下吧！