[分享]css3块元素的收缩

CSS3 块元素收缩是一种非常实用的技巧，它可以通过 CSS3 属性来控制一个块元素的展开和收起。当页面中有大量内容需要展示，但又希望页面不要显得太长，这时使用块元素收缩技巧就非常有用。CSS3 属性...

CSS3 块元素收缩是一种非常实用的技巧，它可以通过 CSS3 属性来控制一个块元素的展开和收起。当页面中有大量内容需要展示，但又希望页面不要显得太长，这时使用块元素收缩技巧就非常有用。

CSS3 属性中的 display 属性可以通过设定值为 none 或 block 来控制元素的显示和隐藏，同时也支持 transition 过渡效果，让元素的收缩和展开更加的平滑。

// HTML 代码
<div class="expander">
  <p class="toggle">点击展开</p>
  <div class="content">
    <p>我是折叠内容</p>
  </div>
</div>

// CSS 代码
.content {
  display: none; // 默认不显示
  transition: all 300ms ease; // 平滑过渡
}
.expander.active .content {
  display: block; // 点击后显示
}
.toggle {
  cursor: pointer;
} 

上述 HTML 代码中，我们使用了一个 div 元素来包含折叠内容，同时也包含了一个 "点击展开" 的按钮。CSS 代码中使用了 display 属性和 transition 属性来控制折叠内容的展开和收起，并且使用了 active 类来控制内容是否显示。

块元素收缩技巧对于商业网站、博客等需要展示大量文本内容的网站非常有用，不仅可以让页面显得紧凑，还可以提高用户体验。