时间戳

首页 > 解决方案 > 为什么使用 height:0 在 CSS 中隐藏组件时需要溢出：隐藏？

html - 为什么使用 height:0 在 CSS 中隐藏组件时需要溢出：隐藏？

问题描述

我不能使用 display:none 或 visibility:none 因为它需要动画。

为什么溢出：当我看不到或认为它溢出时需要隐藏？

https://www.youtube.com/watch?v=-8LTPIJBGwQ （大约 24 分钟，我有问题的部分是） 
.nav-links {
  display: flex;
  flex-direction: column;
  height: 0;
  overflow: hidden;
  transition: var(--transition);
}

.show-links {
  height: 312px;
}

标签： htmlcss

解决方案

CSS 的溢出属性定义了当容器的内容大于容器本身时如何处理。因为当容器是一维的（即其中一个维度设置为 0）时内容总是大于容器，所以溢出属性将用于定义网页如何处理内容。默认情况下，溢出设置为“可见”，因此内容将显示在原始容器之外。如果您希望内容不可见，则必须将溢出设置为隐藏，这将导致任何溢出内容（无法放入容器内的内容）被隐藏。

由于没有内容可以插入高度为 0px 的容器中，因此容器的所有内容都将被视为溢出，并且由于要隐藏内容，因此需要隐藏溢出 - 这就是将溢出设置为隐藏的作用. https://www.w3schools.com/cssref/pr_pos_overflow.asp

推荐阅读